[TextInput] How to show "Done" button above "number-pad" keyboard?

[ranyefet]

Hello,

I'm trying to implement the following screen:

How can I get the bar above the keyboard to show up with "Done" button?

<TextInput
                style={styles.codeInput}
                placeholder="Enter Code"
                value={this.state.pinCode}
                keyboardType="number-pad"
                onChangeText={(code) => this.setState({pinCode: code})}
              />

[brentvatne]

@ranyefet - you could listen to keyboard events and set the position of your Done button accordingly when it opens: https://github.com/johanneslumpe/react-native-keyboardevents - there may be a more elegant way but this will work

[ide]

You want what's called the input accessory but it's not yet built yet.

[ranyefet]

@brentvatne @ide Thanks for the comments.
The reason why I wanted the "Done" button is because in the iOS Simulator I wasn't able to close the keypad by clicking anywhere on the screen. The only way to close the keypad was to hit Return on my mac keyboard.
I haven't tested it yet on a real device, so I'm not sure what will happen there.

Do you know If this is a bug with the simulator, or do I need to implement this functionality with code?

[ide]

You should implement/configure it in code. The keyboard is very manual on iOS. ScrollView has some prop that lets you auto-dismiss the keyboard that you might want to look into.

[auser]

I'm working on adding the inputAccessoryView on IOS. I'll update this issue when I have a PR.

[brentvatne]

Let's collapse this issue into #371

[henrikra]

@auser Are you still working on inputAccessoryView?

[gwendall]

+1

[kelset]

+1

[stief510]

+1

[kelset]

As a temporary workaround I found this lib which works pretty well, but forces you to have the separated files (ex. component.ios.js & component.android.ios) for the components which use it: https://github.com/DickyT/react-native-textinput-utils

[mileung]

I just made a keyboard dismissing component for number keyboard on iOS called DoneBar if anyone wants to give it a try.

[Burak07]

+1 still looking forward

[MobiusHorizons]

+1

[filipemonteiroth]

+1

[JasonHenson]

+1

[aldasvn]

+1

[Amir-Taboul]

+1

[rahulbats]

+1

[henrikra]

Here is implementation for this feature https://gist.github.com/chih/3aa8b3bbd490137a31f0b864eff1532e
Now we just need someone to make PR out of it :)

Here is also video on the implementation https://www.youtube.com/watch?v=RuzHai2RVZU

[lavarajallu]

in your textInput just u have pass this property
returnKeyType='done'

[henrikra]

@lavarajallu This does not work when using keyboardType="number-pad"

[jhalborg]

+1

[JasonHenson]

+1 this would be a great addition

[kitolog]

+1

[enstulen]

+1

[ptz3233]

+1

[bkdev98]

+1

[rskull]

+1

[dmr07]

+1

[luco]

Not a single PR yet?

[nntai]

+1

[irrigator]

+1

[jnrepo]

+1

[JohnProg]

+1

[beeant]

+1

[sakarit-zz]

+1

[AnisDerbel]

+1

[stief510]

Check out https://github.com/douglasjunior/react-native-keyboard-manager

[marcioadr88]

The "Done" button is always shown in english? The phone (simulator) lang is in spanish and the button should display as "Hecho". I have this issue only on iOS.

[NicholasBertazzon]

@marcioadr88 You need to add support for the localizations. See http://www.ibabbleon.com/iphone_app_localization.html

[marcioadr88]

It works, thanks @NicholasBertazzon

[renso3x]

Here you can add next also https://gist.github.com/renso3x/2939df594d8571ccfe23aa9bd70e96d7

[maryammouse]

+1

[celodauane]

+1

[KangYoosam]

+1

[savagesnake]

returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1

[w-]

+1

[w-]

+1

[TheMonster1995]

I have the same problem trying to show "Next" using return key type, and it just doesn't show. Any ideas? This problem only exists on numeric pad, or any other kind of keyboard that shows only the numbers - it works just fine with normal keyboard.

[PROudoxa]

Very nice story how to dismiss numpad keyboard!
https://medium.com/@KaushElsewhere/how-to-dismiss-keyboard-in-a-view-controller-of-ios-3b1bfe973ad1

[egemon]

Are there any native solutions for custom top bar for any type of keyboard?

[PROudoxa]

egedemon, i've seen your profile and i guess you are looking for JS solutions...I can't help you with JS.
But might be following way will be interesting for someone else - for ios(swift):

override func viewDidLoad() {
super.viewDidLoad()
//init toolbar
let toolbar:UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 30))
//create left side empty space so that done button set on right side
let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let doneBtn: UIBarButtonItem = UIBarButtonItem(title: “Done”, style: .done, target: self, action: Selector(“doneButtonAction”))
toolbar.setItems([flexSpace, doneBtn], animated: false)
toolbar.sizeToFit()
//setting toolbar as inputAccessoryView
self.textField1.inputAccessoryView = toolbar // add any textField
self.textField2.inputAccessoryView = toolbar // add your textField
}
func doneButtonAction() {
self.view.endEditing(true)
}
https://medium.com/@KaushElsewhere/how-to-dismiss-keyboard-in-a-view-controller-of-ios-3b1bfe973ad1