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.
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.
So I am learning React-Native and I have created a Drawer which has already worked before. But after a few modifications not involving the Drawer it keeps giving this error Can't find variable: Contact even if I am not importing a variable called Contact.
drawer.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import ButtonScreen from '../screens/ButtonScreen';
import Contacts from '../screens/Contacts';
import Information from '../screens/Information';
import Preferences from '../screens/Preferences';
const Drawer = new DrawerNavigator({
Home: {
screen: ButtonScreen,
navigationOptions: {
drawerLabel: 'Button'
},
},
Contacts: {
screen: Contacts,
},
Preferences: {
screen: Preferences,
},
Info: {
screen: Information,
}
}, {
contentComponent: (props) => (
<View>
<Text>Custom Header</Text>
<DrawerItems {...props}/>
<Text>Custom Footer</Text>
</View>
)
});
export default Drawer;
Contacts.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
class Contacts extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Text>
Contact Component
</Text>
</View>
);
}
}
const mapStateToProps = (state) => {
const { isDrawerOpened } = state;
return { isDrawerOpened };
}
export default connect(mapStateToProps)(Contacts);
By the stacktrace the error is comming from drawer.js line 6, where I import Contacts and not Contact. I already runned npm start -- --reset-cache to see if it would solve it but no. I am very confuse about why this is happening.
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)".
I have a react native app with a DrawerNavigator. For the menu I have my own component. That works great.
Now I want to add a second side menu on the right side.
Is it possible to have two DrawerNavigator like in the Slack App?
This solution is not working for me: https://snack.expo.io/ry7lYempe
because I don't want to have a TabController as parent. Both Drawer should be accessible in all screens.
My code looks like this:
import React from 'react'
import reducer from './src/reducers'
import { DrawerNavigator } from 'react-navigation';
import SidebarMenu from './src/components/layout/SidebarMenu'
import { createStore } from 'redux';
import { Provider } from 'react-redux';
let store = createStore(reducer);
import News from './src/screens/News'
import HowTo from './src/screens/HowTo'
export default class MyApp extends React.Component {
render() {
return (
<Provider store={store}>
<MainNavigator />
</Provider>
);
}
}
const MainNavigator = DrawerNavigator(
{
News: {
path: '/news',
screen: News
},
HowTo: {
path: '/howto',
screen: HowTo
}
},
{
initialRouteName: 'News',
drawerPosition: 'left',
contentComponent: SidebarMenu
}
);
Solved after updating react-navigation to the newest version.
you can add any drawer you want, take a look at this exemple https://snack.expo.io/BJoChzewM
In your case, you may add your "MainNavigator" in another DrawerNavigator Component. don't forget to set drawerOpenRoute/drawerCloseRoute to prevent any side effects.
#KamleshKatpara Here is my solution (I nested the two navigators):
const DrawerExample = DrawerNavigator(
{
Home: {
path: '/',
screen: Home
}
},
{
initialRouteName: 'Home',
drawerPosition: 'left',
contentComponent: SidebarMenu
}
);
const MainDrawerExample = DrawerNavigator({
Drafts: {
screen: DrawerExample,
}
}, {
drawerPosition: 'right',
contentComponent: BookmarkMenu,
drawerOpenRoute: 'DrawerRightOpen',
drawerCloseRoute: 'DrawerRightClose',
drawerToggleRoute: 'DrawerRightToggle'
});
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 :)