React Native : React Navigation Issue - reactjs

Question

Can someone tell me what I am doing wrong ?
I am pretty new to React Native and I am following the example for React Navigator from here.
The app is developed via Expo IDE.
https://reactnavigation.org/docs/intro/quick-start
This is my src code for App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RootNavigator } from './src/RootNavigator';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<RootNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my src code for RootNavigator.js
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
const HomeScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
const DetailsScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home',
},
},
Details: {
screen: DetailsScreen,
navigationOptions: {
headerTitle: 'Details',
},
},
});
export default RootNavigator;
Rootnavigator.js which is located inside a src folder (attached the screenshot)
I am getting this error while trying to run it in my iphone.

Answer 1

You're doing export default App which is an unnamed export, therefore you need to change:
import { RootNavigator } from './src/RootNavigator';
to
import RootNavigator from './src/RootNavigator';
More info about es6 import/export here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export