I'm using the StackNavigator from react-navigation and I'm trying to customize the navigation process.
On one screen, I have two buttons that both use the "navigate" function to redirect the user to the same screen (which is a scrollview). Is there any way to have one of the buttons scroll down to a different part of the screen after navigating?
Related
I am creating a React native application with the following scenario:
There is a navigation bar at the bottom of the screen, allowing the user to navigate between three main pages. On one of these pages, there is a backdrop with a container overlayed on it with two buttons. Each of these buttons should show open different "pages" in that container, and the navigation bar will be hidden when the user opens one of those "pages". An image is included below.
App layout example
My question is: how is this best implemented in react native?
My original idea was to implement a custom Stack Navigator with createStackNavigator. While this does work, I was wondering if this is a good way to go about it.
One result from using a custom navigator is that the navigation state in the container is also bound to the back button of the device (on Android). However, this is a welcome feature in this case as it makes sense in the navigation flow.
Is there a way to prevent the drawer from closing when a navigation link is clicked in React Navigation? I want the user to be able to click a link in the navigation drawer, see that the screen has changed in the background (& if they swipe away from the drawer, they see the new screen), however the drawer does not close unless they manually swipe away.
I have five screens in a material bottom tab navigator. On one of the screens, I want to use a drawer for some settings. In the other screens there are currently no drawers planned, however if they come, they will have different content from this current one.
I want the drawer to be displayed above the bottom navigation bar. However I don't want to solve it by wrapping the whole material bottom tab navigator in a drawer navigator, as this would not make much sense and also provide the same drawer in all of the screens.
Is there another way of making the drawer appear on top of the bottom navigation bar? Ideally, the solution would not include react-navigation for the drawer at all, as I don't use it for navigation.
The answer appears to be to use a Modal, which can server as a popup. https://reactnative.dev/docs/modal for the documentation.
I am using react navigation and would like to show the modal that will be visible above the screen and be able to navigate to the next screens in StackNavigator. The illustration below shows what I want to achieve
The solution that is in the documentation (https://reactnavigation.org/docs/modal/) solves only part of the problem, because I can't open a modal and navigate another part of the stack while keeping the modal on top
you can use react native modal . it is not part of react navigation and it will show above all screens
I'm using ReactNavigation with a StackNavigator for my screens. From time to time, I need to push a modal screen which the user cannot hit "Back" for. It should also transition from bottom to top (similar to native modal controllers in iOS). I'm not sure how to use the navigate method to do so.
I am not familiar with ReactNavigation (although it looks nice, I'll take a look), but ReactNative already has a Modal component that does what you want (bottom top is the slide animation that has by default: Modal