How to use react native navigation wix with context to share data from provider to all components? - hook

Question

I want to use react-native-navigation with context to send data from provider to all my components. I have done it as follow:
index.js
import {Navigation} from 'react-native-navigation';
import {App} from './App'
App();
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack:
{
id: 'FoodApp',
children: [
{
component: {
id: 'myLoginId',
name: 'myLogin',
options: {
topBar: {
visible: false,
height: 0,
},
}
}
},
],
},
},
});
});
App.js
export const App = () => {
Navigation.registerComponent(`myLogin`, () => (props) => (
<GlobalProvider>
<Login {...props} />
</GlobalProvider>
), () => Login);
Navigation.registerComponent(`myMain`, () => (props) => (
<GlobalProvider>
<Main {...props} />
</GlobalProvider>
), () => Main);
};
GlobalProvider and GlobalContext
const GlobalContext = React.createContext();
export const GlobalProvider = ({children}) => {
return <GlobalContext.Provider value={20}>
{children}
</GlobalContext.Provider>;
};
export default GlobalContext;
Main.js
const Main = () => {
const value= useContext(GlobalContext);
const options = (passProps) => {
return {
topBar: {
height: 0,
},
};
};
return (
<View style={styles.mainContainer}>
<Text>Main {value}</Text>
</View>
);
};
It does not give any errors but it does not show value. Please help me how to fix it. I have searched a lot but I cannot find any useful thing.
I have used:
"react": "16.11.0",
"react-native": "0.62.0",
"react-native-navigation": "^6.3.3",

Answer 1

it's weird that the value is not showing at all as your code snippet should display value. I've created an example below to demonstrate integrating React Context with react-native-navigation but unfortunately as react-native-navigation is not a single root application (each registered screen is a "root") the regular Context pattern would not work as expected.
// CounterContext.js
import React from 'react
const initialCounterState = {
count: 0
}
const counterContextWrapper = (component) => ({
...initialCounterState,
increment: () => {
initialCounterState.count += 1
component.setState({ context: contextWrapper(component) })
},
decrement: () => {
initialCounterState.count -= 1
component.setState({ context: contextWrapper(component) })
},
})
export const CounterContext = React.createContext({})
export class CounterContextProvider extends React.Component {
state = {
context: counterContextWrapper(this)
}
render() {
return (
<CounterContext.Provider value={this.state.context}>
{this.props.children}
</CounterContext.Provider>
)
}
}
// index.js
import { Navigation } from 'react-native-navigation
import { CounterContextProvider } from './CounterContext
import { Main } from './Main
Navigation.registerComponent(
'Main',
() => props => (
<CounterContextProvider>
<Main {...props} />
</CounterContextProvider>
),
() => CounterReactContextScreen
)
// Main.js
import React from 'react'
import { Button, Text, View } from 'react-native'
import { CounterContext } from './CounterContext'
export const Main = () => {
const { count, increment, decrement } = React.useContext(CounterContext)
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)
}
This should all work, however the caveat is if you register 2 screens with the same Context Provider (for example, Main as your root and Pushed as a screen that gets pushed from Main) if you update the value on Pushed screen, it would not re-render Main screen to show the updated value.
I'd recommend to use MobX if you want Context like API. You could checkout my boilerplate project https://github.com/jinshin1013/rnn-boilerplate.