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
Related
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 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.
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
This is a React Native project that includes React Navigation and Redux.
I have two scenes, the first one contains a ListView and a Button to add a new element to the list. This buttons navigates to a new Scene where I fill up a little form to create a new record that will appear on the list of the first scene.
When hitting the save button and going back to the first scene (list view), mapStateToProps reflects the change but no other life cycle method is called (componentWillReceiveProps, shouldComponentUpdate, etc), none of them.
Now, both Scenes use connect from redux and I'm going back from Scene 2 to Scene 1 with the goBack() method from React Navigation. I'm wondering if redux get's "disconnected" from a view when showing a new one and how can I connect it back? Again, the mapStateToProps from the ListView scene is showing the data updated but it seems no props are being mapped.
It just seem the props don't refresh if the redux state value hasn't really change. Copying the list array before modifying it and then assigning it to the payload seems to fix the issue.
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?