0

I am new to React Native and I am trying to change a variable set in one function from another function. This should be similar to changing a 'global' variable to a new value. Here is my code:

import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
const [isLogged, setLog] = useState(0);

 return (
  <>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'    }}>
      <Text>Home Screen</Text>
    </View>
      {isLogged === 0 ? (
        <Button
          title="Go to Login"
          onPress={() => navigation.navigate('Login')}
        />
      ) : (
        <Button title="Do Stuff" onPress={() => navigation.navigate('Stuff')} />
      )}
  </>
 );

}

function LoginScreen({ navigation }) {
//do login stuff here...
{isLogged => setLog(1)}  //unable to change 'isLogged' to a value of '1'...?
}

function StuffScreen({ navigation }) {
//do some stuff here...
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Stuff" component={StuffScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

The error I get makes it obvious the 'isLogged' variable is not recognized in the function 'LoginScreen'. What is the proper way to use and manipulate 'global' variables that can be changed across various functions in React Native? I thank you in advance for any suggestions.

Looking into a suggestion`from another user it seems the 'global' is what I need, however I am still having difficulties. Here is some adjusted code:

var func = require('./global');
global.config = func(0);

function HomeScreen({ navigation }) {
var _status = global.config;

 return (
  <>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>Passed config: {JSON.stringify(_status)}</Text>
     <Text>Home Screen</Text>
    </View>
 {_status === 0 ? (
        <Button
          title="Go to Login"
          onPress={() => navigation.navigate('Login')}
        />
      ) : (
        <Button title="BroadCast" onPress={() => navigation.navigate('BroadCast')} />
      )}
  </>
 );

}

function LoginScreen({ navigation }) {
//do login stuff here...
global.config = func(1);  //new value of "1" does not pass to 'HomeScreen'
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   <Text>Login Screen</Text>
   <Text>Set Global: {JSON.stringify(global.config)}</Text>  //indicates '0'...WHY?????
   <Button title="Go to Home" onPress={() => navigation.navigate('Home')}    />
  </View>
  );
 }

Here is the 'global' file where I attempt to load from external .js file:

module.exports = function(variable) {    
console.log(variable);
return variable;
}

My problem here is that 'global.config' that I attempt to change in the 'LoginScreen' function does not display the updated value when returning to 'Home' screen. WHY...???? I cannot believe such a simple concept in any other language I know is nearly impossible in React Native...this is far more complicated than it should be...any advice on what I am not understanding is GREATLY appreciated...this is killing me.

Pangit
  • 564
  • 1
  • 7
  • 23
  • are you using or willing to use redux? coz redux is the best for global state. – Gaurav Roy Jun 23 '20 at 04:37
  • You have to use global state management library like redux or MobX etc. – Kishan Bharda Jun 23 '20 at 04:41
  • Thank you for the responses...I am not interested in using redux or some other library...there must be a way to accomplish without that. It would seem to be a very simple task, it is very surprising React Native is so convoluted in this regard. – Pangit Jun 23 '20 at 04:57
  • Does this answer your question? [How to use global variables in React Native?](https://stackoverflow.com/questions/35577551/how-to-use-global-variables-in-react-native) – azundo Jun 23 '20 at 07:08
  • Thank you for the post. It seems this is what I am searching for...however I am still having issues. I cannot change the 'global' value in another function and also can not read from an imported .js file. My post has been edited to attempt to explain. – Pangit Jun 23 '20 at 09:57
  • I found the following link: "https://stackoverflow.com/questions/33539774/how-to-create-global-helper-function-in-react-native" which is somewhat helpful, however still having problems setting/passing the global variable from across differen tfunctions. – Pangit Jun 24 '20 at 08:40

0 Answers0