CODEWITHSUNDEEP
androidreact-nativeandroid-softkeyboard
Viktor Jovanovic
Viktor Jovanovic

Reputation: 571

Keyboard doesn't show up on focus textInput - Android

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

Upvotes: 9

Views: 7810

Answers (3)

Andrew Einhorn
Andrew Einhorn

Reputation: 1163

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.

Upvotes: 0

Hrishikesh Prabhu
Hrishikesh Prabhu

Reputation: 1

const [isFocused, setIsFocused] = useState(false);

useEffect(() => {
    setIsFocused(true);
  }, []);

<TextInput 
ref={(inputRef) => {
if (isFocused) {
inputRef?.focus();
setIsFocused(false);
}}}
autoFocus={true}/>

Upvotes: 0

Gabriel Scalici
Gabriel Scalici

Reputation: 650

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

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

Upvotes: 1

Related Questions