React Native NavigatorIOS Does not Render component - css

Question

I am having a problem rendering my component inside of a navigatorIOS, I am sure it is a style issue but I can't pinpoint where.
I have given flex : 1
removed backgroundColor
and I have given a margin
as suggested in other stack overflow questions.
If I throw MessageBoardTopics outside of the navigator it renders fine.
import MessageBoardTopics from './messageBoardTopics.js';
class MessageBoards extends React.Component{
constructor(props){
super(props);
}
componentDidMount(){
}
render() {
return (
<View style={styles.container}>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: MessageBoardTopics,
title: 'Forum',
}}/>
</View>
);
}
};
module.exports = MessageBoards;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
var screenWidth = Dimensions.get('window').width;
class MessageBoardTopics extends React.Component{
constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = PostStore.getState().posts;
this.state={sortText: 'Sort by: Old',
dataSource: ds.cloneWithRows(data)};
}
componentDidMount() {
PostStore.listen(this.onChange);
}
componentWillUnmount() {
PostStore.unlisten(this.onChange);
}
onChange(state) {
this.setState(state);
}
replyToMessage(){
}
removeMessage(){
}
sortMessages(){
}
editMessage(){
}
pressRow(rowData){
this.props.navigator.push({
title: rowData.title,
component: Topic
});
}
render() {
return (
<View style={styles.container}>
<Text>fasfasdfafasdf</Text>
<View style={{flex: .2}}></View>
<View style={styles.buttonBar}>
<TouchableHighlight style={styles.centerButton} underlayColor={"lightred"} onPress={this.sortMessages}>
<Text>{this.state.sortText}</Text>
</TouchableHighlight>
<View style={styles.centerButton} underlayColor={"lightred"} onPress={this.newMessage}>
<ComposeModal reply={this.replyToMessage} index={null}/>
</View>
</View>
<ListView
dataSource={this.state.dataSource}
style={{borderTopWidth: 2}}
renderRow={(rowData) =>
<TouchableHighlight underlayColor="lightgrey" onPress={()=>this.pressRow(rowData)}>
<View style={styles.message}>
<Text style={styles.messageTitle}>{rowData.title}</Text>
<Text style={styles.messageAuthor}>By: <Text style={{color: 'blue', fontStyle: 'italic'}}>{rowData.author}</Text></Text>
</View>
</TouchableHighlight>}/>
</View>
);
}
};
module.exports = MessageBoardTopics;
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 80,
},
message: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
borderWidth: 1,
borderColor: "lightblue",
padding: 15,
},
messageTitle: {
color: 'grey',
textDecorationLine: 'underline',
fontWeight: 'bold',
},
messageAuthor: {
fontSize: 10,
},
buttonBar: {
flex: .1,
alignSelf: 'stretch',
alignItems: 'center',
flexDirection: 'row',
},
centerButton: {
flex: 1,
width: (screenWidth/2),
alignItems: 'center',
},
button: {
flex: 1,
textAlign: 'center',
},
});

Answer 1

I needed to set a width to a wrapper component for the navigatorIOS
Edit: When I upgraded from react-native 0.16 to 0.17 flex:1 was not working on the navigatorIOS. I had to create a wrapper component and give that a flex as well.
This did not work. This was in my index.ios.js file, which rendered the navigatorIOS on 0.16.
render() {
return (
<View style={styles.container}>
<NavigatorIOS
style={{flex: 1, alignSelf: 'stretch'}}
initialRoute={{
component: MessageBoardTopics,
title: 'Forum',
}}/>
</View>
);
}
};
on react-native 0.17 I had to create a wrapper component and give that a flex attribute. I had to change my index.ios.js to render this instead.
var forumComponent = React.createClass({
render: function() {
return (
<View style={styles.container}>
<MessageBoards style={{flex: 1}}/>
</View>
);
}
});