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
Related
I am using react native router flux in my react native application.
I created some scenes in Route.
<Router>
<Scene key="root" hideNavBar={true} navigationBarStyle={{ backgroundColor: '#81b71a' }}>
<Scene key="auth">
<Scene key="login" component={LoginForm} title="Please Login" />
</Scene>
<Scene key="main" navigationBarStyle={{ backgroundColor: '#8fff1f' }}>
<Scene
key="mainScene1"
component={EmployeeList}
title="MainScene1"
/>
<Scene key="mainScene2" component={EmployeeCreate} title="MainScene1" />
<Scene key="MainScene3" component={EmployeeEdit} title="Edit Employee" />
</Scene>
</Scene>
</Router>
I want to navigate from mainScene3 to mainScene1 but getting error "Error: There is no route defined for key mainScene1. Must be one of: 'auth','main' "
How to tackle this issue? These two scene are in the same bucket.
Another query - How to navigate from login scene of auth to any scene say mainScene2 ? Is there any special method for that?
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.
Component Init is hiding behind Navigation Bar after implementing Drawer to NavBar. Without Drawer I could easily add some paddingTop to Route (root) component and the problem would get solved.
<Router renderLeftButton={this.navBarButton}>
<Scene
key="drawer"
component={DrawerComponent}
open={false}
>
<Scene key="main" >
<Scene key="index" component={Init} title="First page!" />
<Scene key="counter" component={Counter} title="Counter" />
<Scene key="posts" component={Posts} title="Posts" />
</Scene>
</Scene>
</Router>
If I add paddingTop on root for global padding, it gives back extra padding on both Navbar and Coponent.
I do get the desired result by adding paddingTop to each children Scenes but that would be hectic. e.g.
<Scene key="index" component={Init} title="First page!" sceneStyle={{paddingTop: 64}} />
I have yet to see a solution that does not use any type of paddingTop to solve this issue. However, instead of adding the styles to each scene, you can add it to the Router that will apply to every scene.
<Router renderLeftButton={this.navBarButton} sceneStyle={{ paddingTop: 65 }}>
<Scene />
<Scene />
</Router>
this is my first question so pardon me If I make any mistakes.
I am trying to customise navbar icons for IOS using React native router flux but I don't know how to retrieve my custom made icons (png files) In some examples they use icon={tabIcon} like so but what I need to do is decribe a path for the image source but I don't know how to type it in the right syntax.
Any help would be appreciated. Thanks.
Here is my code:
<Scene key="root">
<Scene key="tabbar" tabs>
<Scene key="tab2" title="Categories" **icon={TabIcon}** >
<Scene key="categories" component={Categories} title="Categories" initial />
<Scene hideTabBar key="categorylisting" component={CategoryListing} title="Adventure" />
<Scene hideTabBar key="showdetails" component={ShowDetails} title="TV Show Details" />
</Scene>
It seems to be missing from the docs, but it's done like this.
function CustomIcon(props) {
return (
<View>
<Image
source={iconSource}
style={{ width: 22, height: 25 }}
tintColor={'red'}
/>
<Text>Tab1</Text>
</View>
);
}
<Scene key="tab1" icon={CustomIcon} >
</Scene>
I have a tabbar component rendered within which I want to wrap with a custom native module for a custom style behavior not available within react's css (linear opacity gradience.)
<Scene key="video" tabs={true} tabBarStyle={styles.tabBarStyle}>
<Scene key="profile" title="profile" component={MyProfile} icon={TabIcon} hideNavBar />
<Scene key="trend" title="trend" component={TrendMenuScene} icon={TabIcon} hideNavBar />
<Scene key="home" title="home" component={MainMenuScene} initial icon={TabIcon} hideNavBar />
<Scene key="star" title="star" component={Favourite} icon={TabIcon} hideNavBar />
<Scene key="discover" title="discover" component={Search} icon={TabIcon} hideNavBar />
</Scene>
My first attempt and thought would be to add a component attribute to the top level that wraps the scene component. inside that component might be something like.
return (
<LinearGradient key="gradientWrap" colors={['transparent', 'rgba(0, 0, 0, 0.5)']} style={styles.linearGradient}>
{this.props.children}
</LinearGradient>
)
this does not work and throws a error. I have tried cloning props but I wrap everything and the entire pages is wrapped in the linear gradient :/
So how to wrap just the tabbar in the linear gradient? Or more generally any wrapping component.