Modal component is undefined in react-native 0.10.1 - react-native

Question

I'm trying to use the Modal component from react-native and it's value is undefined. Here is the component I'm trying to build:
'use strict';
var React = require('react-native');
var {
Modal,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var Button = React.createClass({
getInitialState() {
return {
active: false,
};
},
onHighlight: function() {
this.setState({active: true});
},
onUnhighlight: function() {
this.setState({active: false});
},
render: function() {
var colorStyle = {
color: this.state.active ? '#fff' : '#000',
};
return (
<TouchableHighlight
onHideUnderlay={this.onUnhighlight}
onPress={this.props.onPress}
onShowUnderlay={this.onHighlight}
style={[styles.button, this.props.style]}
underlayColor='#a9d9d4'>
<Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
</TouchableHighlight>
);
}
});
var ModalBox = React.createClass({
getInitialState: function() {
return {
animated: true,
modalVisible: true,
transparent: false,
};
},
setModalVisible: function(visible) {
this.setState({modalVisible: visible});
},
render: function() {
var modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
};
var innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff', padding: 20}
: null;
return (
<View>
<Modal
animated={this.state.animated}
transparent={this.state.transparent}
visible={this.state.modalVisible}>
<View style={[styles.container, modalBackgroundStyle]}>
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
<Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
</View>
<Button
onPress={this.setModalVisible.bind(this, false)}
style={styles.modalButton}>
Close
</Button>
</View>
</Modal>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
innerContainer: {
borderRadius: 10,
},
button: {
borderRadius: 5,
flex: 1,
height: 44,
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},
button: {
borderRadius: 5,
flex: 1,
height: 44,
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},
modalButton: {
marginTop: 10,
},
modalButton: {
marginTop: 10,
},
});
module.exports = ModalBox;
And this is the error I get when I add <ModalBox/> component to my index.ios.js:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Answer 1

I don't where you're requiring the modal module.
Make sure you npm install and include the below line in your js file.

Answer 2

Upgrading to react-native 0.11.0 fixed the problem for me