ReactNative TextInput not visible iOS

Question

I have the following stripped down render result:

return (   <View style={{backgroundColor:'red'}}>     <TextInput value={'Hello'}/>   </View> ); 

The generated TextInput is not visible in iOS, unless I specify the height, and when using flexDirection:'row' in its container, I need to specify its width as well.

This only happens with iOS, Android seems to work as expected.

Is there a way of displaying a TextInput in iOS without fixed size?

Current dependencies:

  "dependencies": {     "react-native": "=0.18.1",     "react-native-orientation": "=1.12.2",     "react-native-vector-icons": "=1.1.0"   }, 

iOS:

Android:

Changing the render like this:

return (   <View style={{backgroundColor:'red'}}>     <Text>text</Text>     <TextInput value={'Hello'}/>   </View> ); 

has the following result:

iOS:

Android:

Answer 1

You need to define a height for the textInput. Try:

return (   <View style={{backgroundColor:'red'}}>     <Text>text</Text>     <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'}/>   </View> ); 

Or, if you do not want to define a height on your TextInput, you can define the height on the containing view, and flex:1 on the TextInput:

<View style={{ height:60 }}>     <TextInput style={{ flex:1, backgroundColor: '#ededed' }} /> </View>