CODEWITHSUNDEEP
reactjsreact-nativeexporeact-native-navigation
VPY
VPY

Reputation: 463

React Native : React Navigation Issue

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)

enter image description here

I am getting this error while trying to run it in my iphone.

enter image description here

Upvotes: 0

Views: 189

Answers (1)

Matt Aft
Matt Aft

Reputation: 8936

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

Upvotes: 3

Related Questions