My application is quite simple:
import React, { Component } from 'react';
import Landing from './App/pages/landing.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS
} from 'react-native';
class twitterQue extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<NavigatorIOS
initialRoute={{
component: Landing,
title: 'Welcome!',
passProps: {},
}}
/>
);
}
}
AppRegistry.registerComponent('twitterQue', () => twitterQue);
Next up is the landing component:
import React, { Component } from 'react';
import Button from '../components/button/buttons.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
class Landing extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Twitter Que
</Text>
<Button type={"primary"} buttonWidth={240} onPress={() => this._enter()}>Que Up Some Tweets!</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('Landing', () => Landing);
module.exports = Landing;
Everything seems fine. No rendering on the page and no errors. The app loads, showing "Welcome!" as the title but the (Landing) component does not display. What could I be missing?
If I move everything from Landing's render into index.js's render, it works. Am I misinterpreting the documentation?