React native AppRegistry is not a callable module

Question

I'm having a small issue with following a tutorial in "Learning react native O Reilly".

I'm on the first app (WeatherProject) and when I did the react-native init WeatherProject command, strangely index.ios.js and index.android.js weren't automatically created? I'm presuming this is normal. So I created them, and filled them as below:

var React = require('react-native'); var { AppRegistry } = React; var WeatherProject = require('./WeatherProject'); AppRegistry.registerComponent('WeatherProject', () => WeatherProject);

I then have the WeatherProject.js file as follows:

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "" };
  }

  _handleTextChange = event => {
    this.setState({ zip: event.nativeEvent.text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

and made the index.js file as follows:

import WeatherProject from "./WeatherProject";

export default WeatherProject;

Is the book that I'm following outdated or am I doing something stupid? But when I run the app on the iphone simulator I get the error "AppRegistry is not a callable module.(calling runApplication)"

This is not a duplicate question! I wish people had read the two questions thoroughly before marking this one as a duplicate of the other one!! — Marzieh Bahri, Nov 23 '17 at 11:25

score 0 · Answer 1 · answered Oct 08 '17 at 14:53

You are importing wrong AppRegistry and react.

Try importing them in your index.ios.js and index.android.js like this:

import React from 'react';
import { AppRegistry } from 'react-native';
import WeatherProject from './WeatherProject';

This should work.

You should check the official documentation, here it's a example of AppRegistry.registerComponent https://facebook.github.io/react-native/docs/props.html#content

React native AppRegistry is not a callable module

1 Answers1

Linked