I have an animated component(Animation) which its sole purpose is to swipe its content left and right horizontally.
Inside my Animation component I have a few buttons as its children. See below:
<Animation onSwipeRight={backMonth} onSwipeLeft={advanceMonth}>
<Button onPress={select}/>
<Button onPress={select}/>
<Button onPress={select}/>
<Button onPress={select}/>
</Animation>
I realized that the button press takes preference, preventing the swipe animation to happen.
What I wanted to happen, is that on a longPress the pan responder would always swipe the buttons(even when I press one of them while trying to swipe), otherwise on quick button presses, each button individually would call its selection callback after I release my finger.
Related
I have a component which when the user long press a card I show a bigger version of this card.
The ideia is that the bigger card will be shown as long as the user keep pressing the touch and then will hide only when the finger is released (something like instagram long press). I tried to archieve this using the onLongPress and the onPressOut props of <TouchableHighlight>, the thing is that the onPressOut props has something that they call "cancel",
/**
* Called when the touch is released,
* but not if cancelled (e.g. by a scroll that steals the responder lock).
*/
What is happening is that when the user hold and move the finger the onPressOut prop is called, therefore the bigger card is hidden.
This is the code:
<View style={styles.container}>
<View style={styles.separator}>
<TouchableHighlight
underlayColor="rgba(255, 255, 255, 0)"
onPress={this.cardClick}
onLongPress={this.cardLongPress}
onPressOut={this.cardPressOut}
>
{this.content}
</TouchableHighlight>
</View>
</View>
Here is a GIF to show what is happening:
GIF
What I want is something that is only triggered when the user acctually releases his finger, regardless of whether or not he is moving the finger arround. Thanks in advance for the help.
Try setting an offset https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset , or convert your root view in a touchablewithoutfeedback, and call onPressOut there
So you want an Instagram style preview modal. I got you.
As mentioned in previous comments, you should use the pressRetentionOffset prop that will let you "extend" the pressable area. https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset
But! this prop will only work if the ScrollView is disabled. so you will need to disable the scrolling when the preview modal is shown.
You can do that with the scrollEnabled prop on ScrollView and make it falsy when the preview modal is shown.
Of course, this works with onLongPress and onPressOut props.
If I have data in a ScrollView, FlatList, or SectionList, and that data includes a button that the user can press on, tapping on the button once hides the Keyboard as expected:
onScroll={() => Keyboard.dismiss()}
but it does not trigger the button callback. It only works if you tap the same button a second time after the keyboard is hidden. Is there any way to fix this?
I figured out the answer from the docs, setting keyboardShouldPersistTaps="always"
I need to SHOW a view when scroll is started and HIDE a view when scroll is stopped.
To detect the scroll movement, there is two ways:
Called when the user begins to drag the scroll view.
onScrollBeginDrag={this.showView}
onScrollEndDrag={this.hideView}
Called when the momentum scroll starts and Ends
onMomentumScrollBegin={this.showView}
onMomentumScrollEnd={this.hideView}
Exptected Behaviour:
If continues scroll is happening, it should not hide the view even onScrollEndDrag is called and still show the view until onMomentumScrollEnd.
If continues scroll is not active, its should hide when onScrollEndDrag called
Actual Behaviour:
If continues scroll is happening, its hide the view when onScrollEndDrag is called and shows the view again until onMomentumScrollEnd. So in between view is disappeared and then its appears when drag released.
Call a debounced function in onScroll.
Debouncing will mean it is called at the end (or start) of a bunch of
events. More Info
// Debounce
this.ViewVisibility = lodash.debounce(this.ViewVisibility, 100);
onScroll={() => {
this.ViewVisibility();
}}
ViewVisibility = () => {
console.log('Debouncing');
this.hideView();
}
I am using the Modal component from react-native to creat a slide up menu for users to select. The issue with this is, if you wish to dim the background and animate with 'slide', it does this ugly thing of sliding a dimmed box up the screen, instead of dimming the whole background THEN sliding the view in.
So I tried to solve for this by using two Modals. One modal for the dark background to fade in and second modal to slide in with the menu with a transparent background.
This actually works, but when this.doneDayPicker changes the state of this.state.showModalDayPicker so both modals are no longer visible, <DarkModal> still appears. I'm left with <DarkModal> permanently on the screen.
What can I change to let <DarkModal> dissapear when this.state.showModalDayPicker is changed?
return (
<DarkModal visible={this.state.showModalDayPicker}>
<GoalModalScreen
visible={this.state.showModalDayPicker}
done={this.doneDayPicker}
title='Health benefits'
height={this.state.goalModalHeight}
>
{this.flatList()}
</GoalModalScreen>
</DarkModal>
);
Initially I would say this is because there is no done property on DarkModal like goalModalScreen?
Or use a Ternary Operator
{this.state.showModalDayPicker ? <DarkModal> : undefined}
You might also setup DarkModal's own toggle in state.
{this.state.toggleDarkModal ? <DarkModal> : undefined}
So i am adding the final touches to my application, and one bug that has been present for a while is when they keyboard is active, i am able to use the navigation on the upper half of the screen with the keyboard still showing
Is there a simple way to dismiss all other touches on the upper half of the screen when the keyboard is active? If you could point me in the right direction that would be great.
Looking for something similar to this: When keyboard active then touch screen anywhere, close keyboard
EDIT: would be nice if the textInput that the keyboard is outputting to was still touchable
If the parent view of the TextInput is a ScrollView, then u can use the prop 'keyboardShouldPersistTaps',
<ScrollView keyboardShouldPersistTaps='handled' />
If you're using a View and dont want scrolling, then probably u can wrap it inside a
//This should disable scroll
<ScrollView scrollEnabled={false} >
Documentation for keyboardShouldPersistTaps (React Native website)
keyboardShouldPersistTaps?: enum('always', 'never', 'handled', false,
true) #
Determines when the keyboard should stay visible after a tap.
'never' (the default), tapping outside of the focused text input when
the keyboard is up dismisses the keyboard. When this happens, children
won't receive the tap. 'always', the keyboard will not dismiss
automatically, and the scroll view will not catch taps, but children
of the scroll view can catch taps. 'handled', the keyboard will not
dismiss automatically when the tap was handled by a children, (or
captured by an ancestor). false, deprecated, use 'never' instead true,
deprecated, use 'always' instead