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:

Nader Dabit · Accepted Answer · 2017-01-19T16:58:16.597

38

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>

edited Jan 19 '17 at 16:58

answered Jan 29 '16 at 15:05

Nader Dabit

52,483
13
107
91

Yes I know it works if I do that. So it is not possible to just have it take the available space as with other elements? – Giannis Jan 29 '16 at 15:09
1

Not in iOS. The only other way around it is to add a height to the container, and a `flex:1` to the TextInput. I've updated my code to show that. – Nader Dabit Jan 29 '16 at 15:38
1

May need '#ededed' instead of 'ededed' for backgroundColor. – bitsand Jan 19 '17 at 16:30
@NaderDabit This simple solution works great. You saved my day – Shalini Jun 15 '17 at 08:09
Thanks... saved me so much time – Dastan Aug 11 '21 at 23:25

score 1 · Answer 2 · answered Jan 25 '18 at 05:57

1

Faced the same issue, but it rendered when I removed alignItems:'center' from the top most parent view in the render() function.

answered Jan 25 '18 at 05:57

mad_greasemonkey

864
2
15
32

score 1 · Answer 3 · edited Aug 30 '20 at 13:03

1

Use style={{ color: 'black' }}.

This solves the problem.

edited Aug 30 '20 at 13:03

KetZoomer

2,701
3
15
43

answered Nov 16 '19 at 05:25

Anoop Kharsu

19
1

score 0 · Answer 4 · answered Sep 20 '18 at 15:40

when we use an TextInput in react-native the TextInput will not expand to fill the space available to it by default instead we have to add style rule that how big the TextInput should be.if your not add style for TextInput with height you cant appear the TextInput

ReactNative TextInput not visible iOS

4 Answers4