I have a <TextInput> that I'd like to submit when I tap the red Post button, a <TouchableHighlight>. When the TextInput is focused, I finish typing and I tap on the Post button, the keyboard closes but the button doesn't register the tap.
I tried using the TextInput onBlur event, but It doesn't give me the coordinates of the touch point, so I don't know if the touch point is actually over the button or not.
You need to add the property keyboardShouldPersistTaps={true} to your ScrollView.
Here is what the docs say :
keyboardShouldPersistTaps bool:
When false, tapping outside of the focused text input when the
keyboard is up dismisses the keyboard. When true, the scroll view will
not catch taps, and the keyboard will not dismiss automatically. The
default value is false.
#frank, I imagine you found a workable solution, but in addition to the 'keyboardShouldPersistTaps', if you wrap your view in a TouchableWithoutFeedback element with an onPress that calls dismissKeyboard it should fix the issue.
<ScrollView keyboardShouldPersistTaps={true} ref='scrollView'>
<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View>
-View Content-
</View>
</TouchableWithoutFeedback>
</ScrollView>
Related
i'm using react-native-keyboard-aware-scroll-view for form, it is working but getting one issue..
scroll down to the last input and entered the text
scroll up to the top of the screen and clicked on dropdown
Actual Behavior
keyboard dismissed and it is scrolling to last unfocused text input box
it happens only when clicked on out of the text input box or any input like dropdown
or check button
Expected Behavior
need to dissmiss keyboard and not scroll to last unfocused text input
This is my code
<KeyboardAwareScrollView
extraScrollHeight={120}
contentContainerStyle={{flexGrow:1}}
keyboardShouldPersistTaps={'handled'}
keyboardOpeningTime={0}
bounces={false}
bouncesZoom={false}
enableResetScrollToCoords={true}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="automatic"
>
packages
react-native:0.64
react-native-keyboard-aware-scroll-view: "^0.9.4"
As per the screenshot below is what I want to achieve. Note the location of the Done button.
In React Native, we have the returnKeyType prop for textInput but that sets the value of the button at the bottom right.
I had a look at this package;
https://github.com/ardaogulcan/react-native-keyboard-accessory
Which does seem like it could work but don't know if there is a better way to do this.
Plus with the amount of input boxes, could take a while for me to refactor.
If you import Keyboard from react-native, then add this at the top of your code. Surround your code with DismissKeyboard so the keyboard will close when you click anywhere on the screen
const DismissKeyboard = ({children}) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>{children}</TouchableWithoutFeedback>
);
<DismissKeyboard> Code </DisissKeyboard>
Please help me with my problem. I have a long list of items, so I'm using ScrollView. But also I have Input field and using TouchableWithoutFeedback to make OnPress event to dismiss the keyboard, like that -
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View >
<HeaderMain/>
<ScrollView >
...
</ScrollView>
</View>
</TouchableWithoutFeedback>
And my problem is that scrolling doesn't work. What should I do to make scrolling and dismissing keyboard both work correctly?
I think you should be using keyboardShouldPersistTaps and/or keyboardDismissMode props from ScrollView.
You can read more about that in the docs:
https://facebook.github.io/react-native/docs/scrollview.html
I have a dialog box that appears and while closing keyboard with hideKeyboard(); all the form is closed and i get back to the home page so that i can't continue the scenario for filling other data.
Here the screen :
Just use UIScrollView in your dialog box, and set scroll view class TPKAScrollViewController. Download class
You can fill up the fields first using driver.sendkey() then tap on keyboard next button to switch the driver to the next field untill the last field. in last field you will get done button then you can tap on that button.
The default "strategy" of hideKeyboard(); is to tap outside the keyboard, but this can be changed to pressing a key on the keyboard instead.
See the java-client documentation (assuming you're using java-client?) for available hideKeyboard strategies: http://appium.github.io/java-client/io/appium/java_client/ios/IOSDeviceActionShortcuts.html
If your app's keyboard has for example a "Next" button to close the keyboard with, then you could use: driver.hideKeyboard("Next");
How do I show Keyboard for TextInput programmatically using react native? Using a ScrollView, tapping between TextInput causes the keyboard to be dismissed. I want to show the Keyboard again using onFocus method of TextInput. Anyway to accomplish this?
consider have a reference of your textInput :
<TextInput ref={(ref)=>{this.myTextInput = ref}} />
And when you have to focus it again use : this.myTextInput.focus()
edit React16
For react16 use React.createRef to create a reference.
Your ScrollView needs to include the keyboardShouldPersistTaps prop:
<ScrollView keyboardShouldPersistTaps></ScrollView>
Without ScrollView works only on ios.
Place this component around the code you need the keyboard to appear on:
<ScrollView keyboardShouldPersistTaps='always'>
</ScrollView>
link: https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps