I use a bottom tabs navigator imported from 'react-navigation-tabs'
import { createBottomTabNavigator } from 'react-navigation-tabs';
const AppNavigator = createBottomTabNavigator({
Homepage: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
} , {
initialRouteName:"Screen1"
});
Screen 1 is a stack navigator
const AppNavigator = createStackNavigator({
Homepage: {
screen: Screen1,
},
Screen2: {
screen: Screen2
}
} , {
initialRouteName : "Homepage",
headerMode:"none",
navigationOptions: ({ navigation }) => ({
tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
})
});
After some researches , I found the below solution , but not works
navigationOptions: ({ navigation }) => ({
tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
})
It's a bad news because even to hide it from all screens , the below code also did not work
navigationOptions: ({ navigation }) => ({
tabBarVisible: false
})
the tabs always visible , after much researches and trying tens of solutions
Try this:
Screen1.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
let routeName = navigation.state.routes[navigation.state.index].routeName
if ( routeName == 'ScreenX' ) {
tabBarVisible = false
}
return {
tabBarVisible,
}
}
Related
I want to get the default HeaderTitle and update it as per my component.
Header Title is added in MainTabNavigator as
const navOptions = ({ navigation }) => {
return {
headerTitle: (
<Image source={require("../assets/images/common/logo.png")}/>
),
};
};
const HomeStack = createStackNavigator(
{
Home: {
screen: Dashboard
}
},
{
initialRouteName: "Home",
defaultNavigationOptions: navOptions
},
);
I want to toggle between headerTitle on some events please suggest me the solution as I want to keep the headerTitle only on one location and toggle between it as per required.
static navigationOptions = ({ navigation }) => ({
header: QueryTocheck ? keepDefaultOldHeaderHere:updateHeaderHere
});
I have been having some problems passing parameters from a screen in a switchNavigator to another in a TabNavigator
setvalue(response){
this.setState({profile :response})
console.warn(this.state.profile);
this.state.navigate('Navigators',{profile: profile})
}
The profile contains a JSON object of profile details. The navigation sends the date to the 'Navigators' screen which is just a TabNavigator
const Navigators = createAppContainer(Userstack);
export default RootStack = createSwitchNavigator(
{
Home: {
screen: Login
},
Register: {
screen: Registration
},
Navigators: {
screen: Navigators
},
},
{
initialRouteName: 'Home'
}
);
How the TabNavigator is created.
export default Userstack = createBottomTabNavigator(
{
User: {
screen: Profile
},
Discovery: {
screen: DiscoveryNavigator
},
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'User') {
iconName = `md-contact`;
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Discovery') {
iconName = `md-search`;
}
return <IconComponent name={iconName} size={27} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#00FA9A',
inactiveTintColor: 'black',
},
}
);
The screen I wish to access the profile information is
export default class Profile extends Component {
constructor(props){
super(props);
console.warn(props)
this.State = {
profile: this.props.navigation.params.profile
}
}
Did you try this.props.navigation.state.params?
According to Reference: https://reactnavigation.org/docs/params.html,
You can also directly access the params object with this.props.navigation.state.params. This may be null if no params were supplied, and so it's usually easier to just use getParam so you don't have to deal with that case.
I'm using react-navigation.
I'm using createStackNavigator inside createBottomTabNavigator.
I want to hide tab bar for SignInScreen that is inside AccountTab but it's not working.
export default createBottomTabNavigator({
HomeTab: { screen: createStackNavigator ({
HomeTabScreen : { screen:HomeTabScreen },
ProductScreen : { screen:ProductScreen },
}),
initialRouteName: 'HomeTabScreen',
},
AccountTab: { screen: createStackNavigator ({
AccountTabScreen : { screen:AccountTabScreen },
RegisterScreen : { screen:RegisterScreen },
SignInScreen : { screen:SignInScreen },
}),
initialRouteName: 'AccountTabScreen',
},
},
{
initialRouteName: 'HomeTab',
navigationOptions: ({ navigation }) => ({
tabBarLabel: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let name;
if (routeName === 'HomeTab') {
name = "Home";
} else {
name = "Account";
}
return <Text style={[styles.titleStyle, focused ? styles.titleSelectedStyle : {}]}>{name}</Text>;
},
}),
});
I'm try three method but it's not working.
methods are following
1) I was applied tabBarVisible:false in above code so it hide tab bar for all screen.
2) I was applied function for tabBarVisible like tabBarLabel function in above code.
3) I was applied tabBarVisible:false in navigationOptions inside SignInScreen.
How to hide tabbar for SignInScreen?
There is a git thread that might help you:
https://github.com/react-navigation/react-navigation-tabs/issues/19#issuecomment-410857516
Basically you should try changing your AccountTab navigation options like this:
AccountTab: {
screen: createStackNavigator ({
AccountTabScreen : { screen:AccountTabScreen },
RegisterScreen : { screen:RegisterScreen },
SignInScreen : { screen:SignInScreen },
}),
initialRouteName: 'AccountTabScreen',
navigationOptions: ({navigation}) => {
let { routeName } = navigation.state.routes[navigation.state.index];
let navigationOptions = {};
if (routeName === 'SignInScreen') {
navigationOptions.tabBarVisible = false;
}
return navigationOptions;
}
},
const NestedNavigator = StackNavigator({
ScreenOne: {
screen: ScreenOneComponent
},
ScreenTwo: {
screen: ScreenTwoComponent
}
});
class NestedNavigatorWrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<DashboardNavigator screenProps={{ rootNavigation: this.props.navigation }} />
);
}
}
const AppNavigator = StackNavigator({
Home: {
screen: HomeComponent
},
Nested: {
screen: NestedNavigatorWrapper
}
});
If you want to hide tabNavigation in the screen2(part of the StackNavigator then,
navigationOptions: ({navigation}) => {
let {routeName} = navigation.state.routes[navigation.state.index];
let navigationOptions = {};
console.log('Route Name=' + JSON.stringify(routeName));
if (routeName === 'Screen') {
navigationOptions.tabBarVisible = false;
}
return navigationOptions;
Hope it's ok.
I Can't understand how custom header it's supposed to work.
I just want to send static properties to my Header depending on which route is selected.
I have:
export default AppNavigator = StackNavigator({
Index:{
screen: BottomNavigator,
}
},{
navigationOptions: {
header: AppHeader,
},
headerMode:'float',
})
And my BottomNavigator is:
const BottomNavigator = TabNavigator({
TabMenu1: {
screen: () => <Text> Resumé </Text>,
navigationOptions: {
title: 'Resumé'
}
},
TabMenu2: {
screen: () => <Text> Sells </Text>,
navigationOptions: {
title: 'Sells'
}
},
},{
tabBarComponent: BottomNavigation
});
I'm expecting {props.title} in my custom header, is that right?
Additional info: My full route stack is:
AuthNavigator have a wrapper that is connected to redux and have:
const AuthNavigator = StackNavigator({
SignedIn: {
screen: MainNavigator
}
},{
headerMode:'none',
initialRouteName: 'SignedIn'
});
MainNavigator:
const MainNavigator = StackNavigator({
Drawer: {
screen: DrawerNav
},
}, {
headerMode:'none',
});
DrawerNav:
const DrawerNav = DrawerNavigator({
Menu1: {
screen: AppNavigator
},
}, {
contentComponent: DrawerNavigation,
drawerWidth: 300
});
AppNavigator and BottomNavigator are described above
for React Navigation 5 this works
props.scene.descriptor.options.title
You can specify title like this :
RouteName:
{
screen: RouteScreen,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title || 'StaticTitle'
})
}
Where navigation.state.params.title is the title you send as a params when you navigate (so if you want to add a variable for exemple). If you just want to use a static title, just use title: 'StaticTitle'
export const Navigator = StackNavigator(routes, {
headerMode: 'screen',
navigationOptions: ({ navigation }) => ({
header: props => <Header {...props} />,
}),
})
I did find a work around but it seems pretty verbose for what seems to be a common use case..
// Header.js
...
render() {
const { getScreenDetails, scene } = this.props
const details = getScreenDetails(scene)
return (
<View>
<Text>{details.options.title}</Text>
<View>
)
Resolved with a code extracted of Header.js file of react-navigation:
The right way to get the title inside a custom header is:
const sceneOptions = props.getScreenDetails(props.scene).options;
const sceneTitle = sceneOptions.title;
Thanks all!
I have list of users , each user has its display image in the list.
What I am trying is whenever user presses the display image , get redirected to his/her profile through stackNavigation .
CustomTabView:
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
const routeNav = addNavigationHelpers({
...navigation,
state: routes[index],
});
const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
return (
<View style={styles.container}>
<CustomTabBar
navigation={navigation}
activeRouteName={routes[index].routeName}
icon={routeOptions.tabBarIcon}
/>
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index]
})}
/>
</View>
);
};
StackNavigator: // goToProfile.js // also tried placing in index.anndroid.js but didnt found a way to export
const goToProfile = StackNavigator({
Profile: {
screen: Profile,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`
})
},
})
custom tabs: //index.android.js
const CustomTabRouter = TabRouter(
{
Chat: {
screen: Chats,
path: ""
},
Status: {
screen: Contacts,
path: "notifications"
},
Camera: {
screen: Camera,
path: "settings"
}
},
{
initialRouteName: "Chat",
},
);
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);
Also my component :
<TouchableOpacity
onPress = { () => this.props.navigation.navigate('Profile', { item } ) } >
<Avatar
source={{ uri: item.picture.thumbnail }}
/>
</TouchableOpacity>
Your Stack Navigator will look like this:
const ChatStack= StackNavigator({
Chat:{screen: Chat,
navigationOptions: {
header: null,
}},
Profile: {
screen: Profile,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`,
tabBarVisible: false
// depending if you want to hide the tabBar on the profile page if not remove it.
})
},
})
Then Your customTab will take this shape:
const CustomTabRouter = TabRouter(
{
Chat: {
screen: ChatStack,
},
Status: {
screen: Contacts,
path: "notifications"
},
Camera: {
screen: Camera,
path: "settings"
}
},
.........
With those changes you should be able to navigate to Profile screen with your
this.props.navigation.navigate('Profile', { item } )
You want to dispatch a navigation action, not render a new stack - Although I'm not sure your navigators are properly constructed for this to succeed...
_goToProfile = (person) => {
<goToProfile navigate={this.props.navigation} />
}
should be
_goToProfile = (person) => {
this.props.navigation.navigate('Profile', person)
}