React-native: [TextInput] How to show "Done" button above "number-pad" keyboard?
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})}
/>
ranyefet
All 53 comments
@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
brentvatne
on 7 May 2015
You want what's called the input accessory but it's not yet built yet.
ide
on 7 May 2015
@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?
ranyefet
on 8 May 2015
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.
ide
on 8 May 2015
I'm working on adding the inputAccessoryView on IOS. I'll update this issue when I have a PR.
auser
on 1 Jun 2015
Let's collapse this issue into #371
brentvatne
on 1 Jun 2015
@auser Are you still working on inputAccessoryView?
henrikra
on 19 Jan 2017
+1
gwendall
on 21 Jan 2017
+1
kelset
on 25 Jan 2017
+1
stief510
on 26 Jan 2017
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
kelset
on 27 Jan 2017
I just made a keyboard dismissing component for number keyboard on iOS called DoneBar if anyone wants to give it a try.
MiLeung
on 30 Jan 2017
+1 still looking forward
Burak07
on 22 Feb 2017
+1
MobiusHorizons
on 6 Mar 2017
+1
filipemonteiroth
on 12 Mar 2017
+1
JasonHenson
on 30 Mar 2017
+1
aldasvn
on 18 Apr 2017
+1
Amir-Taboul
on 22 Apr 2017
+1
rahulbats
on 25 Apr 2017
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
henrikra
on 25 Apr 2017
in your textInput just u have pass this property
returnKeyType='done'
lavarajallu
on 26 Apr 2017
@lavarajallu This does not work when using keyboardType="number-pad"
henrikra
on 26 Apr 2017
+1
jhalborg
on 10 May 2017
+1 this would be a great addition
JasonHenson
on 5 Jun 2017
+1
kitolog
on 12 Jun 2017
+1
enstulen
on 13 Jun 2017
+1
ptz3233
on 19 Jun 2017
+1
bkdev98
on 22 Jun 2017
+1
rskull
on 23 Jun 2017
+1
dmr07
on 24 Jun 2017
Not a single PR yet?
luco
on 25 Jun 2017
+1
nntai
on 27 Jun 2017
+1
irrigator
on 27 Jun 2017
+1
jnrepo
on 27 Jun 2017
+1
JohnProg
on 29 Jun 2017
+1
beeant
on 31 Jul 2017
+1
sakarit
on 16 Aug 2017
+1
AnisDerbel
on 28 Aug 2017
stief510
on 28 Aug 2017
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.
marcioadr88
on 28 Aug 2017
@marcioadr88 You need to add support for the localizations. See http://www.ibabbleon.com/iphone_app_localization.html
NicholasBertazzon
on 6 Sep 2017
It works, thanks @NicholasBertazzon
marcioadr88
on 8 Sep 2017
Here you can add next also https://gist.github.com/renso3x/2939df594d8571ccfe23aa9bd70e96d7
renso3x
on 22 Nov 2017
+1
maryammouse
on 5 Jan 2018
+1
dvuvne
on 9 Jan 2018
+1
KangYoosam
on 14 Jan 2018
returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1
savagesnake
on 25 Jan 2018
+1
w-
on 15 Feb 2018
+1
w-
on 28 Feb 2018
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.
TheMonster1995
on 8 Mar 2018
Very nice story how to dismiss numpad keyboard!
https://medium.com/@KaushElsewhere/how-to-dismiss-keyboard-in-a-view-controller-of-ios-3b1bfe973ad1
PROudoxa
on 20 Apr 2018
Are there any native solutions for custom top bar for any type of keyboard?
egemon
on 3 May 2018
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
PROudoxa
on 3 May 2018
Related issues
axelg12
·
3Comments
josev55
·
3Comments
arunabha
·
3Comments
WG-Com
·
3Comments
jobsamuel
·
3Comments
Most helpful comment
returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1