React Native - async/await does not work

Question

Is it possible to use async/await outside of classes? For example I use AsyncStorage to store access token and want to get this token before StackNavigator will be initialized.

container.js

import React from 'react';
import { StackNavigator } from 'react-navigation';
import PairingView from '../components/PairingView';
import MainView from '../components/MainView';
import { getTokenFromStorageAsync } from '../helpers/asyncStorageHelper';

const accessToken = getTokenFromStorageAsync().done();
console.log(accessToken);   <---------- undefined

const AppNavigator = StackNavigator({
  PairingRoute: {
    screen: PairingView
  },
  MainRoute: {
    screen: MainView
  }
}, {
  initialRouteName: (accessToken == null) ? 'PairingRoute' : 'MainRoute',
  initialRouteParams: {
    token: accessToken
  }
});

const App = () => (
  <AppNavigator />
);

export default App;

asyncStorageHelper.js

import { AsyncStorage } from 'react-native';

export const getTokenFromStorageAsync = async () => {
  try {
    const value = await AsyncStorage.getItem('@nfs:token');
    console.log(value);   <---------- access token
    if (value != null)
      return value;
  } catch (err) {
    console.error(err);
  }
  return undefined;
};

Sorry my mistake. So change it to getTokenFromStorageAsync().then(token => console.log(token)); — ponury-kostek
– ponury-kostek, Commented Jun 23, 2017 at 10:28
async/await is part of this year's release (ES2017) not of last years release (ES7/ES2016). Please read tag descriptions. — Felix Kling
– Felix Kling, Commented Jun 25, 2017 at 19:13

R. R. · Accepted Answer · 2017-10-19 04:37:54Z

2

Solved the problem.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      accessToken: 'fetching'
    };

    this._loadAccessToken();
  }

  _loadAccessToken = async () => {
    const token = await getTokenFromStorageAsync();
    this.setState({ accessToken: token });
  }

  render() {
    if (this.state.accessToken === 'fetching')
      return null;

    const AppNavigator = StackNavigator({
      PairingRoute: {
        screen: PairingView
      },
      MainRoute: {
        screen: MainView
      }
    }, {
      initialRouteName: (this.state.accessToken == null) ? 'PairingRoute' : 'MainRoute',
      initialRouteParams: {
        token: this.state.accessToken
      }
    });

    return <AppNavigator />;
  }
}

export default App;

edited Oct 19, 2017 at 4:37

answered Jun 26, 2017 at 6:09

R. R.

311 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noitidart Over a year ago

Can you explain what you did to fix it?

R. R. Over a year ago

@Noitidart so, in question i tried to get value from AsyncStorage outside of component. It will not work, because await can't be used without async function. I just move it inside component and do whatever I want.

Forivin · Accepted Answer · 2017-06-23 12:20:06Z

0

getTokenFromStorageAsync().then(accessToken => {
    console.log(accessToken);
    // ...
});

or

// ...
export default (async () => {

    const accessToken = await getTokenFromStorageAsync();
    console.log(accessToken);

    const AppNavigator = StackNavigator({
      PairingRoute: {
        screen: PairingView
      },
      MainRoute: {
        screen: MainView
      }
    }, {
      initialRouteName: (accessToken == null) ? 'PairingRoute' : 'MainRoute',
      initialRouteParams: {
        token: accessToken
      }
    });

    const App = () => (
      <AppNavigator />
    );

    return App;

})()

As you can see you have to export a promise that resolves with your App, instead of exporting your App directly.

Edit:

import { AppRegistry } from 'react-native';
import App from './app/container';
(async () => {
    let ResolvedApp = await App()
    AppRegistry.registerComponent('someappname', () => ResolvedApp);
    // ...
})()

edited Jun 23, 2017 at 12:20

answered Jun 23, 2017 at 10:27

Forivin

15.8k31 gold badges121 silver badges219 bronze badges

18 Comments

R. R. Over a year ago

and how can it be used with AppNavigator?

Forivin Over a year ago

I don't understand your question.

R. R. Over a year ago

'import' and 'export' may only appear at the top level

Forivin Over a year ago

Oh, I see what you mean. You'll have to export a promise that resolves wihtout your App then.

R. R. Over a year ago

as well as if i import getTokenFromStorageAsync as Promise. I want to do this without .then or .done.

|

Collectives™ on Stack Overflow

React Native - async/await does not work

2 Answers 2

2 Comments

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related