Show a component in all screens with React-Navigation - React Native

Question

I want to have a component like button (or react-native-action-button precisely) to be shown in each screen using React Navigation.

Does React Navigation has any option in inside Routes to implement it once and use everywhere?

Note: I don't want to import Component in each .js class and use it in render.

Reference -> Like this in app's each screen. Floating Action Button Reference

Answer 1

In your Navigation Container add it like this`

  <NavigationContainer>
    <Stack.Navigator initialRouteName="SplashScreen">
     ...
    </Stack.Navigator>
    
    <Button /> // add your component here. It will be visible in all screens
  </NavigationContainer>

Answer 2

Make a default screen with that button. Everytime when you want to use that button wrap your all items with that component instead of view. For example 'DefaultScreen' is your view with the default component. Use it like that:

render(){
  <DefaulScreen>
    {AllOtherItems}
  </DefaulScreen>
}

And in that DefaultScreen render all children like this:

class DefaultScreen extends Component {
  render(){
    <View>
     {this.props.children}
     {defaultComponentThatYouWantToPutWithCustomStyle}
    </View>
  }
}