How to open a screen with React Native - react-native

Question

I have created a tabbed view with three tabs based on RNE (React native elements demo app). I had to disable the drawernavigator from the middle tab because it doesn't work to click a link in the drawer and then click the drawer again back to the middle tab view because then it crashes. From the left and right tab it works and I can't understand why this is the case. I'm just trying to open a view but since I am using react navigation it doesn't work. I use a fancy DrawerNavigator, a cool TabNavigator and a nifty StackNavigator instead of keeping it simple and I get error message trying to navigate from the DrawerNavigator to the TabNavigator.
The App.js
/**
* React Native App
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View, Image, Dimensions, AppRegistry
} from 'react-native';
import { DrawerNavigator, DrawerItems,NavigationActions } from 'react-navigation';
import Components from './src/drawer/components';
import Ratings from './src/drawer/ratings';
import Pricing from './src/drawer/pricing';
import Login from './src/drawer/login';
import Profile from './src/drawer/profile';
import Lists from './src/drawer/lists';
const SCREEN_WIDTH = Dimensions.get('window').width;
const CustomDrawerContentComponent = props => {
return(
<View style={{ flex: 1, backgroundColor: '#43484d' }}>
<View
style={{ marginTop: 40, justifyContent: 'center', alignItems: 'center' }}
>
<Image
source={require('./src/images/logo.png')}
style={{ width: SCREEN_WIDTH * 0.57 }}
resizeMode="contain"
/>
</View>
<View style={{marginLeft: 10}}>
<DrawerItems {...props} />
</View>
</View>
)};
const MainRoot = DrawerNavigator(
{
Login: {
path: '/login',
screen: Login
},
Profile: {
path: '/profile',
screen: Profile
},
/* Lists: {
path: '/lists',
screen: Lists
},*/
Components: {
path: '/components',
screen: Components,
},
/* Ratings: {
path: '/ratings',
screen: Ratings,
},*/
Pricing: {
path: '/pricing',
screen: Pricing,
}
},
{
initialRouteName: 'Components',
contentOptions: {
activeTintColor: '#548ff7',
activeBackgroundColor: 'transparent',
inactiveTintColor: '#ffffff',
inactiveBackgroundColor: 'transparent',
labelStyle: {
fontSize: 15,
marginLeft: 0,
},
},
drawerWidth: SCREEN_WIDTH * 0.8,
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
}
);
export default MainRoot;
My drawer navigator.
/**
* React Native App
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View, Image, Dimensions, AppRegistry
} from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import Components from './src/drawer/components';
import Ratings from './src/drawer/ratings';
import Pricing from './src/drawer/pricing';
import Login from './src/drawer/login';
import Profile from './src/drawer/profile';
import Lists from './src/drawer/lists';
const SCREEN_WIDTH = Dimensions.get('window').width;
const CustomDrawerContentComponent = props => (
<View style={{ flex: 1, backgroundColor: '#43484d' }}>
<View
style={{ marginTop: 40, justifyContent: 'center', alignItems: 'center' }}
>
<Image
source={require('./src/images/logo.png')}
style={{ width: SCREEN_WIDTH * 0.57 }}
resizeMode="contain"
/>
</View>
<View style={{marginLeft: 10}}>
<DrawerItems {...props} />
</View>
</View>
);
const CustomDrawerContentComponent2 = (props) => {
const nav = props.nav;
return (<View>
<ScrollView>
<DrawerItems
{...props}
onItemPress = {
({ route, focused }) =>
{
props.onItemPress({ route, focused })
console.log("item pressed");
}
}
/>
</ScrollView>
</View>)
};
const MainRoot = DrawerNavigator(
{
Login: {
path: '/login',
screen: Login
},
Profile: {
path: '/profile',
screen: Profile
},
Lists: {
path: '/lists',
screen: Lists
},
Components: {
path: '/components',
screen: Components,
},
/* Ratings: {
path: '/ratings',
screen: Ratings,
},*/
Pricing: {
path: '/pricing',
screen: Pricing,
}
},
{
initialRouteName: 'Components',
contentOptions: {
activeTintColor: '#548ff7',
activeBackgroundColor: 'transparent',
inactiveTintColor: '#ffffff',
inactiveBackgroundColor: 'transparent',
labelStyle: {
fontSize: 15,
marginLeft: 0,
},
},
drawerWidth: SCREEN_WIDTH * 0.8,
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
}
);
export default MainRoot;
My Tab Navigator.
import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import ButtonsTab from '../tabs/buttons';
import ListsTab from '../tabs/lists';
import InputTab from '../tabs/input';
import FontsTab from '../tabs/fonts';
import DetailedTrends from '../views/lists_home'
const Components = TabNavigator(
{
ButtonsTab: {
screen: ButtonsTab,
path: '/buttons',
navigationOptions: {
tabBarLabel: 'Add',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name={focused ? 'camera' : 'camera'}
size={30}
type="material-community"
color={tintColor}
/>
),
},
},
ListsTab: {
screen: ListsTab,
path: '/lists',
navigationOptions: {
tabBarLabel: 'Ads',
tabBarIcon: ({ tintColor, focused }) => (
<Icon name="list" size={30} type="entypo" color={tintColor} />
),
},
},
/* FontsTab: {
screen: FontsTab,
path: '/fonts',
navigationOptions: {
tabBarLabel: 'On map',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name={focused ? 'map-marker-outline' : 'map-marker-outline'}
size={30}
type="material-community"
color={tintColor}
/>
),
},
},*/
InputTab: {
screen: InputTab,
path: '/input',
navigationOptions: {
tabBarLabel: 'My activity',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
size={30}
type="material-community"
color={tintColor}
/>
),
},
},
},
{
initialRouteName: 'ListsTab',
animationEnabled: false,
swipeEnabled: true,
// Android's default option displays tabBars on top, but iOS is bottom
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#e91e63',
// Android's default showing of icons is false whereas iOS is true
showIcon: true,
},
}
);
Components.navigationOptions = {
drawerLabel: 'Components',
drawerIcon: ({ tintColor }) => (
<Icon
name="settings"
size={30}
iconStyle={{
width: 30,
height: 30
}}
type="material"
color={tintColor}
/>
),
};
export default Components;
If I now press "Components" in the Drawer Navigator to navigate to the components view, my app crashes.
"There is no route defined for key ButtonsTab."
What is the purpose of this error?
How can I troubleshoot this? Why is it complaining about ButtonsTab?
Error: There is no route defined for key ButtonsTab.
Must be one of: 'Home','Lists_Detail'
This error is located at:
in DrawerView (at DrawerNavigator.js:88)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at renderApplication.js:35)
in RCTView (at View.js:78)
in View (at AppContainer.js:102)
in RCTView (at View.js:78)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
getScreenForRouteName
If I add a navigator to lists.js it almost works but still incomprehensible, unnecessary and wrong. Why do they make a framework where you can't navigate between screens?
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import ListsHome from '../views/lists_home';
import ListsDetails from '../views/lists_detail';
import ButtonsTab from '../tabs/buttons';
const ListsTabView = ({ navigation }) => (
<ListsHome banner="Lists" navigation={navigation} />
);
const ListsDetailTabView = ({ navigation }) => (
<ListsDetails banner="Lists Detail" navigation={navigation} />
);
const ListsTab = StackNavigator({
Home: {
screen: ListsTabView,
path: '/',
navigationOptions: ({ navigation }) => ({
title: 'Lists',
headerLeft: (
<Icon
name="menu"
size={30}
type="entypo"
style={{ paddingLeft: 10 }}
onPress={() => navigation.navigate('DrawerOpen')}
/>
),
}),
},
Lists_Detail: {
screen: ListsDetailTabView,
path: 'lists_detail',
navigationOptions: {
title: 'Lists Detail',
},
}, ButtonsTab: {
screen: ListsTabView,
path: '/',
navigationOptions: ({ navigation }) => ({
title: 'Lists',
headerLeft: (
<Icon
name="menu"
size={30}
type="entypo"
style={{ paddingLeft: 10 }}
onPress={() => navigation.navigate('DrawerOpen')}
/>
),
}),
},
});
export default ListsTab;

Answer 1

You can use this sample project which I made to demonstrate StackNavigator, TabNavigator and DrawerNavigator working together.
github.com/paraswatts/DrawerNavigatorReactNative
I hope it helps.