In React Native using react-native-router-flux, when I try to hide the nav bar all the components disappear.
Here is my code :
<Router>
<Stack key="root" >
<Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
<Scene key="signup" component={Signup} title="Signup" />
</Stack>
</Router>
I tried other alternative solutions but still have the same problem.
Here is how it looks without using the hideNavBar property.
after looking through your snack, i realise that the parent <View /> component under App.js seem to be causing the issue without any error flags. by removing it, the components have reappeared. i would suggest that you add the css styling to each Scene separately, which would also give you granular control. or you probably have to rework your components in order to have a base styling theme. this is the updated snack.
using ^4.2.0 of react-native-router-flux, i am able to replicate your above example without any issue of components disappearing upon setting hideNavBar prop to true. as i do not have the code to your components, i am using a basic View with a Button for navigating between the stack's scenes.
i have included a snack here so that you can take a look and see what went wrong. :)
Related
I tried to use drawer on my project where I use NativeBase and react-native-router in it. Everything works except that the button inside header is not functional(I can't tap this certain button). This issue only happen if I wrap my Main Page inside <Scene key="draw">, here is my code:
App.js
<Scene key="draw" component={SideMenu} open={false} hideNavBar={true}>
<Scene key='main' component={Home} hideNavBar={true}/>
</Scene>
Header on main
<Left>
<Button transparent onPress={()=>Alert.alert("burger tapped")}>
<Icon name='menu' />
</Button>
</Left>
My purpose is when I tap the button, it will open the drawer but the button is not functional at all when I do the code like above example. How can I fix this?
The common workaround is to put header component from nativebase into each container component(screen). This approach even implemented into their boilerplate for the Ignite.
The other way is to to push custom NavBar as a prop to the scene component. Modify the built-in NavBar to use nativebase components instead of the default:
import CustomNavBar from './CustomNavBar';
import Main from './Components/Main';
<Router>
<Scene
component={Main}
key="main"
type={ActionConst.RESET}
navBar={CustomNavBar}
/>
</Router>
Good luck!
NativeBase showcases this with its NativeBase-KitchenSink
This should answer your question
I'm using react-native-tab-view as my main app container in which I have different components and nested tabs as well. However I wanted to use react-native-router-flux for navigation. I currently have the setup like so:
<Router>
<Scene key='root'>
<Scene hideNavBar key='home' component={ReactNativeTabViewContainer}
tabs ={true} initial={true} />
</Scene>
</Router>
But Right now the react-native-router-flux only sees a single route. How can I track the nav changes inside the React-native-tab-view and add those nav state to the main route state stored in redux.
I'm using react-native-router-flux.
I'm aware one can show/hide the navbar per scene by using hideNavbar on the respective scene like so:
const scenes = Actions.create(
<Scene key="root">
<Scene key="main" component={mainComponent} initial={true} hideNavBar={true}/>
<Scene key="secondary" component={secondaryComponent} hideNavBar={false} />
</Scene>
);
I need to toggle the navbar on/off dynamically depending on the state of the current Scene.
The readme says:
Highly Customizable Navigation Bar - Show/hide the navbar depending on Scene or even the state of a Scene (e.g. Edit/Save navbar for edit mode).
I didn't find any detailed instructions for that though. Can anyone please advise or provide a link to an example?
Thank you!
From the Readme:
Actions.refresh(PARAMS) will update the properties of the current
screen.
To update mounted scene programmatically, you can simply do:
Actions.refresh({key: 'yourSceneKey', hideNavBar: true});
Feel free to put any other props there, for example you can also change the title of your scene with this refresh function.
I have an app with two tabs: Tab1 and Tab2. There are two scenes: scene1 and scene2 as part of my Tab1 group, where scene1 is the initial view. If I navigate to scene2, then press Tab2, then go back to Tab1, it automatically pops scene2 from Tab1 and goes back to scene1 instead of staying on scene2, which is not the behavior I want.
So my question: is there a way in react-native-router-flux where I can prevent the views popping to the root when I press the tab bar item? Ideally it would only pop to the root view when I'm already viewing a view within the same tab bar item. So in the example above, when I press Tab1 the first time it stays on previous existing view, but if I press it again then it pops to the root.
EDIT: including my code
<Scene key="root">
<Scene key="tabbar" tabs tabBarStyle={{ backgroundColor: '#FFFFFF' }} >
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene key="scarlet" component={ScarletScreen} title="Scarlet" initial />
<Scene key="gray" component={GrayScreen} title="Gray" />
</Scene>
<Scene key="um" title="UM" icon={TabIcon}>
<Scene key="blue" component={BlueScreen} title="Blue" initial />
<Scene key="maize" component={MaizeScreen} title="Maize" />
</Scene>
</Scene>
</Scene>
Thanks to #Rob for helping me figure this out... If anyone else is experiencing this issue, just tested it in on the previous version 3.37.0 and that fixed the issue (I was using 3.38.0). However, 3.37.0 has the issue mentioned on here where tapping a tab while you're already viewing it doesn't pop back to default scene. It appears that by attempting to resolve that issue in version 3.38.0 it caused the above issue I posted about. So I guess you for now you have to decide which is the least objectionable, but hopefully they'll address both cases in later versions...
I am using React Native Router Flux (https://github.com/aksonov/react-native-router-flux) for the routing in my React Native app.
I would like to hide the navigation bar for some views, but not for others. Is there an easy way to do this?
Yes, there are some ways to do that.
Say for example you have two scenes and you want to hide the navbar when matching a scene.
according to the RNRF docs you can use hideNavBar property under Navigation Bar
https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md
basic the code example will look like this
<Scene key="app">
<Scene key="sceneOne" component={ComponentOne} title="SceneOne" />
<Scene key="sceneTwo" hideNavBar={true} component={ComponentTwo} title="SceneTwo" />
</Scene>
Notice that on "SceneTwo" we use hideNavBar={true}