I am using both createStackNavigator & createDrawerNavigator but the stackNavigator isn't working i can't navigate to any page. here is the app.js
const DrawerNavigator = createDrawerNavigator({
homeScreen: {
screen: homeScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
backgroundColor: '#231f20',
height: 0,
},
headerLeft: null,
gesturesEnabled: false,
}
},
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Makeup',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Photographers',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
},
{
contentOptions: {
activeTintColor: '#d03036',
activeBackgroundColor : '#f5f5f5',
inactiveBackgroundColor : 'rgba(0,0,0,0)',
inactiveTintColor: '#545f7a',
itemStyle: {
marginVertical: 0,
},
labelStyle: {
fontWeight:'bold',
backgroundColor: 'transparent'
}
},
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
initialRouteName: 'homeScreen',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
});
const AuthStackNavigator = createStackNavigator(
{
loadingScreen: {
screen: loadingScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
loginScreen: {
screen: loginScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({ navigation }) => {
return {
header: null,
gesturesEnabled: false
}
},
},
},
{
initialRouteName: 'loadingScreen',
// mode: 'modal',
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
}
);
const NavigationApp = createAppContainer(AuthStackNavigator);
// Export the App
export default NavigationApp;
import { useScreens } from 'react-native-screens';
useScreens();
i tried exporting the DrawerNavigator but then the stacknavigator isn't working anymore can i use both at the same time ?
also i got design issue when doing so i tried searching for hours but with no luck
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 need to display a hamburger menu in the upper left hand corner which opens a left side drawer when clicked. I tried to implement the example provided in the following article but it doesn't appear to be functional when I implement it:
https://medium.com/#mollyseeley/a-simple-react-native-navigation-drawer-ba10fc203ad
Can you identify the problem with the implementation at the url above, or am I most likely messing something up with how I'm trying to implement the example? Are there other example urls for this type of implementation that you can recommend?
Try using this way.
const LoginNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
header: null,
}
}
});
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});
const DrawerNavigators = createDrawerNavigator({
//Drawer Optons and indexing
Main: {
screen: HomeActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Dashboard',
}
}
});
const NonDrawerNavigators = createStackNavigator({
TaskView: {
screen: TaskView,
navigationOptions: {
title: 'Task',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
},
TeamView: {
screen: TeamView,
navigationOptions: {
title: 'Team',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
}
}, {headerLayoutPreset: 'center'});
const AppNavigator = createStackNavigator({
drawerStack: {
screen: DrawerNavigators,
navigationOptions: {
header: null
}
},
nonDrawerStack: {
screen: NonDrawerNavigators,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(createSwitchNavigator({
SplashScreen: SplashScreen,
loginStack: LoginNavigator,
homeStack: AppNavigator
}, {
initialRouteName: 'SplashScreen'
})
);
I have nested stacks in my app. With two different headers.
I have a reset but this just send the user back to the home screen regardless. How can I get the previous route?
resetForm() {
const { dispatch } = this.props.navigation;
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Drawer" })]
});
this.props.navigation.dispatch(resetAction);
}
App Navigator:
const config = {
contentOptions: {
activeTintColor: "#e91e63",
inactiveTintColor: "#ffffff",
itemStyle: {
flexDirection: "row-reverse"
}
},
drawerWidth: 300,
overlayColor: "#003366",
drawerPosition: "right",
drawerBackgroundColor: "#009999",
transparentCard: true,
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: "transparent"
}
})
};
const withHeader = (
screen: Function,
routeName: string,
Header
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({ routeName, props }) => ({
header: props => <Header {...props} />
})
}
},
{
initialRoute: "Home",
transparentCard: true,
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: "transparent"
}
})
}
);
const routes = {
VideoEpisodes: {
screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
},
TestYourself: {
screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
},
MyResults: {
screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
},
BookmarkedVideos: {
screen: withHeader(
BookmarkedVideosScreen,
"Bookmarked Videos",
DrawerHeader
)
},
About: {
screen: withHeader(AboutScreen, "About", DrawerHeader)
}
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer,
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRoute: "Home",
transparentCard: true,
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: "transparent"
}
})
}
);
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.