Can't find variable: React

Question

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?

try to run your project with react-native start or react-native run-ios commands — semanser
– semanser, Commented Jul 31, 2016 at 16:10

dopcn · Accepted Answer · 2016-07-31 16:24:08Z

133

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

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

answered Jul 31, 2016 at 16:24

dopcn

4,2183 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nickey Over a year ago

Thank you! Just adding that is should be wherever jsx is used

eemmrrkk Over a year ago

@user269867 if you split your app as stackNavigator, bottomTabNavigator etc., check the navigator components.

Shamoon Over a year ago

Do I have to do this in EVERY file?

1mike12 Over a year ago

omg thank you. Yes, I think this does need to be in every file, since jsx is just sugar which underlying it has dependencies on the React object

mattylantz Over a year ago

Furthermore, it has to be import React from 'react', and on every file

|

Chuck Rak · Accepted Answer · 2023-07-11 00:13:45Z

7

import * as React from 'react';

Adding this within all of the files in which you have JSX should fix the problem.

If you are having trouble finding which files you need add it to (XCode error can be unclear), running react-native run-ios will give you a more precise location for the error.

edited Jul 11, 2023 at 0:13

Chuck Rak

32 bronze badges

answered May 7, 2019 at 14:17

Elialber Lopes

6838 silver badges18 bronze badges

2 Comments

jefelewis Over a year ago

Holy hell that finally solved that annoying error

Zeeshan Ahmad Khalil Over a year ago

it gets removed when i press ctrl + shift + O to remove other unwanted imports

Sheyan Sandaruwan · Accepted Answer · 2021-03-13 05:03:52Z

0

Add the constructor to before render

constructor(props) {

super(props); }

answered Mar 13, 2021 at 5:03

Sheyan Sandaruwan

1671 silver badge1 bronze badge

Comments

Mohamed Imran · Accepted Answer · 2022-03-13 14:49:05Z

0

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

answered Mar 13, 2022 at 14:49

Mohamed Imran

7201 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Can't find variable: React

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Linked

Related