Lets suppose, in an app there is ViewProfile Component, we open this Component and we see list of users who like this opened profile. We click one AnotherUser34 (With same ViewProfile Component) and see his profile and users who like him, and again we click/open 91AnotherUser from there, and we open 10 more profiles and so on. How to achive back functionality for each this? When I press back on ViewProfile Component, it goes back to Tabbar Component. I want it to go back similar way components are opened.
I want to have Instagram like back functionality.
Please suggest, a small hint will do the job, Thanks.
Below is my the Scene structure ( Specifically : https://github.com/bartonhammond/snowflake/blob/master/src/snowflake.js )
<Router>
<Scene key='root' hideNavBar>
<Scene key='login'/>
<Scene key='register'/>
<Scene key='Tabbar'>
<Scene key='Main'>
<Scene key='ViewProfile'/>
</Scene>
<Scene key='Nav2'/>
<Scene key='NavMenu3'/>
<Scene key='NavMenu4'/>
</Scene>
</Router>
It is exact use case for 'clone' scenes.
From
https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md:
Scenes marked with clone will be treated as templates and cloned into the current scene's parent when pushed. See example.
I believe you can achieve this using Type "push" functionality.
What this does, is when you call Actions.ViewProfile(), it add's to the navigation stack.
I'm not 100% sure, and I can't test it right now. But I think it will work.
You can check the docs here. (Go to Scene in docs.)
<Router>
<Scene key='root' hideNavBar>
<Scene key='login'/>
<Scene key='register'/>
<Scene key='Tabbar'>
<Scene key='Main'>
<Scene key='ViewProfile' type="push"/>
</Scene>
<Scene key='Nav2'/>
<Scene key='NavMenu3'/>
<Scene key='NavMenu4'/>
</Scene>
</Router>
If you want programmatically:
Actions.ViewProfile({type: 'push'});
Related
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 am trying to understand how to use router-flux and have multiple scenes/sub scenes similar to having multiple story boards, so that I can have a scene for the user sign up process, and then a scene for once the user is sign up and logged in.
At present I am doing this but it isn't given me the desired result
class NavigationRouter extends Component {
render () {
return (
<Router>
<Scene key='drawer' component={NavigationDrawer} open={false}>
<Scene key='root' tabs={true}>
<Scene key='account' hideNavBar={true} >
<Scene initial key='Login' component={Login} title='Login' />
<Scene key='SignUp' component={SignUp} title='SignUp' />
<Scene key='Account' component={Account} title='Account' />
<Scene key='Venue' component={Venue} title='Venue' />
</Scene>
<Scene key='auth' renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
<Scene key='MenuItems' component={MenuItems} title='Your Menu' />
<Scene key='Orders' component={Orders} title='Orders' />
</Scene>
</Scene>
</Scene>
</Router>
)
}
}
The first part of the login/signup journey should not display the nav bar and allow the user to go back to the past step.
The second part should allow the logged in user to access the nav bar and side draw for the items which are defined in it
Even though grouping scenes with another scene looks more readable and correct, it makes Action not to work as expected, since Actions.SCENE() can only navigate within its siblings. In other words, two scenes should have the same parent.
Here's a modified version of your navigator tree. For example, you can start with Login scene, and route directly to tab1 by calling Actions.tabbar(). In your tabbar scene, there will be two subcomponents. User can manually navigate between tabs, or you can again call Actions.tab2(), since they're siblings too.
I prefer putting every scene sibling to another since it takes two chained actions. It looks a bit messy, but using spaces and comments help.
class NavigationRouter extends Component {
render () {
return (
<Router>
<Scene key='drawer' component={NavigationDrawer} open={false}>
<Scene key='root'>
{/* Authentications */}
<Scene initial key='Login' component={Login} title='Login' />
<Scene key='SignUp' component={SignUp} title='SignUp' />
<Scene key='Account' component={Account} title='Account' />
{/* Main */}
<Scene key='Venue' component={Venue} title='Venue' />
{/* Tabs... */}
<Scene key='tabbar' tabs={true} renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
<Scene icon={Icon1} key='tab1' component={MenuItems} title='Your Menu' />
<Scene icon={Icon2} key='tab2' component={Orders} title='Orders' />
</Scene>
</Scene>
</Scene>
</Router>
)
}
}
If you want to jump directly to the sub-scene of a sibling, say tabbar1, combine two actions:
Actions.callback({key:'tabbar',type:'push'});
Actions.callback({key:'tab1',type:'jump'});
The ugliest part of the tree above is styling multiple scenes at once. Such as removing navbar from 5 siblings. And there you can define an object of props and add them into corresponding sub-scenes {...customProps}
Better way of organizing: Split your scenes to smaller parts if needed.
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'm making simpe application using react-native, and its third party module react-native-router-flux for easy handling component navigator.
I want to add header component above tabs which showing my app name, and selected tab name. I tried several ways but I don't know where to put the header component code.
My top component code like this
<Router>
<Scene key="root">
<Scene key="todoList" tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
<Scene key="first" title="First" icon={TabIcon}>
<Scene key="scarlet" component={TabComponent1} hideNavBar title="tab1" initial />
</Scene>
<Scene key="second" title="Second" icon={TabIcon}>
<Scene key="scarlet2" component={TabComponent2} hideNavBar title="tab2" initial />
</Scene>
<Scene key="third" title="Third" icon={TabIcon}>
<Scene key="scarlet3" component={TabComponent3} hideNavBar title="tab3" initial />
</Scene>
</Scene>
</Scene>
</Router>
This actually look like
What I want to do is simply add header component above tabs, like
How to do that? Please give me a hint! where I put that code?
If you want to use your own Header component, I think you should write one for yourself in a separate file and export/import it to the screens. The react-native itself is rendering the components one after the other in order (from up to the bottom). So if you are doing it this way you should place your imported Header component on the top inside the render() function.
The other way is using a third party module like the native-base (which has a Header component already definied).
https://github.com/GeekyAnts/NativeBase
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.