React Native Router Flux Tabbar not showing - react-native

I am trying to add a Tabbar to my project but it's not working. I only want the Tabbar to show in my homeScreen.js scene, and there I want a tabbar which will open up my discoverScreen.js, how would I go about changing my code to make this work?
render(){
return (
<Router>
<Scene key="root">
<Scene
key="tabbar"
tabs
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
<Scene key="Discover" title="Discover" icon={TabIcon}>
<Scene key="discoverScreen"
component={DiscoverScreen}
title="DiscoverScreen"
initial
/>
</Scene>
</Scene>
<Scene key="login"
component={LoginView}
title="Login"
direction="vertical"
hideNavBar
/>
<Scene key="register"
component={Register}
title="Register"
direction="vertical"
hideNavBar
/>
<Scene key="firstScreen"
component={FirstScreen}
title="FirstScreen"
direction="vertical"
hideNavBar
initial
/>
<Scene key="discoverScreen"
component={DiscoverScreen}
title="DiscoverScreen"
direction="vertical"
type="reset"
/>
<Scene key="loginScreen"
component={LoginScreen}
title="LoginScreen"
direction="vertical"
hideNavBar
/>
<Scene key="homeScreen"
component={HomeScreen}
title="HomeScreen"
/>
</Scene>
</Router>
);
}
}
Thankful for any help!

Related

Add top and bottom tabs using react native router flux

I want to add top and bottom tabs in my application using react native router flux. Now i am able to add either top or bottom tab.
I tried to use tabBarPosition={'top'} and tabBarPosition={'bottom'} for the same scene.
<Router>
<Scene key='root' headerMode={'none'}>
<Scene key='auth' headerMode={'none'}>
<Scene key='login' component={LoginForm} title="Please Login" initial />
</Scene>
<Scene
key='main'
headerMode={'screen'}
tabs
tabBarPosition={'bottom'}
tabBarStyle={{ color: '#FFFFFF' }}
>
<Scene
onLeft={() => Actions.profile()}
leftTitle='Profile'
onRight={() => Actions.events()}
rightTitle='Events'
key='home'
component={Home}
title='Home'
icon={TabIcon}
initial
/>
<Scene
key='profile'
rightTitle='Message'
component={Profile}
title='Profile'
icon={TabIcon}
/>
<Scene
key='events'
rightTitle='Message'
component={Events}
title='Events'
icon={TabIcon}
/>
</Scene>
</Scene>
</Router>
''''

React Native Router Flux props not passing through action

I'm trying to pass some data from my button
<Button
text="Explore"
elementStyles={secondaryButton}
onPress={() => Actions.dashboard({
demoMode: true,
})}
testID="button-explore"
/>
which is located in Example.js, to Dashboard.js
Here is my router stack located under App.js
<Stack key="root" hideNavBar>
<Scene key="splash" initial component={SplashScreen} />
....
<Scene key="example" component={example} />
....
<Tabs key="tabbar" hideNavBar tabBarPosition="bottom" showLabel={false} tabBarStyle={styles.tabBar} swipeEnabled={false} animationEnabled={false}>
<Scene key="dashboard" hideNavBar title="Dashboard" component={Dashboard} icon={TabBarItem} defaultIcon={Config.HOME_ICON_NAME} />
<Scene key="history" hideNavBar title="Stats" component={History} icon={TabBarItem} defaultIcon={Config.STATS_ICON_NAME} />
<Scene key="rewards" hideNavBar title="Points" component={Rewards} icon={TabBarItem} defaultIcon={Config.REWARDS_ICON_NAME} />
<Scene key="profile" hideNavBar title="Profile" component={Profile} icon={TabBarItem} defaultIcon={Config.PROFILE_ICON_NAME} />
</Tabs>
/>
</Stack>
When I call this.props.demoMode under dashboard I get undefined.
hi try to add _ befor the second screen key
onPress={() => Actions._dashboard({
demoMode: true,
})}
something like that but if it doesn't work remove your node module folder change the router flux version , npm i again and you will be fine

How to remove text under TabIcon in react-native-router-flux

i can't remove text under TabIcon in TabBar of react-native-router-flux. It is screen of my TabBar:
enter image description here
And it is my code of router:
const TabBar = ({focused}) => (
<View>
<Icon name="search" type="MaterialIcons" style={{fontSize: 28, color: focused ? 'red': 'white'}} />
</View>
)
export default () => (
<Router>
<Scene hideNavBar>
<Scene key="tabbar" tabs tabBarStyle={{backgroundColor: '#000'}}>
<Scene key="list" title="Ahlo" component={List} hideNavBar icon={TabBar} />
<Scene key="search" component={search} hideNavBar icon={TabBar} />
<Scene key="account" component={account} hideNavBar icon={TabBar} />
</Scene>
<Scene key="article" component={article} />
<Scene key="comment" component={comment} />
<Scene key="register" component={register} />
<Scene key="auth" component={auth} />
</Scene>
</Router>
)
In every tutorials i see that text under TabIcon is missing but i have it. What do i do wrong here?
You can try by adding the showLabel props to parent or particular child Scene to false, (By default its value is true)
So your tabbar Scene code will be like:
<Scene key="tabbar" showLabel={false} tabs tabBarStyle={{backgroundColor: "#000"}}>
<Scene key="list" component={List} showLabel={false} hideNavBar icon={TabBar} />
<Scene key="search" component={search} showLabel={false} hideNavBar icon={TabBar} />
<Scene key="account" component={account} showLabel={false} hideNavBar icon={TabBar} />
</Scene>
Hope this will help.

Unable to show Drawer and Tab Bar together using react-native-router-flux

I am using react-native with react-native-router-flux and I want to use both Drawer sidemenu and also tabbar. But it only shows the one I put on top. My code is below. If I put Drawer first then it only shows Drawer.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { Router, Scene, Stack, Tabs, Drawer } from 'react-native-router-flux';
import ScarletScreen from './component/ScarletScreen';
import ProfileScreen from './component/ProfileScreen';
import WhiteScreen from './component/WhiteScreen';
import BlackScreen from './component/BlackScreen';
import SideMenu from './component/SideMenu';
const TabIcon = ({ selected, title }) => { return (
<Text style={{color: selected ? 'red' :'black'}}>{title}</Text> ); }
export default class App extends React.Component { render() {
return (
<Router>
<Scene key="root" hideNavBar>
{/* Drawer and it's scenes */}
<Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
<Scene key="main">
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
initial
/>
<Scene
key="profile"
component={ProfileScreen}
title="Profile"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
<Scene
key="black"
component={BlackScreen}
title="Black Screen"
/>
</Scene>
</Drawer>
{/* Tab and it's scenes */}
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
</Scene>
{/* Tab and it's scenes */}
<Scene key="um" title="UM" icon={TabIcon}>
<Scene
key="white"
component={WhiteScreen}
title="White"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
</Scene>
</Router>
); } }
If I put tabbar first, then it shows the tabbar only and the hamburger menu icon is gone.
{/* Tab and it's scenes */}
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
</Scene>
{/* Tab and it's scenes */}
<Scene key="um" title="UM" icon={TabIcon}>
<Scene
key="white"
component={WhiteScreen}
title="White"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
{/* Drawer and it's scenes */}
<Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
<Scene key="main">
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
initial
/>
<Scene
key="profile"
component={ProfileScreen}
title="Profile"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
<Scene
key="black"
component={BlackScreen}
title="Black Screen"
/>
</Scene>
</Drawer>
I use create-react-native-app to create my react-native app

Navigation with modal and drawer

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.