Skipping Views in React Native render function

I'm trying to render a view with with two TextInput components. This is my render function:

 render () {
   return (
  <View style={styles.container}>

     <TextInput ref='title'
                placeholder="Untitled"
                style={styles.textInput, styles.title}
                autoFocus={true}
                onSubmitEditing={(event) => {this.refs.body.focus()}}
                />



     <TextInput ref='body'
         autoFocus={true}
         multiline={true}
         placeholder="Start typing"
         style={styles.textInput, styles.body}
         />

  </View>
);

Now, I would like to add an underline under each TextInput. In order to do that, I'm wrapping each TextInputs in a View component and adding a borderBottom to the style of the View in this way:

render () {
   return (
  <View style={styles.container}>
    <View style={styles.inputContainer}>
     <TextInput ref='title'
                placeholder="Untitled"
                style={styles.textInput, styles.title}
                autoFocus={true}
                onSubmitEditing={(event) => {this.refs.body.focus()}}
                />
    </View>

    <View style={styles.inputContainer}>
     <TextInput ref='body'
         autoFocus={true}
         multiline={true}
         placeholder="Start typing"
         style={styles.textInput, styles.body}
         />
    </View>
  </View>
);

These are all my styles:

var styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   marginTop: 64
 },
  title: {
    height: 40
  },
  body: {
    flex: 1
  },

 inputContainer: {
   borderBottomColor: '#9E7CE3',
   borderBottomWidth: 1,
   flexDirection: 'row',
   marginBottom: 10
 },

 textInput: { 
   flex: 1,
   fontSize: 16,
 },

});

However the two TextInputs disappear and I cannot understand why (Note: using ES6)