styling fields with flex not shown

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