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;
Related
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,
}
}
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.
In my application I've 3 stack like
StackOne
export const StackOne = createStackNavigator({
OneScreen: { screen:one },
TwoScreen: { screen:two },
ThreeScreen: { screen:three },
}, { initialRouteName: 'OneScreen', }
);
StackTwo
export const StackTwo = createStackNavigator({
OneScreenTwo: { screen:oneTwo },
TwoScreenTwo: { screen:twoTwo },
ThreeScreenTwo: { screen:threeTwo },
}, { initialRouteName: 'OneScreenTwo', }
);
I use the drawer navigation like this.
MainDrawer
const MainDrawer = createDrawerNavigator(
{
One: { screen: StackOne },
Two: { screen: StackTwo },
Other: { screen: OtherScreen},
},
{}
);
All working fine. manage drawer - to stack very well
only issue is when I'm in StackOne's ScreenTwo of swipe the left- right still open the drawer menu.
not only this screen in every screen open drawer menu.
I try several link but can't find the success.
Hope some one help.
I follow this link Navigation
Thanks
You need to specify navigationOptions on the StackNavigator instead of TwoScreen etc, as otherwise it'd be configuring the StackNavigator instead of the DrawerNavigator:
StackOne.navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});
Working example: https://snack.expo.io/#riwu/stack-nav-lock-drawer
export const StackOne = createStackNavigator({
OneScreen: { screen:one },
TwoScreen: { screen:two },
ThreeScreen: { screen:three },
}, { initialRouteName: 'OneScreen', }
);
StackOne.navigationOptions = ({ navigation }) => {
let drawerLockMode = 'unlocked';
if (navigation.state.routes[navigation.state.index] != 'OneScreen') {
drawerLockMode = 'locked-closed';
}
return {
drawerLockMode,
};
};
export const StackTwo = createStackNavigator({
OneScreenTwo: { screen:oneTwo },
TwoScreenTwo: { screen:twoTwo },
ThreeScreenTwo: { screen:threeTwo },
}, { initialRouteName: 'OneScreenTwo', }
);
StackTwo .navigationOptions = ({ navigation }) => {
let drawerLockMode = 'unlocked';
if (navigation.state.routes[navigation.state.index] != 'OneScreenTwo') {
drawerLockMode = 'locked-closed';
}
return {
drawerLockMode,
};
};
Create navigation option & issue resolved.
I am working with react native for 3 months now and i have this problem now for several days without any solution.
The Problem:
I have a nested TabNavigator inside a StackNavigator. Both of these navigators are inside a stateless component:
const MyStackNav = StackNavigator({
Tabs:{
screen: TabNavigator({
Tab1: { screen: TabScreen1},
Tab2: { screen: TabScreen2},
Tab3: { screen: TabScreen3},
...(CONDITION ? { Tab4: {
screen: TabScreen4
}} : {})
})
}
StackScreen1:{
screen: StackScreenOne,
},
StackScreen2:{
screen: StackScreenTwo,
},
})
Calling of the component:
class MainApp extends React.Component {
constructor(props)
{
super(props);
this.state = {
condition: false,
};
}
render() {
return (
<MyStackNav/>
);
}
}
How can I pass the condition from my class MainApp to the condition variable inside the MyNavStack component for the conditional rendering?
So Tab4 should only be rendered if CONDITION is true.
And the second question would be:
How can I pass a prop from my class MainApp to, for example, the first tab screen?
Thanks in advance!
You can give you MyStackNav a property like: <MyStackNav condition={this.state.condition} />
In the MyStackNav you could say:
const MyStackNav = props => StackNavigator({
Tabs:{
screen: TabNavigator({
Tab1: { screen: TabScreen1},
Tab2: { screen: TabScreen2},
Tab3: { screen: TabScreen3},
...(props.condition? { Tab4: {
screen: TabScreen4
}} : {})
})
}
StackScreen1:{
screen: StackScreenOne,
},
StackScreen2:{
screen: StackScreenTwo,
},
})
You don't need to create a React.component, to pass down props.
You can also expand it a bit, in case you'd like to do a little bit more in your component:
const MyStackNav = (props) => {
const { condition } = props;
return StackNavigator({
Tabs: {
screen: TabNavigator({
Tab1: {
screen: TabScreen1
},
Tab2: {
screen: TabScreen2
},
Tab3: {
screen: TabScreen3
},
...(condition ? {
Tab4: {
screen: TabScreen4
}
} : {})
})
}
StackScreen1: {
screen: StackScreenOne,
},
StackScreen2: {
screen: StackScreenTwo,
},
})
}
I have this router config:
export const Bird = StackNavigator({
ResidentBirds: {
screen: BirdList,
navigationOptions: ({navigation}) => ({
title: 'Resident Birds',
})
},
MigratoryBirds: {
screen: BirdList,
navigationOptions: {
title: 'Migratory Birds'
}
}
});
Both the routes have the same screen component (BirdList).
BirdList.js:
export default class BirdList extends React.Component {
state = {
fetching: false,
dataSource: []
};
componentDidMount() {
this.getBirds();
}
getBirds = () => {
// const birdType = this.props.navigation.state.params.birdType;
// const args = this.pros.navigation.state.params.args;
// fetch list of birds of type birdType
};
render() {
return (
<View style={{flex: 1, backgroundColor: 'skyblue'}}>
<Text>Fetching birds: {this.state.fetching.toString()}</Text>
<FlatList
data={this.state.dataSource}
...
/>
</View>
)
}
}
App.js:
import {Bird} from './src/config/router'
export default class App extends React.Component {
...
render() {
return <Bird/>
}
}
My question is how can I pass default params to the Routes (i.e., ResidentBirds and MigratoryBirds) so that I can use that values to fetch appropriate data?
Maybe something like this:
export const Bird = StackNavigator({
ResidentBirds: {
screen: BirdList,
navigationOptions: ({navigation}) => ({
title: 'Resident Birds',
}),
params: {
birdType: 'Resident',
args: {
'height': 100,
'region': 'America'
}
}
},
MigratoryBirds: {
...
}
});
Working solution by Spencer in github:
export const Bird = StackNavigator({
ResidentBirds: {
screen: (props) => <BirdList {...props} birdType="Resident" args={{ height: 100, region: 'America' }} />,
navigationOptions: ({navigation}) => ({
title: 'Resident Birds',
})
},
...
});