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
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'm trying to create a dynamic drawer in react-native-router-flux.
I Mean when I changed the Scenes drawer can detect which scene in now activated and can update itself by new data.
I have a Component in my drawer that calls in App.js
<Drawer
key={'drawer'}
contentComponent = {() => <DrawerLayout language={this.state.language} />}
drawerPosition= {this.state.rightOrLeft}
<Stack key={'root'} hideNavBar>
<Scene key={'splash'} component={Splash} initial/>
<Scene key={'login'} component={Login} />
<Scene key={'home'} component={Home} />
<Scene key={'about'} component={About} />
</Stack>
</Drawer>
I wish I could explain my dream correctly !!!
If you are using redux you can retain state and fetch the current scene from store and play around with it.
If you are not using redux, you can still get to do it without it. One option is to do the following:
use contentComponent in DrawerNavigator and fetch the content from a separate js file.
contentComponent: props => <SideBar {...props} />
Now you need global variable declare in App.js name as currentScene and set your home page as default.
Now lets join all in sideBar.js, on click of every menu item change the global variable value to the selected menu.
Based on the value of current scene in SideBar.js change menuItems List.
One good example is react native base kitchen sink example app. Read the code in it follow the four steps once you are familiarise with it and you will be done.
https://github.com/GeekyAnts/NativeBase-KitchenSink
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 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 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}