React Native How to select the next TextInput after pressing the next keyboard button

Question

I defined two TextInput fields as follows    lt TextInput     style    styles titleInput     returnKeyType     next      autoFocus    true     placeholder    Title    gt   lt TextInput    style    styles descriptionInput               multiline    true     maxLength    200     placeholder    Description    gt    But after pressing the  next  button on my keyboard  my react-native app isn t jumping to the second TextInput field  How can I achieve that   Thanks

User · Answer

Thought I would share my solution using a function component... 'this' not needed!

React 16.12.0 and React Native 0.61.5

Here is an example of my component:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

User · Answer

Try this solution on React Native s GitHub issues   https   github com facebook react-native pull 2149 issuecomment-129262565  You need to use the ref prop for the TextInput component  Then you need a create a function that gets called on onSubmitEditing prop that moves the focus on the second TextInput ref    var InputScreen   React createClass        focusNextField nextField            this refs nextField  focus               render  function             return                lt View style  styles container  gt                   lt TextInput                     ref  1                      style  styles input                      placeholder  Normal                      returnKeyType  next                      blurOnSubmit  false                      onSubmitEditing       gt  this  focusNextField  2                      gt                   lt TextInput                     ref  2                      style  styles input                      keyboardType  email-address                      placeholder  Email Address                      returnKeyType  next                      blurOnSubmit  false                      onSubmitEditing       gt  this  focusNextField  3                      gt                   lt TextInput                     ref  3                      style  styles input                      keyboardType  url                      placeholder  URL                      returnKeyType  next                      blurOnSubmit  false                      onSubmitEditing       gt  this  focusNextField  4                      gt                   lt TextInput                     ref  4                      style  styles input                      keyboardType  numeric                      placeholder  Numeric                      blurOnSubmit  false                      onSubmitEditing       gt  this  focusNextField  5                      gt                   lt TextInput                     ref  5                      style  styles input                      keyboardType  numbers-and-punctuation                      placeholder  Numbers  amp  Punctuation                      returnKeyType  done                    gt               lt  View gt

User · Answer

Using callback refs instead of the legacy string refs     lt TextInput     style    styles titleInput      returnKeyType     next       autoFocus    true      placeholder    Title      onSubmitEditing       gt   this nextInput focus       gt   lt TextInput     style    styles descriptionInput        multiline    true      maxLength    200      placeholder    Description      ref  nextInput   gt  this nextInput   nextInput    gt

User · Answer

in your component   constructor props            super props           this focusNextField   this              focusNextField              bind this              to store our input refs         this inputs                 focusNextField id            console log  focus next input      id           this              inputs id                root              focus            Note  I used   root because it is a ref to TextInput in NativeBase Library  Input  and in your text inputs like this   lt TextInput          onSubmitEditing       gt                              this focusNextField  two                                          returnKeyType  next           blurOnSubmit  false   gt     lt TextInput                ref  input   gt                  this inputs  two     input                              gt

User · Answer

lt TextInput      keyboardType  email-address      placeholder  Email      returnKeyType  next      ref  email      onSubmitEditing       gt  this focusTextInput this refs password       blurOnSubmit  false     gt   lt TextInput     ref  password      placeholder  Password       secureTextEntry  true    gt    And add method for onSubmitEditing       gt  this focusTextInput this refs password   as below   private focusTextInput node  any        node focus

User · Answer

As of React Native 0 36  calling focus    as suggested in several other answers  on a text input node isn t supported any more  Instead  you can use the TextInputState module from React Native  I created the following helper module to make this easier      TextInputManager       Provides helper functions for managing the focus state of text    inputs  This is a hack  You are supposed to be able to call     focus    directly on TextInput nodes  but that doesn t seem    to be working as of ReactNative 0 36    import   findNodeHandle   from  react-native  import TextInputState from  react-native lib TextInputState    export function focusTextInput node      try       TextInputState focusTextInput findNodeHandle node       catch e        console log  Couldn t focus text input     e message          You can  then  call the focusTextInput function on any  ref  of a TextInput  For example        lt TextInput onSubmit       gt  focusTextInput this refs inputB     gt   lt TextInput ref  inputB    gt

User · Answer

You can do this without using refs  This approach is preferred  since refs can lead to fragile code  The React docs advise finding other solutions where possible       If you have not programmed several apps with React  your first   inclination is usually going to be to try to use refs to  make things   happen  in your app  If this is the case  take a moment and think more   critically about where state should be owned in the component   hierarchy  Often  it becomes clear that the proper place to  own  that   state is at a higher level in the hierarchy  Placing the state there   often eliminates any desire to use refs to  make things happen        instead  the data flow will usually accomplish your goal    Instead  we ll use a state variable to focus the second input field    Add a state variable that we ll pass as a prop to the DescriptionInput   initialState       return       focusDescriptionInput  false          Define a handler method that will set this state variable to true   handleTitleInputSubmit       this setState focusDescriptionInput  true      Upon submitting   hitting enter   next on the TitleInput  we ll call handleTitleInputSubmit  This will set focusDescriptionInput to true    lt TextInput     style    styles titleInput     returnKeyType     next      autoFocus    true     placeholder    Title      onSubmitEditing  this handleTitleInputSubmit    gt   DescriptionInput s focus prop is set to our focusDescriptionInput state variable  So  when focusDescriptionInput changes  in step 3   DescriptionInput will re-render with focus  true     lt TextInput    style    styles descriptionInput               multiline    true     maxLength    200     placeholder    Description      focus  this state focusDescriptionInput    gt     This is a nice way to avoid using refs  since refs can lead to more fragile code     EDIT  h t to  LaneRettig for pointing out that you ll need to wrap the React Native TextInput with some added props  amp  methods to get it to respond to focus          Props      static propTypes              focus  PropTypes bool              static defaultProps              focus  false                 Methods      focus             this  component focus                 componentWillReceiveProps nextProps            const  focus    nextProps            focus  amp  amp  this focus

User · Answer

lt TextInput placeholder  Nombre      ref  1      editable  true      returnKeyType  next      underlineColorAndroid    4DB6AC       blurOnSubmit  false      value  this state First Name      onChangeText  First Name   gt  this setState   First Name         onSubmitEditing       gt  this focusNextField  2        placeholderTextColor   797a7a  style    marginBottom  10  color    808080   fontSize  15  width   100         gt    lt TextInput placeholder  Apellido      ref  2      editable  true      returnKeyType  next      underlineColorAndroid    4DB6AC       blurOnSubmit  false      value  this state Last Name      onChangeText  Last Name   gt  this setState   Last Name         onSubmitEditing       gt  this focusNextField  3        placeholderTextColor   797a7a  style    marginBottom  10  color    808080   fontSize  15  width   100         gt    and add method  focusNextField nextField        this refs nextField  focus

User · Answer

For the accepted solution to work if your TextInput is inside another component  you ll need to  pop  the reference from ref to the parent container      MyComponent render          lt View gt           lt TextInput ref   r    gt  this props onRef r        this props    gt       lt  View gt        MyView render          lt MyComponent onSubmitEditing   evt    gt  this myField2 focus     gt       lt MyComponent onRef   r    gt  this myField2   r   gt

User · Answer

There is a way to capture tabs in a TextInput  It s hacky  but better than nothing   Define an onChangeText handler that compares the new input value with the old  checking for a  t  If one is found  advance the field as shown by  boredgames  Assuming the variable username contains the value for the username and setUsername dispatches an action to change it in the store  component state  redux store  etc   do something like this   function tabGuard  newValue  oldValue  callback  nextCallback      if  newValue indexOf   t    gt   0  amp  amp  oldValue indexOf   t       -1        callback oldValue      nextCallback       else       callback newValue         class LoginScene     focusNextField    nextField    gt        this refs nextField  focus          focusOnPassword        gt        this focusNextField  password          handleUsernameChange    newValue    gt        const   username     this props               or from wherever     const   setUsername     this props actions    or from wherever      tabGuard newValue  username  setUsername  this focusOnPassword         render          const   username     this props      return          lt TextInput ref  username                   placeholder  Username                   autoCapitalize  none                   autoCorrect  false                   autoFocus                  keyboardType  email-address                   onChangeText  handleUsernameChange                   blurOnSubmit  false                   onSubmitEditing  focusOnPassword                   value  username    gt

User · Answer

import React    useState  useEffect  useRef    from  react    const OTP    props    gt           const OTP           const ref input           ref input 0    useRef        ref input 1    useRef        ref input 2    useRef        ref input 3    useRef         const focusNext    text  index    gt            if  index  lt  ref input length - 1  amp  amp  text                ref input index   1  current focus                      if  index    ref input length - 1                ref input index  current blur                      OTP index    text            const focusPrev    key  index    gt            if  key      quot Backspace quot   amp  amp  index     0                ref input index - 1  current focus                         return            lt SafeAreaView gt               lt View gt                                        lt ScrollView contentInsetAdjustmentBehavior  quot automatic quot  showsVerticalScrollIndicator  false  gt                           lt View style  loginScreenStyle titleWrap  gt                               lt Title style  loginScreenStyle titleHeading  gt Verify OTP lt  Title gt                               lt Subheading style  loginScreenStyle subTitle  gt Enter the 4 digit code sent to your mobile number lt  Subheading gt                           lt  View gt                           lt View style  loginScreenStyle inputContainer  gt                               lt TextInput                                 mode  quot flat quot                                  selectionColor  Colors primaryColor                                  underlineColorAndroid  quot transparent quot                                  textAlign  center                                  maxLength  1                                  keyboardType  numeric                                  style  formScreenStyle otpInputStyle                                  autoFocus  true                                  returnKeyType  quot next quot                                  ref  ref input 0                                   onChangeText  text   gt  focusNext text  0                                   onKeyPress  e   gt  focusPrev e nativeEvent key  0                                 gt                               lt TextInput                                 mode  quot flat quot                                  selectionColor  Colors primaryColor                                  underlineColorAndroid  quot transparent quot                                  textAlign  center                                  maxLength  1                                  keyboardType  numeric                                  style  formScreenStyle otpInputStyle                                  ref  ref input 1                                   onChangeText  text   gt  focusNext text  1                                   onKeyPress  e   gt  focusPrev e nativeEvent key  1                                 gt                               lt TextInput                                 mode  quot flat quot                                  selectionColor  Colors primaryColor                                  underlineColorAndroid  quot transparent quot                                  textAlign  center                                  maxLength  1                                  keyboardType  numeric                                  style  formScreenStyle otpInputStyle                                  ref  ref input 2                                   onChangeText  text   gt  focusNext text  2                                   onKeyPress  e   gt  focusPrev e nativeEvent key  2                                 gt                               lt TextInput                                 mode  quot flat quot                                  selectionColor  Colors primaryColor                                  underlineColorAndroid  quot transparent quot                                  textAlign  center                                  maxLength  1                                  keyboardType  numeric                                  style  formScreenStyle otpInputStyle                                  ref  ref input 3                                   onChangeText  text   gt  focusNext text  3                                   onKeyPress  e   gt  focusPrev e nativeEvent key  3                                 gt                            lt  View gt                       lt  ScrollView gt               lt  View gt           lt  SafeAreaView  gt           export default OTP

User · Answer

I created a small library that does this  no code change needed other than replacing your wrapping view and import of TextInput    import   Form  TextInput   from  react-native-autofocus   export default      gt       lt Form gt       lt TextInput placeholder  test    gt       lt TextInput placeholder  test 2    gt     lt  Form gt      https   github com zackify react-native-autofocus   Explained in detail here  https   zach codes autofocus-inputs-in-react-native

User · Answer

If you are using NativeBase as UI Components you can use this sample   lt Item floatingLabel gt       lt Label gt Title lt  Label gt       lt Input         returnKeyType     next           autoFocus    true          onSubmitEditing   event    gt                this  inputDesc  root focus                  gt   lt  Item gt   lt Item floatingLabel gt       lt Label gt Description lt  Label gt       lt Input         getRef   c    gt  this  inputDesc   c          multiline  true  style   height  100     gt          onSubmitEditing   event    gt    this  inputLink  root focus         gt   lt  Item gt

User · Answer

Set the second TextInput focus  when the previous TextInput s onSubmitEditing is triggered   Try this   Adding a Ref to second TextInput ref   input    gt    this secondTextInput   input     Bind focus function to first TextInput s onSubmitEditing event  onSubmitEditing       gt    this secondTextInput focus       Remember to set blurOnSubmit to false  to prevent keyboard flickering  blurOnSubmit  false       When all done  it should looks like this     lt TextInput     placeholder  FirstTextInput      returnKeyType  next      onSubmitEditing       gt    this secondTextInput focus           blurOnSubmit  false    gt    lt TextInput     ref   input    gt    this secondTextInput   input         placeholder  secondTextInput    gt

User · Answer

For me on RN 0 50 3 it s possible with this way    lt TextInput    autoFocus  true     onSubmitEditing       gt   this PasswordInputRef  root focus        gt    lt TextInput ref  input   gt   this PasswordInputRef   input     gt    You must see this PasswordInputRef  root focus

User · Answer

This is the way I achieved it  And the example below has used the React createRef   API introduced in React 16 3   class Test extends React Component     constructor props        super props       this secondTextInputRef   React createRef           render         return           lt View gt               lt TextInput                 placeholder    FirstTextInput                  returnKeyType  next                  onSubmitEditing       gt    this secondTextInputRef current focus                     gt               lt TextInput                 ref  this secondTextInputRef                  placeholder    secondTextInput                gt           lt  View gt                 I think this will help you

User · Answer

Here is how achieved this for reactjs phone code inputs import React    useState  useRef   from  react    function Header props       const  state   setState    useState           phone number  quot  quot           code one             code two             code three             code four             submitted false            const codeOneInput   useRef null      const codeTwoInput   useRef null      const codeThreeInput   useRef null      const codeFourInput   useRef null       const handleCodeChange    e    gt            const  id   value    e target         if value length  lt  2               setState prevState   gt                        prevState                   id    value                             if id   code one   amp  amp  value length  gt 0                   codeTwoInput current focus                              if id   code two    amp  amp  value length  gt 0                   codeThreeInput current focus                              if id   code three    amp  amp  value length  gt 0                   codeFourInput current focus                                       const sendCodeToServer        gt              setState prevState   gt                        prevState                  submitted   true                  let codeEnteredByUser   state code one   state code two   state code three   state code four          axios post API BASE URL   code codeEnteredByUser            then function  response                console log response                       return           lt  gt               lt div className  quot are quot  gt                    lt div className  quot POP-INN-INPUT quot  gt                                           lt input type  quot text quot  id  quot code one quot  ref  codeOneInput     value  state code one   onChange  handleCodeChange  autoFocus  gt                                           lt input type  quot text quot  id  quot code two quot   ref  codeTwoInput   value  state code two  onChange  handleCodeChange   gt                                           lt input type  quot text quot  id  quot code three quot   ref  codeThreeInput  value  state code three   onChange  handleCodeChange   gt                                           lt input type  quot text quot  id  quot code four quot  ref  codeFourInput   value  state code four   onChange  handleCodeChange   gt                                       lt  div gt                lt button disabled  state submitted  onClick  sendCodeToServer  gt           lt  div gt           lt   gt          export default

User · Answer

My scenario is  lt  CustomBoladonesTextInput    wrapping a RN  lt  TextInput      I solved this issue as follow   My form looks like      lt CustomBoladonesTextInput        onSubmitEditing       gt  this customInput2 refs innerTextInput2 focus          returnKeyType  next              gt      lt CustomBoladonesTextInput         ref  ref   gt  this customInput2   ref         refInner  innerTextInput2               gt    On CustomBoladonesTextInput s component definition  I pass the refField to the inner  ref prop like this      export default class CustomBoladonesTextInput extends React Component         render                      return   lt  TextInput ref  this props refInner        gt                         And voila  Everything get back works again   Hope this helps

User · Answer

Really annoying that RN doesn t have some sort of Tabindex system  A functional component  for my use case  I have an array of string IDs for inputs which I iterate through and show one text input each  The following code will automatically jump the user through all of them  stopping the keyboard from disappearing reappearing between fields and dismissing it at the end  also showing the appropriate  quot action quot  button on the keyboard  Typescript  Native Base   x000D   x000D  const stringFieldIDs        q1    q2    q3      export default      gt      const stringFieldRefs   stringFieldIDs map      gt  useRef  lt  any  gt          const basicStringField    id  string  ind  number    gt        const posInd   stringFieldIDs indexOf id       const isLast   posInd     stringFieldIDs length - 1       return    lt        Input blurOnSubmit             isLast               ref             stringFieldRefs posInd                returnKeyType             isLast    done     next                onSubmitEditing             isLast           undefined                  gt  stringFieldRefs posInd   1  current  root focus                   gt                 return stringFieldIDs map basicStringField      x000D   x000D   x000D

User · Answer

If you happen to be using tcomb-form-native as I am  you can do this  too  Here s the trick  instead of setting the props of the TextInput directly  you do it via options  You can refer to the fields of the form as   this refs form getComponent  password   refs input focus     So the final product looks something like this   var t   require  tcomb-form-native    var Form   t form Form   var MyForm   t struct     field1      t String    field2      t String       var MyComponent   React createClass       getFormOptions          return         fields            field1              returnKeyType   next             onSubmitEditing       gt   this refs form getComponent  field2   refs input focus                                        render           var formOptions   this  getFormOptions         return          lt View style  styles container  gt           lt Form ref  form  type  MyForm  options  formOptions   gt         lt  View gt                     Credit to remcoanker for posting the idea here  https   github com gcanti tcomb-form-native issues 96

User · Answer

Using react-native 0 45 1 I also encountered problems trying to set focus on a password TextInput after pressing return key on a username TextInput    After having tried most of the top rated solutions here on SO I found a solution on github that fulfilled my needs  https   github com shoutem ui issues 44 issuecomment-290724642  To sum it up   import React    Component   from  react   import   TextInput as RNTextInput   from  react-native    export default class TextInput extends Component       render             const   props     this           return                lt RNTextInput                     props                  ref   input    gt  props inputRef  amp  amp  props inputRef input                 gt                       And then I use it like this   import React   Component  from  react   import       View    from  react-native   import TextInput from        components TextInput    class Login extends Component       constructor props            super props           this passTextInput   null            render             return                lt View style   flex 1   gt                   lt TextInput                     style   flex 1                       placeholder  Username                      onSubmitEditing   event    gt                            this passTextInput focus                                            gt                    lt TextInput                     style   flex 1                       placeholder  Password                      inputRef   input    gt                            this passTextInput   input                                          gt               lt  View gt

User · Answer

Here a reagent solution for a input component that has a  focus property   The field will be focused as long as this prop is set to true and will not have focus as long as this is false   Unfortunately this component needs to have a  ref defined  I could not find an other way to call  focus   on it  I am happy about suggestions    defn focusable-input  init-attrs     r create-class       display-name  focusable-input        component-will-receive-props         fn  this new-argv            let  ref-c  aget this  refs    ref init-attrs                  focus   focus  ru extract-props new-argv                  is-focused   isFocused ref-c               if focus               when-not is-focused   focus ref-c                 when is-focused   blur ref-c            reagent-render         fn  attrs            let  init-focus   focus init-attrs                 auto-focus  or   auto-focus attrs  init-focus                 attrs  assoc attrs  auto-focus auto-focus               input attrs         https   gist github com Knotschi 6f97efe89681ac149113ddec4c396cc5

[ios] React Native: How to select the next TextInput after pressing the "next" keyboard button?

Examples related to ios

Examples related to react-native