AsyncStorage.setItem crashes iOS every time, works perfectly on Android, Expo

Question

Here's what I'm importing:

import React, { Component } from 'react'
import {
  Image,
  Text,
  TextInput,
  Keyboard,
  KeyboardAvoidingView,
  TouchableOpacity,
  View,
  Linking,
  AsyncStorage,
  Alert
} from 'react-native'

here is the function that sets the state (called from TextInput below)

setName = (name, value) => {
    AsyncStorage.setItem(name, value);
}

and here is how it is being called

<TextInput
    keyboardType='default'
    autoCapitalize='words'
    returnKeyType='next'
    onSubmitEditing={() => this.lastNamedRef.focus()}
    underlineColorAndroid='transparent'
    style={{flex:1}}
    placeholder='Your first name'
    value={this.state.firstName}
    onChangeText={(text) => [this.validateInputLength(text, 2, 50, 'firstName'), this.setName('firstName', this.state.firstName)]}
 />

<TextInput
    keyboardType='default'
    autoCapitalize='words'
    returnKeyType='done'
    ref={lastNameRef => this.lastNamedRef = lastNameRef}
    underlineColorAndroid='transparent'
    style={{flex:1}}
    placeholder='Your last name'
    value={this.state.lastName}
    onChangeText={(text) => [this.validateInputLength(text, 2, 50, 'lastName'), this.setName('lastName', this.state.lastName)]}
 />

If I remove the this.setName() function from the onChangeText in the TextInput the app does not crash, but when it is there it crashes on iOS, but not on Android. this.state.firstName and this.state.lastName is coming from AsyncStorage when componentWillMount() (below) being updated with the setName function (above)

componentWillMount() {
    AsyncStorage.getItem('firstName').then((value) => this.setState({firstName:value}))
    AsyncStorage.getItem('lastName').then((value) => this.setState({lastName:value}))
}

the AsyncStorage.getItem within componentWillMount() does not crash the app, but does not seem to load the data into the field inconsistently. Most times it loads, but not every time. AsyncStorage in general seems super buggy.

Here's the validateInputLength function

validateInputLength = (text, min=10, max=25, type) => {
  if(text.length < min || text.length > max) {
    if(type=='firstName') {
      this.setState({firstName:text})
      this.setState({firstNameValidated:false})
      return false;
    } else if (type=='lastName') {
      this.setState({lastName:text})
      this.setState({lastNameValidated:false})
      return false;
    }
  } else {
    if(type=='firstName') {
      this.setState({firstName:text})
      this.setState({firstNameValidated:true})
    } else if (type=='lastName') {
      this.setState({lastName:text})
      this.setState({lastNameValidated:true})
    }
  }
}

... and here's the constructor

constructor(props) {
  super(props)
  this.state = {
    firstName: '',
    lastName: '',
    firstNameValidated: false,
    lastNameValidated: false,
  };
}

This crashes expo on iOS whether it is on my iPhone or running in the simulator, without showing any errors. Any ideas?

Answer 1

You can only store strings in AsyncStorage if you attempt to store a JSON object for example expo crashes, this may be whats happening, try using JSON.stringify before storing objects