Keyboard doesn't show up on focus textInput - Android

Question

I use react native to make my application.

At some point, when the user clicks on an image, I automatically open a modal with a textInput inside with the props "autofocus=true". So I want by default the keyboard to open to allow the user to write something.

However, on IOS everything works perfectly but on Android, the textInput is correctly focused (there is the bar blinking on it) but the keyboard doesn't open, I have to click on the textInput for the keyboard to decide to open !

I tried doing focus in the componentDidMount and this kind of thing, but nothing works, the android keyboard doesn't want to open automatically.

I use React-Navigation with React-Native-Screens. I saw that there were some problems with that and the keyboard not opening, but I tried the given solutions and nothing works either!

I hope someone will be able to help me to solve my problem.

Thanks

Viktor

Answer 1

Without ScrollView works only on ios. Place this component around the code you need the keyboard to appear on:

<ScrollView keyboardShouldPersistTaps='always'>
  // CODE
</ScrollView>

Answer 2

Here's how I got it to work:

const inputRef = useRef(null); // Attach a ref to the TextInput

useFocusEffect(() => {
    setTimeout(() => inputRef.current?.focus(), 50)  // Delay the focus by 50ms to allow modal to complete its render
})


return (
    <TextInput
       ref={inputRef} // Attach ref
       autoFocus={false}  // Set autoFocus to false 
    />
)

I'm not sure if this is the correct way to do it, but it seems that the modal animation in some way interferes with the keyboard showing. So delaying the on focus slightly allows the onfocus effects to occur without hindrance.

Note: This does not negatively impact iOS rendering in any way.