How do I get a React Native TextInput to maintain focus after submit?

Question

I could explain what I am trying to do, but this ReactJS example is a walkthrough of exactly what I want. The problem is I can't figure out what the equivelant would be for react native.

Basically, when I press return in the TextInput, I want the text cleared and focus maintained.

Any thoughts?

Deimos

Answer 1

I've submitted a PR with a blurOnSubmit property.

Set it to false and the TextInput never blurs, onSubmitEditing still fires though.

Hopefully it gets merged. :)

https://github.com/facebook/react-native/pull/2149

Chancemedley

Answer 2

I came out with following (working) solution:

var NameInput = React.createClass({
  getInitialState() {
    return {
      textValue: ''
    }
  },

  clearAndRetainFocus: function(evt, elem) {
    this.setState({textValue: elem.text});
    setTimeout(function() {
      this.setState({textValue: this.getInitialState().textValue});
      this.refs.Name.focus();
    }.bind(this), 0);
  },

  render() {
    return(
      <TextInput
        ref='Name'
        value={this.state.textValue}
        onEndEditing={this.clearAndRetainFocus} />
    )
  }
});

So, basically when we end editing, we will set the textValue state to the value of the TextInput and right after that (in setTimeout), we switch it back to default (empty) and retain focus on the element.

Alexisaley

This only works half the time. Increasing the timeout helps, but there has to be a solution that will always work. – Deimos

It is more reliable with the software keyboard, but the keyboard jumps closed then open. – Deimos

What about doing it on onSubmitEditing? – Waffle

Answer 3

I don't know how to trigger blurOnSubmit but if you do and it works you should do that. Another thing I found that works with a functional react component in a chat application i am making is this:

... import statments

const ChatInput = props => {
const textIn = React.useRef(null) //declare ref
useEffect(()=>textIn.current.focus()) //use effect to focus after it is updated

const textInputChanged = (text) =>{
    props.contentChanged(text);
}

const submitChat = () =>{
    const txt = props.content.trim()
    txt.length >0 ?  props.sendChat(txt, props.username) : null;
}

const keyPressEvent = (e) =>{
   return e.key == 'Enter'? submitChat() : null;
}

return (
     
        <TextInput 
        style={styles.textInput}
        keyboardType={props.keyboardType}
        autoCapitalize={props.autoCapitalize}
        autoCorrect={props.autoCorrect}
        secureTextEntry={props.secureTextEntry}
        value={props.content}
        onChangeText={textInputChanged}  
        onKeyPress={keyPressEvent}
        autoFocus={true}  //i don't think you need this since we are using useEffect
        ref={textIn} //make it so this is the ref
    />
   )}
... export default react-redux connect stuff

if you have more inputs you can probably do some sort of ref choosing logic in the useEffect hook

this is the article that helped me figure it out, it's almost the same thing: https://howtocreateapps.com/how-to-set-focus-on-an-input-element-in-react-using-hooks/

Bench

Answer 4

Just setTimeout 1 ms and it works great

import { useRef, useState } from 'react'
import { TextInput } from 'react-native'

export default () => {
  const inputRef = useRef(null)
  const [inputText, setInputText] = useState('')

  const handleSend = () => {
    console.log(inputText)
    setInputText('')

    setTimeout(() => {
      inputRef.current.focus()
    }, 1)
  }

  return (
    <TextInput
      ref={inputRef}
      value={inputText}
      returnKeyType='send'
      onChangeText={setInputText}
      onSubmitEditing={handleSend}
    />
  )
}

Dezhnev