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
Related
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>
I'm using react-native-pell-rich-editor which is built upon the WebView component. As soon as I get to the bottom of the visible WebView (after typing about 20 lines) the text that I'm typing into the RichEditor is appearing below the visible area - so the text is being input, but I just can't see it! I have to scroll down every new line to see what I'm typing.
The KeyboardAvoidingView is pushing up my RichEditor (WebView) when the RichEditor is focused.
Is there a way to auto scroll down to where the cursor is when typing? Perhaps there is a better solution?
<ScrollView>
<KeyboardAvoidingView behavior={'padding'}>
<RichToolbar
actions={[ actions.keyboard, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.blockquote, actions.code, actions.alignCenter, actions.alignLeft, actions.alignRight ]}
editor={that.richText}/>
<RichEditor
initialContentHTML={messageBody}
initialFocus={true}
placeholder={'Compose email'}
ref={that.richText}/>
</KeyboardAvoidingView>
</ScrollView>
There are two parts to the way I solved this problem. I did not use KeyboardAvoidingView.
I also placed the RichEditor inside of a ScrollView, but called the ScrollView.scrollToEnd() method after the editor is initialized so that the cursor would be above the keyboard. This happens after a short timeout after calling RichEditor.focusContentEditor in editorInitializedCallback. Note: doing it this way means you do not need to use the initialFocus prop.
For moving the position while the user is typing, call ScrollView.scrollTo() in the ScrollView's onContentSizeChanged prop. You can use the dimension values that are passed to this prop's function to calculate how many pixels to scroll based on the previous dimensions and scroll position stored in the component state.
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 <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>
I am new to React Native. I have an app with a ScrollView component and several custom components inside it. I would like to trigger an onPressOut event from the ScrollView, so that when the user scrolls, and releases, the child components inside the ScrollView update their states. But, the ScrollView documentation does not include any press events: https://facebook.github.io/react-native/docs/scrollview.html
Other things I tried:
I tried wrapping the scrollview inside a TouchableWithoutFeedback component, when I do this, I get an error as soon as I try to scroll:
2015-10-26 11:59:13.849
[error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60]
Argument 0 (NSNumber) of RCTUIManager.measure must not be null
2015-10-26 11:59:13.850 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60]
Argument 0 () of RCTUIManager.measure could not be processed.
Aborting method call.
No idea what that means...
Any ideas? Thanks!
Here is my code:
<View ref="theWrapperView" style={styles.theWrapperView}>
<ScrollView
onScroll={this.onScroll.bind(this)}
onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContentContainer}
showsHorizontalScrollIndicator={true}
scrollEventThrottle={10}
pagingEnabled={true}
horizontal={true}
automaticallyAdjustContentInsets={false}
snapToAlignment={'center'}
snapToInterval={20}
zoomScale={1.5}
centerContent = {true}
>
{cards}
</ScrollView>
</View>
When I change the View element to a TouchableWithoutFeedback element is when I get the error.
I have figured this out after investigating the React Native source code: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js
As it turns out there are actually a number of other events available via the ScrollResponder mixin, that are not mentioned in the online documentation. It is not necessary to include the mixin to access these events, since they are already part of the ScrollView component. The one that was useful for me was onResponderRelease, which fires when you release the ScrollView, like so:
<View ref="theWrapperView" style={styles.theWrapperView}>
<ScrollView
onScroll={this.onScroll.bind(this)}
onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
onResponderRelease = {this.onResponderReleaseHandler.bind(this)}
>
{cards}
</ScrollView>
</View>
and in the class define a handler:
onResponderRelease(){
//do stuff
}
onTouchEnd will help you to get this
<ScrollView contentContainerStyle={{ paddingHorizontal: 22, top: -16 }}
onTouchEnd={(e) => {
//Here define your ScrollView Press Event
}}
>
{this.props.children}
</ScrollView>