As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.

If you need to trigger a re-render across all screens, there are many popular third party libraries such as MobX or Redux.


This answer takes in consideration react-navigation package.

You have to wrap your App component with the ContextProvider in order to have access to your context on both screens.

    import { createAppContainer } from 'react-navigation'
    import { createStackNavigator } from 'react-navigation-stack'
    import ProfileContextProvider from '../some/path/ProfileContextProvider'

    const RootStack = createStackNavigator({
      Home: { screen: HomeScreen },
      Profile: { screen: ProfileScreen },

    const AppContainer = createAppContainer(RootStack)    
    const App = () => {
      return (
        <AppContainer />


You can make it like this.

Create new file: GlobalContext.js

import React from 'react';

const GlobalContext = React.createContext({});

export class GlobalContextProvider extends React.Component {
  state = {
    isOnline: true

  switchToOnline = () => {
    this.setState({ isOnline: true });

  switchToOffline = () => {
    this.setState({ isOnline: false });

  render () {
    return (
          switchToOnline: this.switchToOnline,
          switchToOffline: this.switchToOffline

// create the consumer as higher order component
export const withGlobalContext = ChildComponent => props => (
      context => <ChildComponent {...props} global={context}  />

On index.js wrap your root component with context provider component.

  <App />

Then on your screen HomeScreen.js use the consumer component like this.

import React from 'react';
import { View, Text } from 'react-native';
import { withGlobalContext } from './GlobalContext';

class HomeScreen extends React.Component {
  render () {
    return (
        <Text>Is online: {}</Text>

export default withGlobalContext(HomeScreen);

You can also create multiple context provider to separate your concerns, and use the HOC consumer on the screen you want.

Related Query

More Query from same tag