How to import React native navigators? - react-native

Question

I have defined all the navigators in a navigator.js file. I want to import it. How do I do that without getting any errors? This is my navigator.js file.
import React, {Component} from 'react';
import {
Platform,
View,
Button,
SafeAreaView,
} from 'react-native';
import {
createAppContainer,
createDrawerNavigator,
createBottomTabNavigator,
createStackNavigator,
DrawerItems,
} from 'react-navigation';
/** NAVIGATORS DEFINED **/
const WelcomeTabNavigator = createBottomTabNavigator({
Welcome: {screen: WelcomeScreen},
Profile,
Settings,
},
{
tabBarOptions: {
activeTintColor: '#fb9800',
inactiveTintColor: '#7e7b7b',
style: { height: 40,backgroundColor: '#fff',borderTopWidth:0.5,borderTopColor: '#7e7b7b' },
labelStyle: {fontSize: 20}
},
navigationOptions:({navigation}) => {
const {routeName} = navigation.state.routes[navigation.state.index];
return {
headerTitle: routeName
};
}
})
const WelcomeStackNavigator = createStackNavigator({
WelcomeTabNavigator: WelcomeTabNavigator
},
{
defaultNavigationOptions:({navigation}) => {
return {
headerLeft: (
<Icon
style={{paddingLeft: 20}}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
})
const AppDrawerNavigator = createDrawerNavigator({
Welcome: {screen: WelcomeStackNavigator},
},
{
contentComponent:(props) => (
<View style={{flex:1}}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<Button
title="Logout"
onPress={() => {
props.navigation.navigate('Home')
}}
/>
</SafeAreaView>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
})
const AppStackNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Welcome: {screen: AppDrawerNavigator}
});
const AppContainer = createAppContainer(AppStackNavigator);
This is my app.js file
import React, {Component} from 'react';
import {
Platform,
View,
Button,
SafeAreaView,
} from 'react-native';
import {
createAppContainer,
createDrawerNavigator,
createBottomTabNavigator,
createStackNavigator,
DrawerItems,
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import HomeScreen from './screens/HomeScreen.js';
import WelcomeScreen from './screens/WelcomeScreen.js';
import Profile from './screens/ProfileScreen.js';
import Settings from './screens/SettingsScreen.js';
class App extends React.Component {
render() {
return <AppContainer />;
}
}
export default App;
This is my index.js file
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
I want to know how to import the navigator.js file and connect these 3 files. My navigator.js file contains different navigators like tab navigator , drawer navigator, stack navigator etc. So how can I import all these in a single attempt?

Answer 1

You can combine all the navigators in one page, as long as you import all the pages.
import WelcomeScreen from './WelcomeScreen.js',
import ProfileScreen from './ProfileScreen.js',
import SettingsScreen from './SettingsScreen.js',
import LogoutScreen from './LogoutScreen.js',
const WelcomeTabNavigator = createBottomTabNavigator({
Welcome: {screen: WelcomeScreen,},
Profile: {screen: ProfileScreen,},
Settings: {screen: SettingsScreen,},
},
const WelcomeStackNavigator = createStackNavigator({
Home: {screen: WelcomeTabNavigator,},
Logout: {screen: LogoutScreen,},
})
class App extends React.Component {
render() {
return <WelcomeStackNavigator />;
}
}
export default App;

Answer 2

I like to tell you very simple way to update use navigation.
Below is an example of your index.js file
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Main } from './navigation/Main';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
export class App extends Component {
render() {
return (
<View style={ styles.container }>
<Main />
</View>
);
}
}
Then here is your Main.js which is your navigation class. You can declare all your screen here.
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import { FirstScreen } from '../screens/FirstScreen';
import { SecondScreen } from '../screens/SecondScreen';
const RootStack = createStackNavigator({
FirstScreen: {
screen: FirstScreen,
key: 'FirstScreen',
navigationOptions: {
gesturesEnabled: false,
},
},
SecondScreen: {
screen: SecondScreen,
key: 'SecondScreen',
navigationOptions: {
gesturesEnabled: false,
},
},
});
export const Main = createAppContainer(RootStack);
Now you can simply navigate from one screen to other.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
class FirstScreen extends Component {
onGetStarted() {
const { navigate } = this.props.navigation;
navigate('SecondScreen');
}
render() {
return (
<View style={ styles.container }>
<TouchableOpacity
style={ styles.welcome }
onPress={ () => this.onGetStarted() }
>
<Text>
Welcome to React Native!
</Text>
</TouchableOpacity>
<Text style={ styles.instructions }>This is screen 1</Text>
</View>
);
}
}
export { FirstScreen };