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.
Related
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. :)
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
How can I display the login page if the user is not authorized or a list of items?
I'm using react-native-router-flux
<Router>
<Scene key="user">
<Scene key="register1" component={RegisterStep1} title="register1"/>
<Scene key="register2" component={RegisterStep2} title="register2"/>
<Scene key="register3" component={RegisterStep3} title="register3"/>
<Scene key="login" component={Login} title="Login"/>
</Scene>
<Scene key="items" type={ActionConst.REPLACE}>
<Scene key="list" component={ItemList} title="Items list"/>
<Scene key="detail" component={ItemDetail} title="Item detail"/>
</Scene>
</Router>
is it right?
I should go to login Scene or items -> list Scene.
You can check if the user is authorized in the componentWillMount or componentDidMount lifecycle methods of your main component(The one that has the Router component) and call Actions.items() after everything goes well. Otherwise go to the login screen.
Also I recommend two things:
-Put your scenes inside a root scene as recommended by react-native-router-flux
-Set one of your screens as initial (with the prop of the scene: initial={true} so that the user can see something before your lifecycle method does its work.
I have the next React Native Router Flux Router code:
<Scene key="home" component={Modal}>
<Scene key="search">
<Scene key="unfiltered" component={Unfiltered} />
<Scene key="filtered" component={Filtered} />
</Scene>
<Scene key="menu">
<Scene key="menu1" component={Menu1} />
<Scene key="menu2" component={Menu2} />
</Scene>
<Scene key="calendar" component={Calendar} />
</Scene>
The problem is that when I call route Actions.menu() with two nested routes menu1 and menu2 from route search.unfiltered, nothing happens (for the first call I see action RNRF push and focus).
But if I call Actions.calendar() it's ok, as if I only call a menu1 within menu.
I also tried this solution:
<Scene key="menu1" component="menu1">
<Scene key="menu2" component="menu2" />
</Scene>
It works for menu1, but if I want to push to menu2 nothing happens.
How properly create modal that contains nested routes?
The answer is to move menu into "Search" scene, because the RNRF supports only one nested scene if the parent scene is Modal component.
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}