CODEWITHSUNDEEP
javascriptreact-native
Richard X
Richard X

Reputation: 1134

How would I send information from one screen to another without navigating to the other screen?

I am fairly new to React Native, and I have been trying to make an event organizer where if you sign up for an event, it gets added to another page which contains your schedule. However, I have been looking through the documentation and I can't seem to find how you can send data from one screen to another without actually navigating to the other screen. In other words, I want this navigation.navigate('Schedule', {name: eventName, time: eventTime}); but without navigating.

Upvotes: 0

Views: 225

Answers (2)

Jordan Grant
Jordan Grant

Reputation: 2271

Here are some suggestions:

1. AsyncStorage: You can save them to AsyncStorage (this is the hardware-backed secure storage on the phone) and they can be retrieved at any time. Let's say the user's schedule is an array of those events such as:

var a = [{ name: eventName, time: eventTime }, { name: eventName, time: eventTime }]

You can do this:

AsyncStorage.setItem('Schedule', JSON.stringify(a));
AsyncStorage.getItem('Schedule');

See: https://github.com/react-native-community/async-storage

2. Backend

Save the events to your backend server and retrieve them from the other page.

3. Redux or React Hooks (Advanced) https://medium.com/swlh/react-global-state-with-hooks-f163e49f90f9 https://redux.js.org/introduction/getting-started/

4. Global State w/React Hooks

My new favorite way to manage global state with built-in React Hooks

Upvotes: 2

Amir Hedieh
Amir Hedieh

Reputation: 1178

You can have a global object to store your shared data between screens. even if you read Redux docs, one of the redux usage cases is when you have some data to share between different screens.

so here is the code for a global object (Singleton pattern)

export class GlobalState {
  public static getInstance(): GlobalState {
    if (GlobalState.instance == null) {
      GlobalState.instance = new GlobalState()
    }
    return GlobalState.instance
  }
private state: IGlobalState = this.restoreDefaultState()
private restoreDefaultState(): IGlobalState {
    return (
      {
        // your properties are placed here
      }
    )
  }
}

usage:

GlobalState.getInstance() ... //call any function placed there

Note: code above is writtent in TypeScript, you can easily convert it to JS.

Upvotes: 0

Related Questions