Why <TextInput> cannot be focused when inside an absolute positioned parent container <View> in React Native?

Viewed 263

I have a TextInput component that is located inside a View with a style setting of position: "absolute":

const [searchTerm, setSearchTerm] = useState('Test');
return (
   <View style={{position: "absolute"}}>
      <TextInput
         autoFocus={true}
         value={searchTerm}
         onChangeText={text => setSearchTerm(text)}
      />
   </View>
)

When this style is set, I cannot focus or perform any interaction with the TextInput (including autoFocus={true}) even though I can see the input field and default text (Test). Once I remove the absolute positioning I am able to work with the TextInput as usual.

What is the reason for this behavior? (using Android)

1 Answers

you should add zIndex:400 or some high number it worked for me

Related