CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Anshul Kai
Anshul Kai

Reputation: 4088

react-navigation: Include a Component in each screen

I'm using a StackNavigator with redux like below. What is the cleanest way to include a Component to all my screens? I've tried adding a child Component to both AppWithNavigationState and AppNavigator with no luck.

<Provider store={store}>
  <AppWithNavigationState />
</Provider>

const AppNavigator = StackNavigator({
  Login: { screen: Login },
  Main: { screen: Main },
}, {
  headerMode: 'none',
  }
})


const AppWithNavigationState = ({ dispatch, router }) => {
  return(
    <AppNavigator navigation={addNavigationHelpers({ dispatch, state: router })} />
  )
};

const mapStateToProps = (state) => ({
  state,
});

export default connect(mapStateToProps)(AppWithNavigationState);

Upvotes: 0

Views: 138

Answers (1)

bennygenel
bennygenel

Reputation: 24670

You can try to add a sibling component rather than adding a child component. Try the example below.

Example

const AppWithNavigationState = ({ dispatch, router }) => {
  return(
    <View>
        <AppNavigator navigation={addNavigationHelpers({ dispatch, state: router })} />
        <DefaultComponentForEachScreen />
    </View>
  )
};

Upvotes: 2

Related Questions