I'm using React Navigation (https://reactnavigation.org) to handle navigation in my React Native app. The app structure consists of a StackNavigator with a bunch of nested menus. All the menus use the same MenuScreen component.
When I navigate through 2+ menus, then press the back button, the navigation bar title doesn't change back. It gets stuck on the title set by the "furthest" menu reached.
This makes sense, since I set the static navigationOptions property in the constructor of each successive MenuScreen, but never change it back. What is the best practice for fixing this?
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.
I made a screen component in my project with react native. And I'm using react navigation's material top tab navigator as a swiper. It's a questionable decision but whatever :)
Just imagine you making a screen and, at top you have a image and at bottom you have the top tab navigator as a swiper. It's actually working fine but, everytime when i switch the tabs in the component it's re-rendering the entire component.
And of course this is fires the componentDidMounts for the child components, which causes to make requests over and over.
Is there a way to avoid this?
I'm using React Native Router Flux and have a bottom tab bar. I have a screen set up with a lot of links to other screens on it. If the parent scene isn't added to the tabs, I'm unable to route to it.
I've looked through the documentation and tried various options and styling. I think the easiest option would be to apply a width of 0 to that particular scene group, but it isn't available with View styles.
I want to be able to hide the parent scene so it isn't showing in the tab bar. At the moment, nothing is changing and the item is showing in the tab bar.
Figured it out. The problem was that I had the child scenes nested within a parent scene. When I removed them from the parent and outside of the tabs, it worked perfectly.
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.
Im trying to build a mobile app where we have a constant header bar throughout the app. I have the body where I have buttons.. Each button navigates to a screen. I need the header bar in every screen but I dont wish to repeat the code in all screens. I dont intend to use TabNavigator either. Is there any alternative??
in image1 and image 2 the bar with the search,cart and offerzone tag remains same. The rest changes..I need this behaviour without repeating the header code in both screens.
You can separate the code of headerBar into a independent component, and use redux store to manage this component's props.
After you do this, you just need to import the component in each screen, the component will get its props from redux store automatically. Each screen can contact headerBar with redux actions