React Navigation | How to use Navigation inside an React component?

Question

I have an app with a main screen where everything should happen. I am using the lib React-calendars to render the calendar and below there is the content of the application, which would be divided into 3 tabs, one to add annotations, see annotations and another for personal settings.

The problem is that I am trying to use navigationContainer inside this container and nothing is rendered with Stack Navigation.

I looked it up, but does it look like React Navigation only renders screens as components? So I couldn’t leave the static calendar for all screens and change only the components below?

This is my JSX:

<View style={styles.container}>
    <Calendar
    style={styles.Calendar}
    onDayPress={(day) => {handleDatesClicked(day)}}
    markedDates={datesClicked}
    />
<NavigationContainer>
  <Stack.Navigator initialRouteName="Events" 
    screenOptions={{headerStyle: {backgroundColor: '#FFD426',}, }}>

    <Stack.Screen name="Events" component={Events} />
    <Stack.Screen name="AddEvents"  component={AddEvents} />
    <Stack.Screen name="Person" component={Person} />

  </Stack.Navigator>
</NavigationContainer>

<Footer />

</View>

Answer 1

You need to split your application. Browsing is a distinct part of rendering and should not even be in the same files.

If the goal is to have a tabs navigation you have specific documentation for it on the React Navigation