Native navigation library for React Native applications
mkonicek/nlp 26
Simple experiments with word embeddings
mkonicek/AppTemplateFeedback 17
Please use issues on this repo to give feedback about the new React Native app template
knowbody/react-native-release-notes 6
Script to generate a draft of release notes for React Native
Firefox extension for reading and chatting in foreign languages.
task to daily find & close open stale github issues
Distributed raytracer.
mkonicek/react-native-login-animated 2
simple app for animated from other scence
pull request commentsoftware-mansion/react-native-gesture-handler
could you please take a look at this @jakub-gonet ? thanks ❤️
comment created time in 10 hours
issue commentsoftware-mansion/react-native-gesture-handler
Implement maxDistFromEdge to only activate PanGestureHandler if user swipes from screen edge
I'm working on minDistFromEdge
here: https://github.com/software-mansion/react-native-gesture-handler/pull/1310
comment created time in 10 hours
PR opened software-mansion/react-native-gesture-handler
Description
This PR implements a new feature for the PanGestureHandler
:
minDistFromEdge
: A prop that specifies how far away from the view's edges the touch has to be so the gesture handler activates.
Test plan
- I've used the prop and verified that it doesn't activate if I start within 20px from the right edge, otherwise it activates:
<PanGestureHandler minDistFromEdge={{ top: 0, left: 0, bottom: 0, right: 20 }} />
- I've removed the prop and verified that no side effects were introduced
pr created time in 10 hours
issue openedsoftware-mansion/react-native-gesture-handler
Implement maxDistFromEdge to only activate PanGestureHandler if user swipes from screen edge
Description
We're developing an app which has a similar layout as Snapchat: A horizontal tab view which contains 5 views where the user can swipe between to switch views.
Notice how there is a map on the first (left) screen. Since the map also has a pan gesture handler, we have overlapping gesture handlers. (Horizontal swipe gesture for navigating screens).
Snapchat solves this quite elegantly, by only allowing a horizontal swipe gesture if the user started the gesture from the right screen edge, everything else is a map pan gesture, which we're also trying to achieve.
Unfortunately, this is currently not possible, since the map (react-native-maps or mapbox-gl) uses native UIPanGestureRecognizer
s and we have no way of interacting with those handlers using the RNGH API - meaning it is unpredictable which gesture handler picks up the gesture.
https://user-images.githubusercontent.com/15199031/105031667-ea075080-5a55-11eb-9ff5-b87a3d3d29f0.mov
I've given this some thought on how we could possibly implement this feature, and came up with the following solutions (ordered from best to worst imo):
- Create a
maxDistFromEdge
property for<PanGestureHandler>
s, which only activates the handler if the user started the gesture from within{maxDistFromEdge}
px the view bounds. So if we set said property to20
, the<PanGestureHandler>
only activates if the user started the gesture from within20
px or less of the view's (screen's) left, top, right or bottom bounds. Ideally we want this to be an object, so you can for example specify:<PanGestureHandler maxDistFromEdge={{ left: 0, top: 0, right: 20, bottom: 0 }} />
- Edit the map view native module to give the native
UIPanGestureRecognizer
a margin-right of20
px so it doesn't trigger if the user starts the gesture from within 20px of the right screen border, and then we somehow create a ref and pass that to the horizontal swipe gesture<PanGestureHandler>
'swaitFor
prop. (not very flexible) - Edit the map view native module to give the native
UIPanGestureRecognizer
a margin-right of20
px, and edit our horizontal swiper setup to give the<PanGestureHandler>
a margin left ofSCREEN_WIDTH - 20
, so they don't visually overlap (bad and ugly idea)
For solution 1 (my fav), this answer on stackoverflow shows how easy this would be implemented on iOS.
I'd love to hear some opinions here, cc @jakub-gonet @kmagiera @osdnk . If you have better and simpler ideas, I'd love to hear 'em. If not, I could start implementing the maxDistFromEdge
property on iOS, but I'll need some help for the android side.
created time in 12 hours
issue commentsoftware-mansion/react-native-gesture-handler
Increasing hitSlop does not increase touch area
Any news about this issue?
comment created time in 15 hours
issue commentsoftware-mansion/react-native-gesture-handler
dont recognize gesture event map view (react-native-maps) Android
@jakub-gonet maybe not directly related to the issue, but I'm having problems with using a <PanGestureHandler>
over a map.
The idea is to provide the Snapchat look and feel, where you have horizontal views in which you can swipe between. One of the views is a map, which obviously also has a pan gesture handler to enable panning on the map.
Now I'm trying to define an "area of activation", aka I want the horizontal view <PanGesturerHandler>
to only activate if it has been started from the edge of the screen, otherwise ignore the gesture and let the map's pan gesture handler handle it.
Is this possible with RNGH, or do I have to tweak the native map gesture handlers?
comment created time in 15 hours
issue commentsoftware-mansion/react-native-gesture-handler
Cannot read property 'Direction' of undefined
Actually, managed to get the Jest issue working myself. Pretty straight-forward. Just include the following line in your jest setup (or in the offending file)
import 'react-native-gesture-handler/jestSetup';
comment created time in a day
issue commentsoftware-mansion/react-native-gesture-handler
Cannot read property 'Direction' of undefined
@pke did you ever manage to solve the issue? Running into it as well
comment created time in 2 days
Pull request review commentsoftware-mansion/react-native-gesture-handler
import { DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps, FlatList as RNFlatList, FlatListProps as RNFlatListProps,+ FlatListProps,
Why import it 2 times?
comment created time in 2 days
PR opened software-mansion/react-native-gesture-handler
Description
When registering rnn components that are wrapped in providers, the third param needs to provide the concrete component. See https://wix.github.io/react-native-navigation/api/component#registercomponent
pr created time in 2 days
PR opened software-mansion/react-native-gesture-handler
proposing changes such as X axis to X-axis with a dash as its a more commonly used way to represent the concept. multi touch -> multi-touch for the same reason as well as other small grammatical changes
pr created time in 4 days
issue commentsoftware-mansion/react-native-gesture-handler
setting coverSreen={false} on modal works. But need my modal cover the screen
comment created time in 5 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
Don't use enabled, instead edit your onGesture/onHandlerStateChange to do (or not) your logic.
And put back simultaneousHandlers={scrollRef}
so the scrollview can work too.
I have some minor perf issue with my solution that involve a state but I will try to publish something when this is sorted out.
I was shocked to not be able to find such a trivial problem: sortable list inside a scrollview that can be sorted with just tiny handle (very common thing on sortable list)...
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
@MoOx I see, how d you set the state and have the PanGestureHandler activate without the user "lifting" the finger? I tried with the below, the problem is that the state correctly flips to true and activates the PanGestureHandler but only after I "lift" my finger and basically stop the LongPressGestureHandler.
Snippet (note the enabled on PanGestureHandler and the onGestureEvent state flipping active to true):
<PanGestureHandler
ref={panRef}
enabled={active}
waitFor={longPressRef}
onHandlerStateChange={({ nativeEvent }) =>
console.log("PANGESTURE ", nativeEvent.state)
}
{...{ onGestureEvent }}
>
<Animated.View>
<LongPressGestureHandler
ref={longPressRef}
minDurationMs={1000}
maxDist={10}
onGestureEvent={() => setActive(true)}
onHandlerStateChange={({ nativeEvent }) => {
console.log("LONG PRESS", nativeEvent.state);
console.log("LONG PRESS, PAN GESTURE SHOULD NOW ACTIVATE");
}}
>
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
Nested Pan / LongPressGestureHandlers with different behavior Android / iOS
Same kind of problem here. Not sure if that's related to a LongPress nested into a Pan, but I have to listen for BEGIN on Android and ACTIVE for iOS to have something similar on both platform...
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
Actually I said something wrong: in my case I don't use waitFor on the Pan, because I just cannot (I have multiple LongPress and I don't know the one I should for until you press it... so I use a state to say "go for it" that I use in my onGestureHandler before doing my stuff.
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
@MoOx hmm, damn it just doesn't work for me. Once LongPressGestureHandler activates, then the PanGestureHandler deactivates and stops working. Somehow the PanGestureHandler also activates before LongPressGestureHandler (i.e. ignores waitFor). It is so weird...
This is the code I am using now, replicating what you just detailed out.
import React from "react";
import { View, Image } from "react-native";
import {
PanGestureHandler,
LongPressGestureHandler,
ScrollView,
} from "react-native-gesture-handler";
import Animated, {
useAnimatedStyle,
useAnimatedGestureHandler,
useSharedValue,
} from "react-native-reanimated";
export default function App() {
const imageSize = 50;
const scrollRef = React.useRef(null);
const longPressRef = React.useRef(null);
const panRef = React.useRef(null);
const y = useSharedValue(0);
const x = useSharedValue(0);
const onGestureEvent = useAnimatedGestureHandler({
onStart: (event, ctx) => {
ctx.offsetX = x.value;
},
onActive: (event, ctx) => {
y.value = event.translationY;
x.value = event.translationX + ctx.offsetX;
},
});
const style = useAnimatedStyle(() => ({
position: "absolute",
top: 0,
left: 0,
width: imageSize,
height: imageSize,
transform: [{ translateX: x.value }, { translateY: y.value }],
}));
return (
<View
style={{
flex: 1,
paddingTop: 100,
height: 300,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
}}
>
<ScrollView
ref={scrollRef}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{ positon: "relative", height: imageSize, borderWidth: 1 }}
contentContainerStyle={{ width: imageSize * 3 }}
>
<PanGestureHandler
ref={panRef}
simultaneousHandlers={scrollRef}
waitFor={longPressRef}
onHandlerStateChange={({ nativeEvent }) =>
console.log("PANGESTURE ", nativeEvent.state)
}
{...{ onGestureEvent }}
>
<Animated.View>
<LongPressGestureHandler
ref={longPressRef}
minDurationMs={0}
simultaneousHandlers={panRef}
onHandlerStateChange={({ nativeEvent }) => {
console.log("LONG PRESS", nativeEvent.state);
console.log("LONG PRESS, PAN GESTURE SHOULD NOW ACTIVATE");
}}
>
<Animated.View
style={[
{
position: "absolute",
top: 0,
left: 0,
},
style,
]}
>
<Image
source={require("./assets/example.jpg")}
style={{ width: imageSize, height: imageSize }}
/>
</Animated.View>
</LongPressGestureHandler>
</Animated.View>
</PanGestureHandler>
</ScrollView>
</View>
);
}
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
ScrollView breaks RefreshControl on Android
Same here. I tried multiple times, and few of the times it worked. Is it the same with you that randomly it works?
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
Ok if I am correct here is what I got working:
- ScrollView should have a ref, passed to PanGestureHandler via simultaneousHandlers
- PanGestureHandler should have a ref, passed to LongPressGestureHandler via simultaneousHandlers
- LongPressGestureHandler should have a ref, passed to PanGestureHandler via waitFor
- (For faster feedback look during development, you can use
minDurationMs={0}
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
Try this patch 0b0fabc It hasn't been released yet.
hmm, no difference for me. i applied it and restarted with expo start -c
to clear cache...
comment created time in 6 days
Pull request review commentsoftware-mansion/react-native-gesture-handler
-/* eslint-disable eslint-comments/no-unlimited-disable */-/* eslint-disable */-// @ts-nocheck TODO(TS) provide types import React from 'react';-import ReactNative from 'react-native';+import {+ ScrollView as RNScrollView,+ ScrollViewProps as RNScrollViewProps,+ Switch as RNSwitch,+ SwitchProps as RNSwitchProps,+ TextInput as RNTextInput,+ TextInputProps as RNTextInputProps,+ DrawerLayoutAndroid as RNDrawerLayoutAndroid,+ DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,+ FlatList as RNFlatList,+ FlatListProps as RNFlatListProps,+ FlatListProps,+} from 'react-native'; import createNativeWrapper from '../handlers/createNativeWrapper'; -const MEMOIZED = new WeakMap();+import { NativeViewGestureHandlerProperties } from '../handlers/NativeViewGestureHandler'; -function memoizeWrap(Component, config) {- if (Component == null) {- return null;- }+const MEMOIZED = new WeakMap<+ React.ComponentType<any>,+ React.ForwardRefExoticComponent<any>+>();++function memoizeWrap<P>(+ Component: React.ComponentType<P>,+ config?: Readonly<NativeViewGestureHandlerProperties>+): React.ComponentType<+ P & NativeViewGestureHandlerProperties & React.RefAttributes<any>+> { let memoized = MEMOIZED.get(Component); if (!memoized) {- memoized = createNativeWrapper(Component, config);+ memoized = createNativeWrapper<P>(Component, config); MEMOIZED.set(Component, memoized); } return memoized; } -module.exports = {+const GestureComponentWrappers = { /* RN's components */ get ScrollView() {- return memoizeWrap(ReactNative.ScrollView, {+ return memoizeWrap<RNScrollViewProps>(RNScrollView, { disallowInterruption: true, shouldCancelWhenOutside: false, }); }, get Switch() {- return memoizeWrap(ReactNative.Switch, {+ return memoizeWrap<RNSwitchProps>(RNSwitch, { shouldCancelWhenOutside: false, shouldActivateOnStart: true, disallowInterruption: true, }); }, get TextInput() {- return memoizeWrap(ReactNative.TextInput);+ return memoizeWrap<RNTextInputProps>(RNTextInput); }, get DrawerLayoutAndroid() {- const DrawerLayoutAndroid = memoizeWrap(ReactNative.DrawerLayoutAndroid, {- disallowInterruption: true,- });- DrawerLayoutAndroid.positions = ReactNative.DrawerLayoutAndroid.positions;+ const DrawerLayoutAndroid = memoizeWrap<RNDrawerLayoutAndroidProps>(+ RNDrawerLayoutAndroid,+ {+ disallowInterruption: true,+ }+ );+ // we use literal object since TS gives error when using RN's `positions`+ // @ts-ignore FIXME(TS) maybe this should be removed?+ DrawerLayoutAndroid.positions = { Left: 'left', Right: 'right' }; return DrawerLayoutAndroid; },- get FlatList() {- if (!MEMOIZED.FlatList) {++ // @ts-ignore xddddd
This was added in WIP commit, will be fixed 😄
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
Try this patch https://github.com/software-mansion/react-native-gesture-handler/commit/0b0fabc96da1d585a740da6476123ecd74a22fec It hasn't been released yet.
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
That's exactly what I'm trying to do, I don't need the Scrollview to be active while dragging. Only when they have not activated / are in use...
I'm confused what I'm doing wrong, I tried nesting them in the reverse order too and all sort of combination of waitFor but can't get it to work.
Sent from ProtonMail mobile
-------- Original Message -------- On 13 Jan 2021, 17:45, Max Thirouin wrote:
I can't say I have a thing totally working because my setup is a bit more complex but I have a working PanGestureHandler (a list) with multiple nested LongPressGestureHandler (manual handles to star dragging) - but in my situation, I can't have the ScrollView to be usable when you are trying to scroll from the PanGestureHandler are. I tried various waitFor/simultaneousHandlers but I don't have a fully working example yet.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
I can't say I have a thing totally working because my setup is a bit more complex but I have a working PanGestureHandler (a list) with multiple nested LongPressGestureHandler (manual handles to star dragging) - but in my situation, I can't have the ScrollView to be usable when you are trying to scroll from the PanGestureHandler are. I tried various waitFor/simultaneousHandlers but I don't have a fully working example yet.
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
@MoOx thanks for the reply and having a look! Did you get it to work?
I tried with your edits in my local test environment (as mentioned in the bug report, steps to reproduce), and it still does not work with useRef instead of createRef.
comment created time in 6 days
issue commentsoftware-mansion/react-native-gesture-handler
waitFor and simultaneousHandlers do not work with LongPressGestureHandler and PanGestureHandler
First thing I see: you need to use useRef (hook, for function) instead of createRef (imperative, for class).
comment created time in 6 days
Pull request review commentsoftware-mansion/react-native-gesture-handler
export default class GenericTouchable extends Component { // handleGoToUndetermined transits to UNDETERMINED state with proper delay handleGoToUndetermined() {- clearTimeout(this.pressOutTimeout);+ clearTimeout(this.pressOutTimeout!); // TODO: maybe it can be undefined
Not sure if that syntax will be enough. Maybe if statement is necessary
comment created time in 6 days
Pull request review commentsoftware-mansion/react-native-gesture-handler
export default class GenericTouchable extends Component { // handleGoToUndetermined transits to UNDETERMINED state with proper delay handleGoToUndetermined() {- clearTimeout(this.pressOutTimeout);+ clearTimeout(this.pressOutTimeout!); // TODO: maybe it can be undefined
Maybe you can call it only when there is need to do so.
this.pressOutTimeout && clearTimeout(this.pressOutTimeout);
comment created time in 6 days
Pull request review commentsoftware-mansion/react-native-gesture-handler
import PropTypes from 'prop-types'; * travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition * finishes in UNDETERMINED state. */-export const TOUCHABLE_STATE = {+export const TOUCHABLE_STATE: Record<string, TouchableStateValuesType> = { UNDETERMINED: 0, BEGAN: 1, MOVED_OUTSIDE: 2, }; -const PublicPropTypes = {+type TouchableStateValuesType = 0 | 1 | 2;++export interface GenericTouchableProps extends TouchableWithoutFeedbackProps { // Decided to drop not used fields from RN's implementation.- // e.g. onBlur and onFocus as well as deprecated props.- accessible: PropTypes.bool,- accessibilityLabel: PropTypes.node,- accessibilityHint: PropTypes.string,- hitSlop: PropTypes.shape({- top: PropTypes.number,- left: PropTypes.number,- bottom: PropTypes.number,- right: PropTypes.number,- }),- disabled: PropTypes.bool,- onPress: PropTypes.func,- onPressIn: PropTypes.func,- onPressOut: PropTypes.func,- onLayout: PropTypes.func,- onLongPress: PropTypes.func,- nativeID: PropTypes.string,- testID: PropTypes.string,- delayPressIn: PropTypes.number,- delayPressOut: PropTypes.number,- delayLongPress: PropTypes.number,- shouldActivateOnStart: PropTypes.bool,- disallowInterruption: PropTypes.bool,-};+ // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
If it seems not useful for you maybe we should delete it? If someone will spot there's something missing, git history for that file is up for exploration. For others, I think it might be just noise. Let me know what you think
comment created time in 6 days