React Native showing blank screen - ios

Question

I'm using react-native latest release 0.4.4 and installed react-native-side-menu and react-native-carousel components.
For some reason when I run the app, it's not showing anything.
The code instantiate a view with sidemenu and contentview inside.
contentview is for displaying the main page which contains three buttons and when someone clicks on explore it takes them to search page using navigatorios component.
Is there is some problem with StyleSheet ?
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Component,
NavigatorIOS,
View,
TouchableHighlight,
TextInput,
} = React;
var SideMenu = require('react-native-side-menu');
var Menu = React.createClass({
about: function() {
this.props.menuActions.close();
},
render: function() {
return (
<View>
<Text>Menu</Text>
<Text onPress={this.about}>About</Text>
</View>
);
}
});
var styles = StyleSheet.create({
searchView: {
flexDirection: 'row',
padding: 25,
marginTop: 100,
},
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
flowRight: {
flexDirection: 'column',
padding: 25,
alignItems: 'center',
alignSelf: 'stretch',
marginTop: 100,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#009D6E',
borderColor: '#008C5D',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
});
class Search extends Component {
render() {
return (
<View style={styles.searchView}>
<TextInput
style={{ flex: 2, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Search Appointment" />
<TextInput
style={{ flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Location" />
</View>
);
}
}
class Welcome extends React.Component {
onExplorePressed() {
this.props.navigator.push({
title: 'Explore',
component: Search,
});
}
render() {
return (
<View style={styles.flowRight}>
<Text style={styles.welcome}>
Welcome to Docit!
</Text>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Facebook</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Email</Text>
</TouchableHighlight>
<Text style={styles.welcome}>OR</Text>
<TouchableHighlight
onPress={this.onExplorePressed.bind(this)}
style={styles.button}
underlayColor='#009D3E'>
<Text style={styles.buttonText}>Explore Something</Text>
</TouchableHighlight>
</View>
);
}
}
class ContentView extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: Welcome,
title: 'Welcome',
}}/>
)
}
}
var Docit = React.createClass({
render: function() {
var menu = <Menu navigator={navigator}/>;
return (
<SideMenu menu={menu}>
<ContentView/>
</SideMenu>
);
}
});
AppRegistry.registerComponent('Something', () => Something);
Am I doing something wrong here ??

Answer 1

I figured out that react-native-carousel component was conflicting with sidebar menu component and showing a blank screen. I posted the issue on their repository.
The simple solution is remove react-native-carousel component from everywhere, even from node_modules/, the folder inside.

Answer 2

Your react versions could be out of sync. I've had this happen to me when the react version bundled with the iOS app is different than the version that the packager is running.
If you're using cocoapods, make sure that the react version in your podfile is the same as your package.json.