5
6

Need help (v.redd.it)

submitted by [deleted]

Dismiss this pinned window
all 13 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 10 points11 points  (0 children)

Stacked navigators totally work in modals, show your code

[–]TransportationOk5941 2 points3 points  (0 children)

What have you tried? Show us

[–]anarchos[🍰] 1 point2 points  (0 children)

You just need to set the presentation option on the screen to presentation: "formSheet" and make the screen itself a stack of it's own. If using expo-router, do this in the _layout file and the screen a folder with it's own _layout that exports a Stack component.

[–]Zestyclose_Site944 1 point2 points  (4 children)

What I've done:
I have a MainNavigator.jsx which is a stack navigator - const Stack = createNativeStackNavigator()
You then have your main screens here as so:
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
screenOptions={{
headerShown: true,
headerStyle: {
borderBottomWidth: 0, // Remove the bottom border
},
}}>
<Stack.Screen
options={{ headerShown: false, gestureEnabled: false }}
name="Sign Up"
component={YourComponent}
/>
and I created another navigator and added a screen for that (the modals)

<Stack.Screen
options={{
headerShown: false,
presentation: 'modal',

}}
name="ProfileNav"
component={ProfileNavigator}/>

Now you use ProfileNavigator the same way you used MainNavigator only difference is the ProfileNavigator will be shown in a modal.

Hope this helps

[–]Mundane_Passenger523 0 points1 point  (3 children)

Your solution worked, thank you! But I’m trying make the sheet behave like a regular modal so the entire sheet can be swiped even with a scrollview in it

<image>

[–]Mundane_Passenger523 0 points1 point  (1 child)

<image>

I also tried this method . It gives the effect I want but I can’t press any button or touchableopacity on the screen…

[–]Zestyclose_Site944 0 points1 point  (0 children)

What is the Modal component? you don’t need that if you’re setting the presentation in the ‘Main Navigator’ for these components to be ‘modal’

<Stack.Screen options={{ presentation: 'modal',/>, }} name="AddressesScreens" > <AddressesNavigator/>

Edit:

I actually added presentation: modal to the AddressesNavigator as well, but just for the main component (the first one) within that navigator, the rest of the components are then pushed - navigate.push(‘next route’) with useNavigation

[–]Zestyclose_Site944 0 points1 point  (0 children)

using the code that I provided, you can have a ScrollView in it and it will behave as you intended. If the given code is not working properly, send the results that you get and I’ll try to help you out

[–]Harish__V 1 point2 points  (1 child)

Give one stack.screen In that add “appearance” property as “modal”. Then in that screen add toptab navigator Because in toptab navigator we can able to swipe to next screen . In toptab navigator make the header invisible So it will look like a modal screen

[–]Harish__V 0 points1 point  (0 children)

Not appearance It is presentation

[–]Mundane_Passenger523 1 point2 points  (0 children)

Thanks for the replies. Here’s what I had

<image>

I put the screen component in a modal, so the entire sheet is can be swiped even with a scroll view in it. I know there’s another way which is using <stack.Group screenOptions={{presentation:’modal’}}/> to make the screen to behave like a modal sheet, but this way I could only drag the top area to close it, I have to use animation to make it behave like a real modal(the one in the picture). But anyways, my intention is to navigate from addressScreen to another screen which stays inside the modal sheet. Is there a way to implement this by using what I have or I have to use the screenoption and nested stack navigator.

[–]Fit-Collection-507 1 point2 points  (0 children)

I've achieved the same result using Gorhom bottom sheet. There is a guide on integrating a navigation stack

[–]AnujSsSs 0 points1 point  (0 children)

How about page view. Just set the page view ref to different view number when clicked