I just created a custom BottomTabBar and I have some shared components where I would like to hide the tab bar while the component is active.
My question is how do I send the component state to the tab bar?
Here is my Navigator
export default (LoggedInTabNavigator = createBottomTabNavigator(
{
Explore: {
screen: Explore,
navigationOptions: {
tabBarIcon: CustomTabBarIcon("layers", 32)
}
},
SavedTab: {
screen: SavedTab,
navigationOptions: {
tabBarIcon: CustomTabBarIcon("heart", 32)
}
},
AddPost: {
screen: AddPost,
navigationOptions: {
tabBarIcon: CustomTabBarIcon("plus", 32)
}
},
Chat: {
screen: Chat,
navigationOptions: {
tabBarIcon: CustomTabBarIcon("email", 32)
}
},
More: {
screen: More,
navigationOptions: {
tabBarIcon: CustomTabBarIcon("dots-horizontal", 32)
}
}
},
{
tabBarComponent: props => <BottomTabBar {...props} />
},
{
tabBarOptions: {
labelStyle: {
marginBottom: 5
},
activeTintColor: colors.white,
showLabel: false,
style: {
backgroundColor: colors.dark
}
},
tabBarPosition: "bottom"
}
));
Now I would like to send the component state isVisible to tabBarComponent something like
onPress={() =>
this.setState({
isVisible: true
})
}
I know that I can send props to screen like this.props.navigation.navigate('Screen', {isVisible}) but this works only if I go on another page
what about using ScreenProps would this work
import LoggedInTabNavigator from './LoggedInTabNavigator';
<LoggedInTabNavigator screenProps={{ isVisible: this.state.isVisible}} />
you can then access this from
this.props.screenProps.isVisible
Related
I have a bottomTabNavigator with some groups of screens:
{
Home: {
screen: Home,
navigationOptions: {
tabBarTestID: 'homeMenuButton',
tabBarIcon: TabItem('home'),
},
},
Beneficios: {
screen: AdvantageClub,
navigationOptions: {
tabBarTestID: 'beneficiosMenuButton',
tabBarIcon: TabItem('loyalty'),
tabBarLabel: 'Benefícios',
},
},
Repom: {
screen: RepomScreen,
navigationOptions: {
tabBarTestID: 'saldoMenuButton',
tabBarIcon: TabItem('attach-money'),
tabBarLabel: 'Saldo',
},
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarTestID: 'profileMenuButton',
tabBarIcon: TabItem('person'),
tabBarLabel: 'Perfil',
},
},
},
{
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: colors.blue.primary,
inactiveTintColor: colors.blue.secondary,
style: {
height: 64,
borderTopWidth: 0,
paddingVertical: 0,
},
tabStyle: {
paddingVertical: 8,
},
},
},
);
Inside of "Beneficios" (screen: AdvantageClub) i have one StackNavigator:
const AdvantageClub = createStackNavigator(
{
WebView: AdvantageClubScreen,
AdvantageClubSignUp: AdvantageClubSignUpScreen,
AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
AdvantageClubTerms: AdvantageClubTermsScreen,
},
{
initialRouteName: 'AdvantageClubSignUp',
...noHeader,
},
);
I need to open this WebView (AdvantageClubScreen) out of my bottomTabNavigator, like a new window. When i use navigator.navigate('WebView') the bottom menu keeps on screen.
What version of react-navigation are you using ?
I guess it's the V4, then in your nested StackNavigator "AdvantageClub" you can use tabBarVisible property in navigationOptions with something like this :
AdvantageClub.navigationOptions = ({navigation}) => {
const routes = navigation.state.routes;
const tabBarVisible = routes[routes.length -1].routeName === 'WebView'
return {tabBarVisible};
};
For calling a stackNavigator we use props.navigation.navigate('home').
But how to call for alert when i clicked on a bottom tab navigation icon.
You can use tabBarOnPress in navigationOptions as below
CreatePostt: {
screen: createStackNavigator(
{
CreatePost: {
screen: CreatePost,
navigationOptions: {
// header: null
}
},
PostExpanded: {
screen: PostExpanded,
navigationOptions: {
title: "Upload Post",
headerStyle: {
elevation: 1
},
}
},
},
{
defaultNavigationOptions: {
headerTitleStyle: {
fontWeight: "bold"
}
}
}
),
navigationOptions: {
tabBarOptions: {
showIcon: true,
showLabel: false
},
tabBarVisible: false,
labelStyle: { margin: 0, padding: 0 },
title: "",
tabBarIcon: ({ focused }) => <BtnPost style={{ marginTop: 15 }} />,
tabBarOnPress: ({ navigation, defaultHandler }) => {
}
}
},
thanks.. it is working.....
const AlertStack = createStackNavigator(
{
Alert: AlertScreen
},
);
AlertStack.navigationOptions = {
tabBarOnPress: () => {
alert('Hello');
},
};
I want to use react navigation in react native project but when I use this code in header it shows some back button in every screen and when I click on this it goes back to the splash screen. How to use react navigation with check first splash and then go to stack home and show back button in any screen.its very confuse me.
const TabNav=createBottomTabNavigator({
Notification:{
screen:Notif,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-notifications'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
Home:{
screen:Home3,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<Image style={{ width: 40, height: 40,marginTop:'20%' }} source={Home}/>
);
}
})
},
User:{
screen:ProfileScreen,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-person'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
},
{
initialRouteName:"Home"
},{
header: null,
headerMode: 'none',
}
)
const StackHome = createStackNavigator({
Tabs:{
screen:TabNav
},
CardView:{
screen:CardView,
},
Thumb:{
screen:Thumb,
}, Item:{
screen:Item,
}, Product:{
screen:ProductScreen,
}, Festivals:{
screen:Festivals,
} , Review:{
screen:Review,
} , Movie:{
screen:Movie,
} , Naghd:{
screen:Naghd,
} , Advertisment:{
screen:Advertisment,
} , Advertis:{
screen:Advertis,
}, CreateAd:{
screen:CreateAd,
}, Insta:{
screen:Insta,
}, Test:{
screen:Test,
}, ForoshRah:{
screen:ForoshRah,
}, Home2:{
screen:Home2,
}, Login:{
screen:Login,
}, Elan:{
screen:Elan,
}, Sabtenam:{
screen:Sabtenam,
}, sponser:{
screen:sponsor,
},Splash:{
screen:Spalsh
},Products:{
screen:Products
},
initialRouteName : 'Home',
},{
headerMode:'none',
navigationOptions: {
header: (props) => <ImageHeader {...props} />,
}
}
)
const RootNav = createStackNavigator({
StackHome:{
screen:StackHome
},
Splash:{
screen:Spalsh
},Login:{
screen:Login
},
},{
initialRouteName : 'Splash',
header: null,
});
You can use SwitchNavigator of React Navigation. As the SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away.
Kindly refer this https://reactnavigation.org/docs/en/switch-navigator.html
Remove the **Splash** Screen from your **StackHome** StackNavigator
Alter your **RootNav** with Switch Navigator like below
// Uses SwitchNavigator
const RootNav = createSwitchNavigator({
StackHome:{
screen: StackHome
},
Splash:{
screen: Splash
},Login:{
screen: Login
},
},{
initialRouteName : 'Splash'
});
Your StackHome consist of some stack navigators screens, you can set the navigation options from there itself to set the image in the header. You can set like below.
const StackHome = createStackNavigator({
CardView:{
screen: CardView,
navigationOptions: ({ navigation }) => ({
headerTitleStyle: { flex: 1, fontWeight: 'normal', fontSize: 15, color: '#FFFFFF', fontFamily: 'DroidSans-Bold' },
headerTintColor: "#2662b2",
headerStyle: {
backgroundColor: "#05BFFF",
},
headerRight:(<View><NotificationComponent navigation={navigation}/></View>)
})
},
Thumb:{
screen: Thumb,
}, Item:{
screen: Item,
}
});
I initially had this routing set up below with a tabNagivator and I was navigating to the 'Home' route and passing parameters using:
this.props.navigation.navigate('Home',{station:e,code:f,filter:'',filterName:'',offset:0});
Routing:
const PrimaryNav = TabNavigator({
Home: {
screen: LaunchScreen,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
},
Map: {
screen: MapScreen,
navigationOptions: {
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/locationTab.png')
}
style = {
[styles.icon]
}
/>
),
},
},
}, {
headerMode: 'none',
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: '#ffffff',
indicatorStyle: {
borderBottomColor: '#33b2f4',
borderBottomWidth: 3,
},
style: {
backgroundColor: '#000', // Makes Android tab bar white instead of standard blue
paddingTop: 5,
}
},
});
What I now want to do is replace 'LaunchScreen' in Home route with a stackNavigator but I don't know how to now pass the parameters to the stackNavigator down to the 'LaunchScreen':
const FeedStack = StackNavigator({
Launch: {
screen: LaunchScreen,
navigationOptions: {
header: null,
},
},
Tweets: {
screen: TweetScreen,
navigationOptions: {
title: 'Service Tweets',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#000'
},
},
},
}, {
initialRouteName: 'Launch',
}
);
const PrimaryNav = TabNavigator({
Home: {
screen: FeedStack,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
}...
I solved this by navigating to the route and storing the parameters in my mobX store bypassing the navigation parameters altogether.
i am switching from react navigator to react-navigation and i am actually fine with this approach, but struggeling with one issue.
I want to use a drawer navigation and a bottom aligned Tab-Navigation.
This part is working as expected - no issues here.
I want to have the tabbed navigation fixed with 3 Buttons that will have the same action all over the app. ( eg. dashboard / search / favourites )
From Dashboard you can navigate one level deeper. As i am doing it now, the Label of the Tab formerly "Dashboard" changes to the Name of the navigated-to Item.
to clarify, i added a stack-navigation in the Dashboard-Screen-Tab, so the user can navigate through that pages.
How can i prevent the tabs' labes and actions to change while navigating within the tabs' stack?
Basically i want a fixed Tab Navigation on each screen.
Should i create a fixed View-Component to achieve that?
Here is my setup:
App.js
const MetaTabNavigator = TabNavigator({
Dashboard: {
screen: MachineNavigator
},
Search: { screen: SearchScreen },
Favourites: { screen: FavouritesScreen },
},
{
tabBarPosition: Platform.OS === "ios" ? 'bottom' : 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: STYLES.HIGHLIGHT_COLOR
},
swipeEnabled: false,
backBehavior: 'none'
});
const MetaDrawerNavigator = DrawerNavigator({
Home: {
screen: MetaTabNavigator,
navigationOptions: {
drawer: {
label: 'Drawer',
icon: ({ tintColor }) => <Icon name="rocket" size={24} />
},
},
}
},
{
contentComponent: props => <Menu {...props} />
}
);
AppRegistry.registerComponent('myApp', () => MetaDrawerNavigator);
MachineNavigator
const MachineNavigator = StackNavigator({
Main: {
screen: MachineOverview,
navigationOptions: ({ navigation }) => ({
title: "Dashboard",
headerLeft: (
<TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
<IOSIcon name="ios-menu" size={30} />
</TouchableOpacity>
),
headerStyle: { paddingRight: 10, paddingLeft: 10 }
})
},
Category: {
screen: Category,
navigationOptions: (props) => ({
title: "Kategorie",
})
},
ItemDetail: {
screen: ItemDetail,
navigationOptions: (props) => ({
title: "Video",
})
}
})
export default MachineNavigator;
According to this issue, you can add to the tab configuration the tabBarLabel property to control the label:
const MetaTabNavigator = TabNavigator({
Dashboard: {
screen: MachineNavigator, navigationOptions: {tabBarLabel: 'Dashboard'}
},
...