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>
Related
I've been running into some issues with React Native's RefreshControl where it stays below the NavigationBar when it shouldn't. Apparently, there's something fixed on it that is preventing it from working with ScrollViews that are partly occluded by another view (in this case, a NavigationBar). My list looks as follows
return (
<FlatList
// refreshing={refreshing}
// onRefresh={fetch}
refreshControl={
<RefreshControl
onRefresh={fetch}
style={{
backgroundColor: '#ffff00',
}}
refreshing={refreshing}
colors={['#ffffff']}
tintColor={'#ff00ff'}
/>
}
style={{backgroundColor: '#000000'}}
contentInsetAdjustmentBehavior="automatic"
automaticallyAdjustsScrollIndicatorInsets={true}
indicatorStyle="white"
scrollIndicatorInsets={{
bottom: insets.bottom,
}}
contentContainerStyle={{
paddingBottom: insets.bottom,
}}
data={posts}
renderItem={item => <Item [...]/>}
/> );
My main question is: where could this additional be possibly coming from? I have exhausted my options as to what it could be.
Already tried settings translate, position, margin (on the refresh control), to no avail.
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
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
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>