I'm trying to use a barcode reader in my app so I can fill a TextInput within using software keyboard.
The idea is to use something like this:
<TextInput
autoFocus={true}
onFocus={Keyboard.dismiss}
multiline={false}
onSubmitEditing={() => this.submitFunction()}
/>
It partialy works as I want, I can read the code and It's shown properly but onSubmitEditing is not called.
Does anyone knows how to hide keyboard on a TextView but mantain the focus so onSubmitEditing is called?
If keyboard isn't dismissed onSubmitEditing run as spected.
Related
I want to allow the user to touch anywhere on the screen to dismiss the keyboard, but still allow interaction with Buttons. My code looks something like:
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View>
<Button onPress={...} />
</View>
</TouchableWithoutFeedback>
Now, when I press on the button, the keyboard dimisses, but the button's onPress event doesn't fire. Is there a way to allow touchable components to respond while being wrapped in TouchableWithoutFeedback or a better way to dismiss the keyboard when touching the screen?
I need to give focus to a TextInput without having the keyboard to open, because I might have a physical keyboard connected to the device in my use case scenario and I might want to keep virtual keyboard enabled on Android.
The solution I thought to was to give autoFocus to the TextInput and, in the onFocus callback, dismiss the keyboard.
What happens, though, is that the TextInput loses focus too.
Is there any viable known solution?
<TextInput
onChangeText={text => setState(text)}
value={state}
autoFocus
onFocus={() => {
console.log('physicalKeyboard set?', isPhysicalKeyboard())
if (isPhysicalKeyboard()) Keyboard.dismiss()
}}
/>
As suggested in the accepted answer of this question, there is a new prop that can be set to achieve what I need, that is showSoftInputOnFocus.
So the code becomes like this
<TextInput
onChangeText={text => setState(text)}
value={state}
autoFocus
showSoftInputOnFocus={() => !isPhysicalKeyboard()}
/>
So I've been struggling with this on iOS: I want a multiline text input that allows adding a new line:
// Now there's a "return" button, that adds a new line, perfect!
<TextInput
multiline
numberOfLines={2}
/>
And at the same time I want a multiline text input with a return key, that dismisses the keyboard (so the user can continue scrolling down the screen to the submit CTA):
// Now there's a "done" button, that dismisses the keyboard, yay!
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
/>
However, I can't find a way how to combine these two. With other keyboard types (such as number) there is returnKey above the keyboard itself.
Is there a way to have multiline text input with both - new line button and keyboard dismiss key? Thanks!
Edit:
Expo snack: https://snack.expo.io/#mattz/77a2d1
In case anyone is still looking for the answer, I'm posting it here
You could add a wrapper (TouchableOpacity or Pressable) similar to the solution given by James, for the TextInput and dismiss the keyboard with an outside click.
import { TouchableOpacity, TextInput, Keyboard } from 'react-native';
<TouchableOpacity onPress={Keyboard.dismiss}>
<View>
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
....
/>
</View>
</TouchableOpacity>
You can create an InputAccessoryView with a "Done" Pressable that runs Keyboard.dismiss in it's onPress handler.
How do I call code or respond to events in my native application with React Native? Can anyone explain with an example?
I think Pedro has a great start. If it's a button, you do an onPress event. There are also events for things like text inputs.
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
You can also call functions as state changes just like regular React.js.
Do you have an example of something specific you were looking to accomplish?
Do you mean respond to events like when a user presses a button? If so check this section Handling Touches.
When a user presses a button you can handle this way:
<Button
onPress={() => { /* This function will be called when the button is pressed */ }}
/>
i am using number-pad keyboard in react-native, i want to hide the keyboard when click on done button,for that i want to add done button above the keyboard, is there any possibility like IOS apps to hide the keyboard, Any help much appreciated
I'm not sure if this is exactly what you want, but you can add a 'done' button to the keyboard using the prop returnKeyType.
E.g: returnKeyType={ 'done' }
More info here https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
returnKeyLabel - What is the text of the button.
onSubmitEditing - Click Action. Keyboard.dismiss here to dismiss the keyboard.
<TextInput
returnKeyLabel='Done'
returnKeyType='done'
onSubmitEditing={Keyboard.dismiss} />
Using React Native v.63 in 2021
If you just use the returnKeyType='done' it will automatically hide the keyboard
Notice you could also use your own function with onSubmitEditing={() => yourFunctionNameHere()}
This worked for me =>
<TextInput
style={styles.textBox}
maxLength={5}
placeholder="Enter Zip Code"
placeholderTextColor={'#6D7376'}
autoCompleteType="postal-code"
keyboardType="number-pad"
returnKeyType="done"
onChangeText={text => setZip(text)}
onSubmitEditing={() => yourFunctionNameHere()}
/>
here is the direct documentation
https://reactnative.dev/docs/textinput#returnkeytype
Natively the UITextField doesn't support returnKeyboardType when keyboardType="number-pad"
Custom keyboard development can help you.