How to pass/send state between/across pages?

Question

I have done some code in my app but it seems can pass through a global variable.

I set a global variable in Auth.js .

export const _values = { 
  username: ''
};

Get username value from SignUp.js .

import { onSignIn, onSignUp, _values } from "../Auth";

export default ({ navigation }) => (
  <View style={{ paddingVertical: 20 }}>
    <Card title="SIGN UP">
      <FormLabel>Email</FormLabel>
      <FormInput 
        placeholder="Email address..."
        onChangeText={(val) => _values.username = val}
      />

     ...

    </Card>
  </View>
);

I want to pass username value using state technique across pages ( Home.js & Profile.js ).

Reference: https://github.com/datomnurdin/auth-reactnative

Answer 1

You can use redux for state management.\\

https://redux.js.org/

Or if yours app isn't too complex, you can just go to Context Api .

https://medium.com/@505aaron/a-practical-react-native-problem-solved-with-the-context-api-eecaf2e05202

UPDATE: here is a demo of a context api .

Let's say you have to change a user and you want that user in every component. Whenever the user changes, you want the updated user. So you need to access that user in every component and have the ability to change it too.

First of all create a User Context, Lets make a file named as UserContext.js :

import React from 'react';
const Context = React.createContext('username');
export class UserStore extends React.Component {
    state = {
        language: 'username'
    }
    onUserChange = username => this.setState({ username });
    render() {
        return (
            <Context.Provider value={{ ...this.state, onUserChange: this.onUserChange }}>
                {this.props.children}
            </Context.Provider>
        );
    }
}
export default Context;

Now you have a userContext with initial value of username = 'username' .

And whenever you want to access it or change it you simply need to use the Consumer.

import React from 'react';
import Context from '../contexts/UserContext';

class UserSelector extends React.Component {
    renderContent = (store) => {    
        return (
            <View>
                <Text>Choose a User</Text>
                 <Button 
                  title='Change User'
                  onPress ={() =>store.onUserChange('mark')}
                  />
            </View>
        );
    }
    render() {
        return (
            <Context.Consumer>
                {this.renderContent}
            </Context.Consumer>
        );
    }
}
export default UserSelector;