Erro ao recuperar valor AsyncStorage | React Native parte 2: Aprimorando app com navegação e mais recursos

ao tentar recuperar valor do AsyncStorage ele retorna p seguinte erro:

arguments[0].indexOf is not a function. (In 'arguments[0].indexOf('Requiring module \'NativeModules\' by name')', 'arguments[0].indexOf' is undefined)

meu código:

import React, { Component } from 'react';

import { 
  View,
  TextInput,
  StyleSheet,
  Dimensions,
  Button,
  Text,
  AsyncStorage,
} from 'react-native';
import { asyncStorage } from 'reactotron-react-native';


// import { Container } from './styles';
const width = Dimensions.get('screen').width;
export default class Login extends Component {

  efetuaLogin(){
    // console.warn("login: ", this.state.usuario, "senha: ", this.state.senha)
    if( this.state.usuario === "renato" && this.state.senha === "123" ){
      // console.warn("Login feito")
      // const token = '123456'
      AsyncStorage.setItem('token', '123456')
      AsyncStorage.setItem('usuario', this.state.usuario)

      console.warn( AsyncStorage.getItem('token') )
    }
    // throw new Error("Nao foi possivel efetuar o login")
  }

  render() {
    return ( 
    <View style={styles.container}>
      <Text style={styles.titulo}>Insta Ricky and Morty</Text>
      <View style={styles.form}>
          <TextInput style={styles.input} placeholder="Usuario" 
            onChangeText={texto => this.setState({usuario: texto})}
            autoCapitalize="none"
          />
          <TextInput style={styles.input} placeholder="Senha"
            onChangeText={texto => this.setState({senha: texto })}
            autoCapitalize="none"
            secureTextEntry={true}
          />
          <Button title="Login" onPress={ this.efetuaLogin.bind(this) } />
      </View>
    </View>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  form:{
    width: width * 0.8
  },
  input: {
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  titulo:{
    fontWeight: 'bold',
    fontSize: 26,
    marginBottom:3
  }
})

O que deve estar acontecendo é o seguinte, o AsyncStorage faz uma operação assíncrona. Então quando você está tentando recuperar o valor da chave "Token", ela ainda não foi preenchida, por isso o erro.

Uma das formas de evitar este problema é utilizar async - await, desta forma a execução do progama somente vai continuar depois de gravar os dados.

Aqui tem um exemplo de como sua função de login deve ficar depois deste ajuste:

 efetuaLogin = async () => {
    if( this.state.usuario === "renato" && this.state.senha === "123" ){
      await AsyncStorage.setItem('token', '123456')
      await AsyncStorage.setItem('usuario', this.state.usuario)
      console.warn( await AsyncStorage.getItem('token') )
    }
  }