Can't find variable: React

JavascriptIosReact Native

Javascript Problem Overview


I am trying to make a simple iOS page with a button that triggers an action. I have followed the tutorial on how to get started and this is my index code:

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Component,
  AlertIOS // Thanks Kent!
} = React;

class myProj extends Component {
 render() {
    return (
      <View style={styles.container}>
        <Text>
          Welcome to React Native!
        </Text>
        <TouchableHighlight style={styles.button}
            onPress={this.showAlert}>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
      </View>
    );
  }
 
  showAlert() {
    AlertIOS.alert('Awesome Alert', 'This is my first React Native alert.', [{text: 'Thanks'}] )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 44,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});

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

The problem is that when I run it from Xcode on my device I get

Can't find variable: React
render
main.jsbundle:1509:6
mountComponent
mountChildren

Any idea what might be the problem here?

Javascript Solutions


Solution 1 - Javascript

In the latest version of React Native you must import React from 'react' package

import React, {Component} from 'react';
import {
View,
...
} from 'react-native';

Solution 2 - Javascript

import * as React from 'react';

Solution 3 - Javascript

Add the constructor to before render

constructor(props) {

super(props); }

Solution 4 - Javascript

Adding import React from 'react'; in all the jsx/tsx file resolved my issue

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKeykoYumeView Question on Stackoverflow
Solution 1 - JavascriptdopcnView Answer on Stackoverflow
Solution 2 - JavascriptElialber LopesView Answer on Stackoverflow
Solution 3 - JavascriptSheyan SandaruwanView Answer on Stackoverflow
Solution 4 - JavascriptMohamed ImranView Answer on Stackoverflow