Can't find variable: React
I just started learning react so I apologise in advance if this may sound like a stupid question. I'm 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
I tried to search online for the answer but couldn't find anything that actually help. Any idea what might be the problem here?
Solution 1:
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:
import * as React from 'react';