I'm using react navigation for navigate screen. I used nested navigation, TabNavigator and StackNavigator.
As I know when swiping around, the screen are follow by what we set at on TabNavigator.
Normally Screen Followed
One > Two > Three > Four > Five
What I need
One > Two > Four > Five
Reason I skip Three is I want this screen is call by this.props.navigation.navigate('ThreeScreen') , but I still wanted it on the navigation bar. Is it possible ? or have any other suggestion can do like this ?
const mainNav = TabNavigator({
One: {
screen: OneScreen,
},
Two: {
screen: TwoScreen,
},
Three: {
screen: ThreeScreen,
},
Four: {
screen: FourScreen,
},
Five: {
screen: FiveScreen,
},
} );
export const mainStack = StackNavigator({
Home: { screen: mainNav},
Content: { screen: ContentScreen },
});
Add gesturesEnabled in navigationOptions either :
Inside component
class ThreeScreen extends React.Component {
static navigationOptions= {
gesturesEnabled: false
};
}
Or directly, inside the routing configuration
const mainNav = TabNavigator({
//....
Three: {
screen: ThreeScreen,
navigationOptions: {
gesturesEnabled: false,
}
},
//....
} );
Related
I have both a Stack Navigator and a Bottom Tab Navigator:
const App = StackNavigator({
ScreenA: { screen: ScreenA },
ScreenB: { screen: ScreenB },
ScreenC: { screen: ScreenC },
BottomTabNavigator: { screen: BottomTabNavigator}
});
const BottomTabNavigator = BottomTabNavigator({
BottomScreenA: { screen: BottomScreenA },
BottomScreenB: { screen: BottomScreenB },
BottomScreenC: { screen: BottomScreenC},
App: { screen: App}
});
Sometimes, I need to do nested navigation from a BottomTabNavigator component to a StackNavigator component. Thus, I need to add the App screen in my BottomTabNavigator. However, I don't want this screen to be in my Bottom icons, in terms of design. I really want this App screen just for navigation purpose.
Is there a way to get rid of this screen in the bottom icons? If not, do you have any suggestions on how I could re-design the screens/ Stacks ?
React Native activeTintColor not getting applied on selected drawer item. My react native navigation routes looks like,
-> DrawerNavigator
-> StackNavigator
-> HomeScreen
-> FirstScreen
-> SecondScreen
-> ThirdScreen
routes.js
const RootStack = createStackNavigator(
{
Home: { screen: HomeScreen },
ChapterGroup: { screen: ChapterGroupScreen },
Chapter: { screen: ChapterScreen },
}
const DrawerStack = createDrawerNavigator(
{
Home: {
screen: RootStack,
params: { id: 1 }
},
Kural: { screen: ChapterGroupScreen, params: { id: 2 } },
Detail: { screen: ChapterGroupScreen, params: { id: 3 } }
}, { contentComponent: DrawerComponent}
}
export default DrawerStack;
I managed to display the First, Second, thirdScreens on the sidebar by creating a new DrawerComponent which will navigate to the appropriate stack screen on drawer item click.
DrawerComponent.js
resetStack = route => {
let pressedDrwaerItem = route.route.key;
let id = route.route.params.id;
this.props.navigation.dispatch(
StackActions.reset({
index: 1,
actions: [
NavigationActions.navigate({
routeName: "Home"
}),
NavigationActions.navigate({
routeName: "ChapterGroup",
params: { title: pressedDrwaerItem, no: id }
})
]
})
);
}
render() {
return (<ScrollView>
<DrawerItems
{...this.props}
onItemPress={this.resetStack}
</DrawerItems</ScrollView>)
}
It properly gets navigated to the ChapterGroup Screen on Home stack but the drawer activeitem points to the Home not the second or third custom name. I think it may be because all the other screen exists inside the Rootstack. Is there anyway to manually set the second drawer item as active?
or any successful implementation of DrawerNavigator inside StackNavigator ? ie. I want to use two screens from stack navigator as drawer items. And if we navigated through to that particular screen from home screen, the corresponding drawer item should be selected.
Not sure whether you have tried contentOptions or not, but this is what i have found from react-navigation document
contentOptions for DrawerItems
There are various property you can use with contentOptions
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
From above snippet i guess for you activeTineColor might be useful.
I'm not sure about your intentions with the resetStack function.
If you use the following function instead, it's going to work:
navigateToScreen = (route) => {
const navigateAction = NavigationActions.navigate({
routeName: route.route.key
});
this.props.navigation.dispatch(navigateAction);
}
//...
<DrawerItems
{...this.props}
onItemPress={this.navigateToScreen}>
</DrawerItems>
It sets the new screen without stacking it up. It sets the activeTintColor though.
I omitted the params passing to make it simple.
I am using SwitchNavigator from React-navigation for Authentication in React-native app. In the Authorized Section, I want to show a side Drawer for showing options like settings and log out. Entering into the Authorized section by clicking the button in tabs section user should be able to go to details section of an album. For that, I am using StackNavigator.
Issue:
After Authentication, Once I navigate to a section with Side Drawer in which stack navigator is present, nothing is rendered once navigated to Authorized section. Even the Test screen is mounted(checked through componentDidMount) nothing is displayed.
const Stages = createMaterialTopTabNavigator({
testStage1: { screen: TestScreen },
testStage2: { screen: TestScreen },
testStage3: { screen: TestScreen },
testStage4: { screen: TestScreen },
})
const AuthorizedSectionRouteConf={
navigation:{
stages: {
screen : Stages,
},
details : {
screen: DetailsScreen,
}
},
navigationOptions:{
headerLeft:null
}
}
const AuthorizedSectionNavigator =
createStackNavigator(AuthorizedSectionRouteConf.navigation);
const Config = {
navigation: {
UnauthorizedSection: {
screen: ({navigation}) => <LoginScreen navigate={navigation.navigate}/>,
navigationOptions:{
header:null,
mode:'modal'
}
},
AuthorizedSection: {
screen: createDrawerNavigator({
Home:{
screen: ({navigation}) => <AuthorizedSectionNavigator screenProps={{drawerNavigator:navigation}} />
}
})
},
TestSection: TestScreen
}
}
export default AppNavigator = createSwitchNavigator(Config.navigation);
Navigation after navigation:
this.props.navigate('AuthorizedSection')
==> nothing is visible after this.
However, If I navigate to TestScreen after Authentication which is simple text on screen
it rendered properly.
this.props.navigate('TestSection')
==> working properly
Figured out that there is no space for the component to render. Fixed it by setting the flex property for the parent container.
Currently Im trying to make a drawer using react-navigation.
my react-navigation version is : "^1.0.0-beta.7"
Basically my structure of react-navigation look like this
StackNavigator as the root..
DrawerNavigator as the 2nd layer..
and another StackNavigator as the 3rd layer..
My problem is that when I put my component inside DrawerNavigator, The Component header will not show up after navigate to the component.. So, Im hoping anyone who can pointed to me how to make header visible when I put my component inside DrawerNavigator. If I did not put any component inside DrawerNavigator and all the screen inside the inner StackNavigator, the header will be visible but then the DrawerItems doesnt have any props thus not showing inside the drawer.
const rootNav = StackNavigator({
MainDrawerNavigator: { screen: MainDrawerNavigator }
}, {
headerMode: 'screen',
navigationOptions: { header: null }
})
const MainDrawerNavigator = DrawerNavigator({
Home: { screen: HomeNavigator },
Logout: { screen: Logout }
},{
initialRouteName: 'Home',
drawerWidth: 270,
headerMode: 'screen',
contentComponent: (props) => {
return(
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
)
},
contentOptions: {
style: {
marginTop: 0,
}
}
})
const HomeNavigator = StackNavigator({
HomeMenu: { screen: HomeMenu },
StartJourney: { screen : StartJourney },
JournalList: { screen: JournalList },
)}
Hope anyone can help me with this.
Thanks!
I'm trying to achieve where DrawerOpen the header will not show
I don' understand which header here is?
but when I navigate the route from Drawer and it open a screen, then
the header will show up
If you're talking about navigator header, it's header of HomeNavigator, you can do like you did with rootNav navigationOptions: { header: null }
const HomeNavigator = StackNavigator({
HomeMenu: { screen: HomeMenu },
StartJourney: { screen : StartJourney },
JournalList: { screen: JournalList },
},{
navigationOptions: { header: null }
})
And current react-navigation document is for beta.9 / beta.10 I don't know if these props work on beta.7. There are some big changes on style and props from beta.7 to beta.8
As a newbie in react-native i'm trying find a way to use react-navigation with different files without a navbar to navigate (for example just click on a button in the login view to enter the main view, clicking on log out button return to login view).
With react-navigation i made a global component 'Nav' and i placed in the main AppRegistry call:
AppRegistry.registerComponent('myApp', () => Nav);
While in the Navigator.js:
export const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
});
When i run
react-native run-android
i get the first view loaded under a white space (it should be the navigator, that i don't want in my app)
Now how can i remove the Nav from the view and how can i change View onPress a button component in another file?
There is another package that fill better my desire?
From the docs, setting the the headerMode to none should do the trick. This will hide the header on all of the screens defined in that StackNavigator. Example:
const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
},{
headerMode: 'none',
});
If you want to control the visibility of the header so that it appears on some of the screens but not all of them, then you can set headerMode to screen and for each individual screen set [the navigation prop for header: { visible: false }. See docs here. For example, if you are creating the screen component in another file, it might look like this:
// In the main file:
const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
},{
headerMode: 'screen',
});
// Hidden for your Login screen:
export default class LoginView extends Component {
static navigationOptions = {
header: { visible: false }
}
// etc...
}
// Visible for your AddStream screen:
export default class AddStreamView extends Component {
static navigationOptions = {
header: { visible: true }
}
// etc...
}
Edit: missed the second part of your question.
For navigating to a different screen, you really should go through the Hello World tutorial as it explains it. Specifically, this section. Relevant example code from the tutorial:
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
In your case, 'Chat' would be either 'Login' or 'AddStream'.