StackNavigator in react native app

Question

I have created and new react native app by using create-react-native-app. I ended up with an app that works well on expo. Then I want to add a stack StackNavigator from react-navigation I have flowed the guide from reactnavigation.org and I did npm install --save react-navigation in the app directory. The only thing different that I did I have used create-react-native-app AwesomeProject instead of react-native init SimpleApp.

The problem that I am facing is when I remove export default fro my class I get error to check AwakeInDevApp:

Code of App.js:

import React from 'react';
import { StyleSheet, Text, View, AppRegistry, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class App extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: App },
  Chat: { screen: ChatScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

Answer 1

I have already try it before too and it a little confusing. I agree with Sharlon that we have to get rid of this line:

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

Because create-react-native-app has handle it. Beside that, if you're using android you have to define dimension to make it shown on your simulator or phone. I have a sample code of react-navigation in here. I hope it help you! :D

import React from 'react';
import { ListView, Text, View, StyleSheet, Dimensions, Button } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { Constants } from 'expo';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello Chat app!</Text>
        <Button
          onPress={() => navigate('Chat', {'user': 'Lucy'})}
          title="Chat with Lucy"
        />
      </View>
    )
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${ navigation.state.params.user }`,
  });
  render() {
    const { params } = this.props.navigation.state; 
    return (
      <View>
        <Text>Chat with { params.user }</Text>
      </View>
    );
  }
}

class RecentChatsScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>List of recent chat.</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat', {'user': 'Jane'})}
          title="Chat with Jane"
        />
      </View>
    )
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>List of all contact.</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat', {'user': 'Lucy'})}
          title="Chat with Lucy"
        />
      </View>
    )
  }
}

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
})

const SimpleApp = StackNavigator({
  Home: { 
    screen: MainScreenNavigator,
    navigationOptions: {
      title: 'My Chats',
    },
  },
  Chat: { screen: ChatScreen },
})

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
})

Answer 2

Since you're using create-react-native-app, the project template already includes App.js and I assume that it's the one that you mentioned in your example, you need to remove AppRegistry.registerComponent('SimpleApp', () => SimpleApp); and replace it with export default SimpleApp the reason is that the initialization of the application is already done by create-react-native-app and you just need to give the main component in your case SimpleApp the navigator that includes all the screen

const SimpleApp = StackNavigator({
      Home: { screen: App },
      Chat: { screen: ChatScreen },
    });

See the code below for full example

Code of App.js:

import React from 'react';
import { StyleSheet, Text, View, AppRegistry, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class App extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: App },
  Chat: { screen: ChatScreen },
});

export default SimpleApp;