Keyboard doesn't appears every focus

Question

I'm using the <InputText> of react-native-paper for my app. And i'm using the autofocus property everytime I switch from a view to another, so i can type directly when I arrive on the screen.

But the problem is the keyboard appears randomly ... Sometimes the keyboard comes alone and sometimes I have to tap in the input to reveal the keyboard...

This is an example of the Input I use everywhere :

<TextInput
                    label="Article"
                    value={this.state.article}
                    onChangeText={article => this.setState({article})}
                    onSubmitEditing={this.submitStepSaisie1}
                    autoFocus
                    style={{backgroundColor: 'transparent'}}
                />

I tried using ref like this, in my constructor :

constructor(props) {

    super(props);
    this.fieldOne = React.createRef();
    this.fieldTwo = React.createRef();
}

And on my TextInput :

<TextInput ref={this.fieldOne} />

But when I call the this.fieldOne.current.focus() it returnes me the following error : Cannot read property 'focus' of null.

Do you guys have a trick ? Thanks !

you can use ref of that element and call focus after component mount — elvis_ferns, Jan 20 '20 at 08:08
I tried, but it seems in react native ref doesn't works anymore ? Always called some errors when i tried to achieve it... Or maybe ref doesn't works good on react native paper element — Thibault Dumas, Jan 20 '20 at 09:03

score 0 · Answer 1 · answered Jan 21 '20 at 07:30

0

import { TextInput as NativeTextInput } from 'react-native';

<TextInput
  label="Article"
  value={this.state.article}
  onChangeText={article => this.setState({article})}
  onSubmitEditing={this.submitStepSaisie1}
  autoFocus
  style={{backgroundColor: 'transparent'}}
  render={(props) => <NativeTextInput {...props} ref={this.fieldOne}>}
/>

I dont have the time to test this but this might work.

answered Jan 21 '20 at 07:30

elvis_ferns

524
6
14

I finally added a timeout before the focus function... The only way it works. – Thibault Dumas Jan 24 '20 at 15:44

Keyboard doesn't appears every focus

1 Answers1