React Nativeで、コンポーネントをViewで囲むとコンポーネントが小さくなります。

Question

React NativeでTodoリストを作っているのですが、レイアウトがうまくいっている状態のコンポーネントを<View></View>で囲むと何故かコンポーネントの幅がほとんど無くなってしまいます。

コードは下記の通りです。

よろしくお願いします！

render() {
    return (
      <View style={styles.container}>
        <View>
          <TextInput
            style={styles.input}
            onChangeText={text => this.onChangeText(text)}
          />
          <TouchableOpacity style={styles.addButton} onPress={this.onPress}>
            <Text style={styles.addButtonText}>追加</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

スタイルは下記の通りです。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
  },
  input: {
    backgroundColor: '#e6e6e6',
    width: '100%',
    paddingTop: 10,
    paddingBottom: 10,
    paddingRight: 20,
    paddingLeft: 20,
  },
  addButton: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#327eff',
    marginTop: 10,
    padding: 14,
    width: '100%',
    borderRadius: 14,
  },
  addButtonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});