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.
Related
Is there any way to set the background image for the React native redux router flux scene.
<Router getSceneStyle={() => ({ backgroundColor: 'transparent' })}>
<Scene>
<Scene key="root" hideNavBar={true} initial={!this.props.isLoggedIn}>
<Scene key="login" component={Login} initial={true} />
<Scene key="signup" component={Signup} title="Register" />
</Scene>
<Scene key="app" hideNavBar={true} initial={this.props.isLoggedIn}>
<Scene key="home" component={Home} />
</Scene>
I have search but didn't found any solution to set the background image for the redux router flux any help will be appreciated
THanks in advance
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'm using react-native-router-flux for navigation in my react-native app.
I've got this in my router.js file --
render() {
return (
<Router navigationBarStyle={styles.navBar}
titleStyle={styles.navBarTitle}
>
<Scene key="modal" component={Modal}>
<Scene key="drawer" component={Drawer} open={false} type="replace">
<Scene key="home" component={Home} title="HOME" hideNavBar type="replace" />
<Scene key="myorder" component={MyOrder} title="MY ORDERS" type="replace" />
<Scene key="bookachef" component={BookAChef} title="BOOK A CHEF" type="replace" />
<Scene key="offers" component={Offers} title="OFFERS" type="replace" />
<Scene key="terms" component={Terms} title="TERMS & CONDITIONS" />
<Scene key="mywishlist" component={MyWishlist} title="WISHLIST" type="replace" />
<Scene key="myaddresses" component={MyAddresses} title="Addresses" type="replace" />
<Scene key="faq" component={FAQ} title="FAQ" type="replace" />
<Scene key="aboutus" component={AboutUs} title="About Us" type="replace" />
</Scene>
<Scene key="auth" initial>
<Scene key="login" panHandlers={null} component={Login} title="Login" hideNavBar={true} />
<Scene key="signup" panHandlers={null} component={SignUp} title="SignUp" hideNavBar={true} />
<Scene key="terms" panHandlers={null} component={Terms} title="TERMS & CONDITIONS" />
</Scene>
<Scene key="popUpImagePicker" panHandlers={null} component={PopUpImagePicker} title="PopUpImagePicker" hideNavBar={true} />
</Scene>
</Router>
);
}
Now, after login, I want to have the usual flow i.e. to open the app with the drawer. The problem is, I can open the "Home" screen by
Actions.drawer() .
But I cannot open the drawer even by Actions.refresh({key: "drawer", open: true}) or by sliding from the screen. What am I doing wrong, I cannot figure that out.
I'm using "react-native-router-flux": "^3.41.0"
To navigate to the home scene after the login, you can call Actions.drawer(), but before you have landed in any of the scenes within the drawer scene, the sliding from the screen would not work, because your Drawer component hasn't get mounted to the screen yet.
As for not be able to slide the drawer out, try removing the type="replace" props on your drawer scene.
As for calling Actions.refresh({ key: 'drawer', open: true }) is not bringing out the drawer component issue, make sure in your Drawer component, you are setting the open props, you can take a look at the RNRF's v3 drawer example, if you forgot to setting the open props, your Actions.refresh will update the navigationState but won't be able to control the open/close state of the drawer component.
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
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>