focus is not a function react native

Question

In the older react-native versions the following code used to work. But Now in v0.45.1 I get an error that SecondInput.focus is not a function.

 <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title"
      onSubmitEditing={(event) => { 
        this.refs.SecondInput.focus(); 
      }}
    />
    <TextInput
      ref='SecondInput'
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" />

UPDATE: The problem seems to be Redux-form.

That's because you should be using state to manipulate your app and not refs.Look at this https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar — Train, Jun 15 '17 at 23:20
@OrthoHomeDefense The answer on the question does not work anymore. Because focus is not a function on TextInput — jasan, Jun 15 '17 at 23:44
I wasn't speaking of the accepted answer, it was the second one. He addresses that issue. — Train, Jun 16 '17 at 18:55

score 0 · Answer 1 · answered Jun 16 '17 at 07:41

0

Try the latest call back pattern for ref's and check if it's working,

In class components

<TextInput 
  style = {styles.titleInput}
  returnKeyType = {"next"}
  autoFocus = {true}
  placeholder = "Title"
  onSubmitEditing={(event) => { 
    this.secondInput.focus(); 
  }}
/>
<TextInput
  ref={secondInput => this.secondInput = secondInput}
  style = {styles.descriptionInput}          
  multiline = {true}
  maxLength = {200}
  placeholder = "Description" 
/>

In functional components instead of this.secondInput just declare variable secondInput and use everywhere without 'this'.

Hope this works...

answered Jun 16 '17 at 07:41

Ravi Raj

6,247
2
30
32

I get an error that undefined is not a function , Evaluating secondInput.focus() – jasan Jun 16 '17 at 08:06
It seems its an issue with Redux-form , i will update the question . – jasan Jun 16 '17 at 08:09
oh redux, I don't use that. – Ravi Raj Jun 16 '17 at 08:12

score -1 · Answer 2 · answered Jun 16 '17 at 07:42

Here is the sample example to have focus on textbox

           class CustomTextInput extends React.Component {
              constructor(props) {
                super(props);
                this.focus = this.focus.bind(this);
              }

              focus() {
                // Explicitly focus the text input using the raw DOM API
                this.textInput.focus();
              }

              render() {
                // Use the `ref` callback to store a reference to the text input DOM
                // element in an instance field (for example, this.textInput).
                return (
                  <div>
                    <h1>Click for focus</h1>
                    <hr />
                    <div>
                    React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

                    When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. For example, this code uses the ref callback to store a reference to a DOM node:
                    </div>
                    <br/>
                    <input type="text" value="no focus" className="form-control"/>
                    <br/>
                    <input
                      type="text"
                      ref={(input) => { this.textInput = input; }} className="form-control"/>
                      <br/>
                    <input
                      type="button"
                      value="Focus the text input"
                      onClick={this.focus}
                      className="btn btn-sm btn-primary"
                    />
                  </div>
                );
              }
            }

            export default CustomTextInput

The question concerns React Native, not React. The approach used here seems to be the same as in the answer posted before this one. — NiFi, Jun 16 '17 at 10:46

focus is not a function react native

2 Answers2