How to export Appcontainer and Import in another Screenpage? - react-native

Question

my main app is about bottom tab navigator.on that i have using 5 screens.
one screen from the 5 screen i need to use createstacknavigator and i need to export that appcontainer class and import in main screen its not exporting that class saying undefined is not a function(evaluating,(0,b.createAppcontainer)(D)')enter code here
./createStacknavigator
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
this.props.navigation.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Details' })
],
}))
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
}, {
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
In MainScreen Page
./Mainscreen
...
import AppNavigator from './components/createStacknavigator.js';
My error is:
undefined is not a function(evaluating,(0,b.createAppcontainer)(D)')

Answer 1

You can use createAppContainer like below:
import React from 'react';
import {
createBottomTabNavigator,
createStackNavigator,
createSwitchNavigator,
createAppContainer
} from 'react-navigation';
const onTabTap = (n) => {
ReactNativeHapticFeedback.trigger('selection', false);
n.defaultHandler();
};
const TabNavigator = createBottomTabNavigator({
Home: {
screen: Jobs,
navigationOptions: () => ({
tabBarOnPress: onTabTap
})
},
Calendar: {
screen: Calendar,
navigationOptions: () => ({
tabBarOnPress: onTabTap
})
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = CONST.IC_HOME;
if (routeName === CONST.MENU_HOME) {
IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
} else if (routeName === CONST.MENU_CALENDAR) {
IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
}
return IconComponent;
}
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'black',
},
});
const DashBoardStack = createStackNavigator({
DashBoard: TabNavigator
}, {
mode: 'modal',
headerMode: 'none',
});
const App = createSwitchNavigator({
App: DashBoardStack
},
{
initialRouteName: 'App'
});
const AppContainer = createAppContainer(App);
class App extends React.Component {
render() {
return (
<React.Fragment>
<AppContainer />
</React.Fragment>
);
}
}
export default App;