TheWebs TheWebs - 5 months ago 15
Javascript Question

Not understanding NavigatorIOS React Naitive

So My app is pretty basic:

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);


I then have a 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;


Nothing to funky. Nothing renders out to the page and there are no errors. The app loads and I see "Welcome!" As the title but the (
Landing
) component doesn't show. Am I missing something?

If I move every thing from Landing
render
into index.js
render
it works. Am I misunderstanding the docs?

Answer

Try adding style={{flex:1}} to NavigatorIOS:

<NavigatorIOS
    style={{flex:1}}
    initialRoute={{
      component: Landing,
      title: 'Welcome!',
      passProps: {},
    }}
  />

NavigatorIOS has no default styling out of the box. So basically there is no default width or height specified. This means that if you do not specify a width and a height, or a flex value, then it will not show up in your view.

Comments