styling fields with flex not shown - react-native

Question

I have a file weatherProject.js :
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<Forecast
main={this.state.forecast.main}
description={this.state.forecast.description}
temp={this.state.forecast.temp}/>
<TextInput
style={styles.input}
returnKeyType='go'
onSubmitEditing={this._handleTextChange} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
input: {
fontSize: 20,
borderWidth: 2,
height: 40
}
});
weatherProject require the forecast module var Forecast = require('./Forecast');:
var Forecast = React.createClass({
render: function() {
return (
/*<View>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>*/
<View>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text>
Current conditions: {this.props.description}
</Text>
<Text>
{this.props.temp}°F
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#FFFFFF'
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: '#FFFFFF'
}
})
module.exports = Forecast;
However, after integrating the forecast module, i don' t see the texts and inputs anymore on the android virtual mobile. my guess is that it' s coming from the styling and flexbox as the codes compile fine, if i remove the flex: 1 syntaxes its shows the texts, why according to you the present codes does not show anything on the screen ? ( my avd machine is a Nexus 4 model )
Thanks for your helps