React-native: Question: how show 'next' button in number-pad TextInput

[saimonventura]

I have a form with some TextInputs, someone of the are number-pad.
How can I show next button with number-pad keyboard?

DONE button works fine.

<TextInput keyboardType="number-pad" returnKeyType={ 'done' } />

NEXT button is not visible.

<TextInput keyboardType="number-pad" returnKeyType={ 'next' } />

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.

[stevenschmatz]

+1

[RuairiOliver]

Anyone find a solution to this?

[movie4]

(Platform.OS === 'ios') ? 'done' : 'next' — good spike 🥇

[jpamarohorta]

This still happens in 0.61.2 Is there a iOS reason for the "Next" not to appear?

[brunohkbx]

Any updates on this?

[gsevla]

(Platform.OS === 'ios') ? 'done' : 'next' — good spike 🥇

If you use formik, done as returnKeyType dispatch handleSubmit so done is not an option.

[rafaelbpa]

Why this is closed? Still a problem too me too in 0.61.5

[amirul-afk]

any solution for this? having this issue.. but closed?

[santiagomarcano]

Same problem here. Any solution??

[ssuzzi]

Simply add an InputAccessoryView and bind the next input focus event to a button inside that view

[MorenoMdz]

Simply add an InputAccessoryView and bind the next input focus event to a button inside that view

I am curious about this approach, could you share a code block example? Thanks

[MorenoMdz]

(Platform.OS === 'ios') ? 'done' : 'next' — good spike 🥇

If you use formik, done as returnKeyType dispatch handleSubmit so done is not an option.

Thats odd, I am trying to solve this and I am using Formik, had to create a whole class component just to hold my forms to be able to focus the next input as useRef was not working for me, and calling returnKeyType="done" in IOS goes to the next field for me, instead of submitting. I had to explicit set the last input to submit with onSubmitEditing={() => handleSubmit()}

<FormInput
  allowFontScaling={false}
  onChangeText={handleChange('redemptionsTotal')}
  onBlur={handleBlur('redemptionsTotal')}
  name="redemptionsTotal"
  value={values.redemptionsTotal}
  error={errors.redemptionsTotal}
  touched={touched.redemptionsTotal}
  placeholder="TOTAL"
  returnKeyType={Platform.OS === 'ios' ? 'done' : 'next'}
  blurOnSubmit={false}
  keyboardType="numeric"
  setInpRef={(inpRedeemTotal) => (this.inpRedeemTotal = inpRedeemTotal)}
  onSubmitEditing={() => this.inpRedeemUser.focus()}
  style={styles.inputShort}
/>;

[QueenTallicia69-cloud]

I have a form with some TextInputs, someone of the are number-pad.
How can I show next button with number-pad keyboard?

DONE button works fine.

<TextInput keyboardType="number-pad" returnKeyType={ 'done' } />

NEXT button is not visible.

<TextInput keyboardType="number-pad" returnKeyType={ 'next' } />