View display is not what I expect when using react-native

Question

I'm reading Learning React Native by Bonnie Eisenman and am having trouble with the WeatherProject tutorial in chapter 3. When the app loads in the iOS simulator, it appears to be rendering the contents of Forecast.js but taking up the whole display without anything from WeatherProject.js

Here is my code:

index.ios.js

import {
  AppRegistry,
} from 'react-native';

import WeatherProject from './WeatherProject';

AppRegistry.registerComponent('WeatherProject', () => WeatherProject);

WeatherProject.js

import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    TextInput,
} from 'react-native';

var Forecast = require('./Forecast');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4D4D4D'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  input: {
    fontSize: 20,
    borderWidth: 2,
    height: 40
  }
});

var WeatherProject = React.createClass({

  getInitialState() {
    return {
      zip: '',
      forecast: {
        main: 'Clouds',
        description: 'few clouds',
        temp: 45.7
      }
    }
  },

  _handleTextChange(event) {
    console.log(event.nativeEvent.text);
    this.setState({
      zip: event.nativeEvent.text
    });
  },

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

module.exports = WeatherProject;

Forecast.js

import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
} from 'react-native';

var styles = StyleSheet.create({
  bigText: {
    flex: 2,
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#FFFFFF'
  },
  mainText: {
    flex: 1,
    fontSize: 16,
    textAlign: 'center',
    color: '#FFFFFF'
  }
});

var Forecast = React.createClass({

  render() {
    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>
    );
  }
});

module.exports = Forecast;

The expected outcome looks like this (from the book):

But my actual outcome is this:

And here is the view debug hierarchy:

Any help at all would be greatly appreciated.

Answer 1

Add this style in Forecast:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
}

then add the style into the View:

<View styles={style.container}>