Why do I receive “unrecognized selector sent to instance“ in React Native iOS?

Question

My code works perfectly on Android but it shows an error in iOS.

Error in iOS:

I couldn’t understand this error; is it related to AsyncStorage?

Why this happening on iOS devices?

---

First File

My imports

import React, {Component} from 'react';

import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';

import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';

import { SimpleLineIcons, Ionicons } from '@expo/vector-icons';

import { NavigationActions } from 'react-navigation';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { LinearGradient } from 'expo';

import { StatusBar } from "react-native";

import { Grid, Row, Col } from 'react-native-easy-grid';

import Toast, {DURATION} from 'react-native-easy-toast';

import Strings from '../utils/Strings';

var width = Dimensions.get('window').width;

export default class Login extends Component {
    static navigationOptions = {
        header: null
    };

    constructor() {
        super();
        this.state = {
            MobileNo: '',
        };
    }

    login = () => {
        AsyncStorage.setItem('mobileno', MobileNo);

        const { MobileNo } = this.state;
        console.log("Expected login number " + MobileNo);

        fetch('http://demo.weybee.in/Backend/controller/User_Login.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                mobileno: MobileNo
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            // If server response message same as Data Matched
            if(responseJson != 'Enter valid phone number') {   
                const { navigation } = this.props;
                // Then open Profile activity and send user email to profile activity.
                this.props.navigation.navigate('ForgetPass');
            } else {
                this.refs.toast.show('Invalid Number', DURATION.LENGTH_LONG);
            }
        }).catch((error) => {
            console.error(error);
        });
    }
}

Second File

My imports

import React, {Component} from 'react';

import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';

import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';

import { SimpleLineIcons, Ionicons } from '@expo/vector-icons';

import { NavigationActions } from 'react-navigation';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { LinearGradient } from 'expo';

import { StatusBar } from "react-native";

import { Grid, Row, Col } from 'react-native-easy-grid';

import Toast, {DURATION} from 'react-native-easy-toast'

import Strings from '../utils/Strings';

import OtpInputs from 'react-native-otp-inputs';

var width = Dimensions.get('window').width; 

export default class Login extends Component {
    static navigationOptions = {
        header: null
    };

    constructor() {
        super();
        this.state = {
            MobileNo: '',
            mobileNumber: '',
            code: '',
        }
    }

    componentDidMount() {
        AsyncStorage.getItem('mobileno').then((mobileNo) => {
            if(mobileNo){
                this.setState({ mobileNumber: mobileNo });
            }
        });
    }

    PTP = () => {
        let mobileNumber = JSON.parse(this.state.mobileNumber);
        console.log("login number " + mobileNumber);

        let {code} = this.state;
        console.log(code);

        fetch('http://demo.weybee.in/Backend/controller/Get_PTP.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                mobileno: mobileNumber,
                code: code,
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            // If server response message same as Data Matched
            if(responseJson != 'Enter valid phone number') {     
                const { navigation } = this.props;
                // Then open Profile activity and send user email to profile activity.
                this.props.navigation.navigate('Home');
            } else {
                this.refs.toast.show('Invalid PTP', DURATION.LENGTH_LONG);
            }
        }).catch((error) => {
            console.error(error);
        });
    }
}

Answer 1

I got this error when passing a null value to AsyncStorage.setItem:

AsyncStorage.setItem('user_id', null) // breaks!

To fix it, I just passed a string as the value of the setItem command:

AsyncStorage.setItem('user_id', 'tupac_without_a_nosering') // good!

Answer 2

I think the problem might be with how you're saving MobileNo to AsyncStorage. Isn't MobileNo part of state and shouldn't it be referred to as this.state.MobileNo?

Inside FirstFile, This is where the problem is,

AsyncStorage.setItem('mobileno', MobileNo);

It should be,

AsyncStorage.setItem('mobileno', this.state.MobileNo);