How to change the ios keyboard return button to next/done in an react ionic app?

I am trying to change the return button to a next/done button in my ionic react app. I am using it for a redux form and I have absolutely no idea if it's something i should be doing in the react code, or if it is in the swift code that is built in Xcode.

If someone can direct me to the correct place or a link that has it, that would be wonderful.

Solution

As of Chrome 77+ and iOS Safari 13.4+ you can use the enterkeyhint attribute.

This attribute was mentioned, among other things, in the following post from Ionic's blog: https://ionicframework.com/blog/keyboard-improvements-for-ionic-apps/

The enterkeyhint attribute allows developers to specify what type of action label or icon should be shown for the “Enter” key. Using enterkeyhint gives the user a preview of what will happen when they tap the “Enter” key. The value that should be specified here depends on the context of what the user is doing. For example, if the user is typing into a search box, developers should ensure that the input has enterkeyhint="search".

According to the HTML standard, the available values are:

enter: The user agent should present a cue for the operation 'enter', typically inserting a new line.
done: The user agent should present a cue for the operation 'done', typically meaning there is nothing more to input and the input method editor (IME) will be closed.
go: The user agent should present a cue for the operation 'go', typically meaning to take the user to the target of the text they typed.
next: The user agent should present a cue for the operation 'next', typically taking the user to the next field that will accept text.
previous: The user agent should present a cue for the operation 'previous', typically taking the user to the previous field that will accept text.
search: The user agent should present a cue for the operation 'search', typically taking the user to the results of searching for the text they have typed.
send: The user agent should present a cue for the operation 'send', typically delivering the text to its target.

You can see how each of those options would look like thanks to this amazing devsheet made by Stefan Judis

Here is an example of using enterkeyhint:

<ion-item>
  <ion-label>Message: </ion-label>
  <ion-input enterkeyhint="send"></ion-input>
</ion-item>