How to minimize React Native Navigation Modal?

Viewed 50

How to minimize a modal within a Stack Navigator in React Native so that the model still shows as a small bar at the bottom of the screen and stays even when switching tabs (like in the pictures I attached).

Picture of Modal opened

Picture of Modal miminized

Currently I have built a Bottom Navigation Tab Bar and within this Tab Navigator I have a Stack Navigator where the Modal can be opened.

<Tab.Navigator initialRouteName="Session">
      <Tab.Screen name="Social">{() => <Social />}</Tab.Screen>
      <Tab.Screen name="History">{() => <History />}</Tab.Screen>
      <Tab.Screen name="Session" options={{headerShown: false}}>
        {() => (
          <Stack.Navigator>
            <Stack.Screen name="Start Session">
              {() => <StartSession navigate={navigate} />}
            </Stack.Screen>
            <Stack.Screen
              name="New Template"
              options={{
                presentation: 'containedModal',
              }}>
              {() => <AddTemplate />}
            </Stack.Screen>
          </Stack.Navigator>
        )}
      </Tab.Screen>
      <Tab.Screen name="Activities">{() => <Activities />}</Tab.Screen>
      <Tab.Screen name="Profile">
        {() => <Profile setUser={setUser} setUserCreds={setUserCreds} />}
      </Tab.Screen>
</Tab.Navigator>
0 Answers
Related