CODEWITHSUNDEEP
javascriptandroidreactjsfunctionreact-native
Jean
Jean

Reputation: 201

Making a variable accessible outside a function

I have this React Native code and I want to use the gameOfTheUser variable (which is created in the arrow function: userRef. ounce (' value'). then (snapshot =>) outside this one, in order to be able to continue the different conditions. How to do it? I imagine (and I hope!) that there is a simple solution to this problem.

My RouterScreen.js :

    import React from 'react';
    import { Text } from 'react-native';
    import fb from '../engine/firebaseConfig';

    export default class RouterScreen extends React.Component {
      componentDidMount() {
        const { navigate } = this.props.navigation;
        fb.auth().onAuthStateChanged(user => {
          if (user) {
            var userRef = fb.database().ref('users/' + user.uid);
            userRef.once('value').then(snapshot => {
              var gameOfTheUser = snapshot.child('game').val();
              console.log('0 : ' + gameOfTheUser);
            });
            if (gameOfTheUser !== null) {
              console.log('InGame');
              var gameID = gameOfTheUser;
              console.log('1 : ' + gameOfTheUser);
              console.log('1 : ' + gameID);
              navigate('Game', { user, gameID });
            } else {
              console.log('NotInGame');
              navigate('Choose', { user });
            }
          } else {
            navigate('Auth');
          }
        });
      }

      render() {
        return <Text>Hello</Text>;
      }
    }

My App.js :

import React from 'react';
import { StackNavigator } from 'react-navigation';

// Pages
import RouterScreen from './screens/RouterScreen';
import AuthScreen from './screens/AuthScreen';
import ChooseScreen from './screens/ChooseScreen';
import GameScreen from './screens/GameScreen';

export const RootStack = StackNavigator(
  {
    Router: {
      screen: RouterScreen,
    },
    Auth: {
      screen: AuthScreen,
    },
    Choose: {
      screen: ChooseScreen,
    },
    Game: {
      screen: GameScreen,
    },
  },
  {
    initialRouteName: 'Router',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Upvotes: 1

Views: 770

Answers (1)

William
William

Reputation: 942

I think i can describe your purpose at:

  • Login user
  • If ingame -> naviage to game
  • Else -> navigate to Auth.

There are many way to do this but as "simple" in your question, i think React Native Async Storage is a good solution.

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

See React Native document about Async Storage here.

There is some demo codes:

Get data from storage:

var gameOfTheUser = AsyncStorage.getItem('gameOfTheUser');

Save data to Async Storage:

await AsyncStorage.setItem('gameOfTheUser', 'the_witcher_3');

Note: Async storage can only save data with type of String. So with complex data like array or Object you must JSON.stringify it first

Upvotes: 1

Related Questions