I keep getting this error every time i pass values to drawer config, but when i use it without passing any config it works fine.
I get error using this:
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
}, {
initialRouteName: 'Home',
drawerPosition: 'right',
});
No error using this:
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
});
I spent hours trying to figure it out but no luck.
Full code:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { Card, ListItem, Button, Icon } from 'react-native-elements'
import { DrawerNavigator } from 'react-navigation'
import HomeScreen from './Home'
import OptionsScreen from './Options'
import AboutUsScreen from './AboutUs'
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
}, {
initialRouteName: 'Home',
drawerPosition: 'right',
});
export default Drawer ;
I have added:
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
to drawer config and it's working now :)
Related
I am trying to make an authentication UI in react native and these are my files:
App.tsx
import React from 'react';
import {
ActivityIndicator,
StyleSheet,
View,
} from 'react-native';
import {
createSwitchNavigator,
createAppContainer,
} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack'
import EmailAccountLoginBlock from '../blocks/email-account-login/src/EmailAccountLoginBlock';
import { getStorageData } from '../framework/src/Utilities';
import AuthenticationStack from './Navigation/AuthStack';
import OtherStack from './Navigation/OtherStack';
class AuthLoadingScreen extends React.Component {
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await getStorageData('authToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
const AppNavigator =createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: OtherStack,
Auth: AuthenticationStack,
},
{
initialRouteName: 'AuthLoading',
},
));
export function App() {
return (
<AppNavigator/>
);
}
AuthStack.tsx
import React, {useState, useEffect} from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import EmailAccountLoginBlock from '../../blocks/email-account-login/src/EmailAccountLoginBlock';
import EmailAccountRegistration from '../../blocks/email-account-registration/src/EmailAccountRegistration';
import ForgotPassword from '../../blocks/forgot-password/src/ForgotPassword';
import VerifyAccount from '../../blocks/user-profile-basic/src/screens/VerifyAccount/VerifyAccountPage';
const AuthStack = createStackNavigator({
EmailAccountLoginBlock: {
screen: EmailAccountLoginBlock,
navigationOptions: {title: 'EmailAccountLoginBlock', header: null},
},
EmailAccountRegistration: {
screen: EmailAccountRegistration,
navigationOptions: {title: 'CustomisableUserProfiles', header: null},
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: {title: 'InvestMentExperience', header: null},
},
VerifyAccount: {
screen: VerifyAccount,
navigationOptions: {title: 'CategoryPerference', header: null},
},
});
export default AuthStack;
And OtherStack.tsx is similar to AuthStack.tsk with other screens. I keep getting this error. I think this is an issue with the navigation. I've updated react-navigation, react-navigation-stack but that doesn't seem to help.
I'm trying to nest a bottomTabNavigator inside the DrawerNavigator using the React Navigation library but an error comes up telling me to use a React component or a Navigator to for the DrawerNavigator's route.
This is the DrawerNavigator.js file where i create the DrawerNavigator.
import React, { Component } from 'react';
import {createDrawerNavigator} from 'react-navigation';
import SideBar from '../components/SideBar';
import MainTabNavigator from './MainTabNavigator';
export default createDrawerNavigator({
Home: {
screen: MainTabNavigator,
}
},{
contentComponent: SideBar
})
This is the MainTabNavigator.js file where i create the bottomTabBarNavigator
const MainTabNavigator = createBottomTabNavigator({
Home: HomeStack,
MultiBar: {
screen: () => null,
navigationOptions: ({navigation}) => ({
tabBarIcon: () => (
<CustomTabBarBottom />
)
}),
params: {
navigationDisabled: true
}
},
Video: VideoStack
}, {
tabBarComponent: props =>
<TabBarComponent
{...props}
/>,
tabBarOptions: {
showLabel: false,
},
});
export default MainTabNavigator;
Please look into this and tell me if i'm missing something, thanks in advance!
This is my code of bottomTabBar with Drawer. may this will help you.
Just add your MainTabNavigation as the first screen of your createDrawerNavigator in your code.
I have used react-navigation version 3.0
import React, { Component } from "react";
import { View, Text } from "react-native";
import {
createAppContainer,
createDrawerNavigator,
createStackNavigator
} from "react-navigation";
import Heal from "./component/tabs/Heal";
import Submit from "./component/tabs/Submit";
import { createBottomTabNavigator, BottomTabBar } from "react-navigation-tabs";
import ProfileSetting from "./component/drawerTabs/ProfileSetting";
import ChangePassword from "./component/drawerTabs/ChangePassword";
import Help from "./component/drawerTabs/Help";
import Logout from "./component/drawerTabs/Logout";
import Drawer from "./component/drawerTabs/Drawer";
import { FontTypes } from "./style/Font";
import { ColorCodes } from "./style/Color";
const TabBarComponent = props => <BottomTabBar {...props} />;
export const TabScreens = createBottomTabNavigator(
{
"Heal a case": { screen: Heal },
"Submit a case": { screen: Submit }
},
{
tabBarComponent: props => (
// <BottomTabView {...props}/>
<TabBarComponent
{...props}
activeBackgroundColor={ColorCodes.primary}
showIcon={false}
allowFontScaling={true}
activeTintColor="#fff"
inactiveTintColor="#000"
labelStyle={{ fontSize: 17, fontFamily: FontTypes.Roboto }}
tabStyle={{
justifyContent: "center",
borderWidth: 0
}}
style={
{
// backgroundColor: "red"
}
}
/>
)
}
);
export const MyDrawerNavigator = createDrawerNavigator(
{
"My Cases": {
screen: TabScreens
},
"Profile Setting": {
screen: ProfileSetting
},
"Change Password": {
screen: ChangePassword
},
Help: {
screen: Help
},
Logout: {
screen: Logout
}
},
{
contentComponent: Drawer,
drawerBackgroundColor: "white",
drawerType: "front",
contentOptions: {
labelStyle: {
fontFamily: FontTypes.Roboto,
color: ColorCodes.primary,
},
activeLabelStyle:{
color:ColorCodes.iconColor
}
}
}
);
export default createAppContainer(MyDrawerNavigator);
This is my AppNavigator.js which is used as the main app container:
import React from 'react';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import MainTabNavigator from './MainTabNavigator'
import AuthStackNavigator from './AuthStackNavigator';
import DrawerNavigator from './DrawerNavigator';
const MainAppNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
App: DrawerNavigator,
Auth: AuthStackNavigator,
});
const AppNavigator = createAppContainer(MainAppNavigator)
export default AppNavigator
By removing the MainTabNavigator import which i don't use at all in the file, the error goes away (which is really bizarre ).
Not sure if this still helps but I had the same problem and solved it by having all components in one file and moving the other navigators up, so that the createDrawerNavigator component is at the bottom of the file.
This looks like hoisting does not work here? I am actually confused about this, but there you go.
user.js
<TouchableHighlight onPress={() =>
this.props.navigation.navigate('SettingsName') } >
<Text>Name</Text>
</TouchableHighlight>
App.js
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import LoggedOut from './src/screens/LoggedOut';
import EnterMobile from './src/screens/EnterMobile';
import EnterOtp from './src/screens/EnterOtp';
import SplashScreen from './src/screens/SplashScreen';
import EventsCalendar from './src/screens/EventsCalendar';
import LocateMe from './src/screens/LocateMe'; import
SettingsName from './src/screens/SettingsName';
import SettingsProfilePicture from './src/screens/SettingsProfilePicture';
import SettingsParking from './src/screens/SettingsParking';
const AppNavigator = createStackNavigator(
{
SplashScreen: {
screen: SplashScreen
},
EnterMobile: {
screen: EnterMobile
},
EnterOtp: {
screen: EnterOtp
},
LocateMe: {
screen: LocateMe
},
UserData: {
screen: UserData
},
SettingsLanguage: {
screen: SettingsLanguage
},
SettingsService: {
screen: SettingsService
},
SettingsHoliday: {
screen: SettingsHoliday
}
},
{
navigationOptions: {
header: null
}
});
export default AppNavigator;
The navigation is given in a child component, could this be causing different behavior?
Using stacknavigator, when I click on the button I get the following error
"Undefined is not an object (Evaluating this3.props.navigation.navigate)".
How to set a common color for all navigation bar from app.js file , here we used createStackNavigator for navigations my app.js
import React, {Component} from 'react';
import { StyleSheet,} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './src/pages/Login';
import SignUp from './src/pages/SignUp';
export default createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
title:"SignUp",
},
});
You can use tabBarOptions at the end of your stack navigator. See this, for options available for (iOS and android) in tabBarOptions.
And for setting common color across all screens bar, use code below.
export default createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
title:"SignUp",
},
},
{
tabBarOptions: {
style : {
height: 65 ,
backgroundColor: 'blue' ,
}
}
});
I wanted to know how I can add tab navigation and stack navigation with react navigation in react native.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, Dimensions } from 'react-native';
import {StackNavigator,TabNavigator} from 'react-navigation';
import Scores from './src/scores.js';
import Profile from './src/profile.js';
import Favourite from './src/favourite.js'
const MyApp = TabNavigator({
Scores: {
screen: Scores,
},
Favs: {
screen:Favourite ,
},
Profile: {
screen:Profile,
},
}, {
tabBarPosition: 'bottom',
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#F7C01C',
},
});
export default MyApp;
Here I have TabNavigation only working but I still need to add the stacknavigatio and maybe later I need to add Drawer Navigation.
You can nest Navigators. Just create a StackNavigator exactly as you created your TabNavigator and add it instead of a screen.
const MyFavs = StackNavigator({
FavouriteList: {
screen: FavouriteList,
},
ViewFavourite: {
screen: ViewFavourite,
},
}, {
initialRouteName: 'FavouriteList'
});
const MyApp = TabNavigator({
Scores: {
screen: Scores,
},
Favs: {
screen: MyFavs,
},
Profile: {
screen: Profile,
},
}, {
tabBarPosition: 'bottom',
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#F7C01C',
},
});
export default MyApp;