profile
viewpoint
Martin Konicek mkonicek Synthace London, UK https://stackoverflow.com/users/90998/martin-konicek Software engineer based in London, previously worked on React Native.

airbnb/native-navigation 3131

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

mkonicek/fasttranslate 2

Firefox extension for reading and chatting in foreign languages.

mkonicek/iceboxer 2

task to daily find & close open stale github issues

mkonicek/raytracer 2

Distributed raytracer.

mkonicek/react-native-login-animated 2

simple app for animated from other scence

pull request commentsoftware-mansion/react-native-gesture-handler

Feature: minDistFromEdge

could you please take a look at this @jakub-gonet ? thanks ❤️

mrousavy

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

mrousavy

comment created time in 10 hours

PR opened software-mansion/react-native-gesture-handler

WIP: Feature: minDistFromEdge

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
+36 -9

0 comment

6 changed files

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 UIPanGestureRecognizers 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):

  1. 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 to 20, the <PanGestureHandler> only activates if the user started the gesture from within 20px 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 }} />
    
  2. Edit the map view native module to give the native UIPanGestureRecognizer a margin-right of 20px 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>'s waitFor prop. (not very flexible)
  3. Edit the map view native module to give the native UIPanGestureRecognizer a margin-right of 20px, and edit our horizontal swiper setup to give the <PanGestureHandler> a margin left of SCREEN_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?

LouiseBC

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?

windhelm

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';
ajboxjr

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

ajboxjr

comment created time in 2 days

Pull request review commentsoftware-mansion/react-native-gesture-handler

Add TS types to the files

 import {   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,   FlatList as RNFlatList,   FlatListProps as RNFlatListProps,+  FlatListProps,

Why import it 2 times?

jakub-gonet

comment created time in 2 days

PR opened software-mansion/react-native-gesture-handler

Update getting started rnn code example

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

+9 -6

0 comment

1 changed file

pr created time in 2 days

PR opened software-mansion/react-native-gesture-handler

adjusting pan handler docs

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

+17 -17

0 comment

1 changed file

pr created time in 4 days

issue commentsoftware-mansion/react-native-gesture-handler

Doesn't work in a modal

setting coverSreen={false} on modal works. But need my modal cover the screen

martinezguillaume

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)...

Svarto

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");
              }}
            >
Svarto

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...

hardcodet

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.

Svarto

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>
  );
}
Svarto

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?

janicduplessis

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}
Svarto

comment created time in 6 days

fork romanb/trust-dns

A Rust based DNS client, server, and resolver

fork 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...

Svarto

comment created time in 6 days

Pull request review commentsoftware-mansion/react-native-gesture-handler

Add TS types to the files

-/* 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 😄

jakub-gonet

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.

Svarto

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.

Svarto

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.

Svarto

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.

Svarto

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).

Svarto

comment created time in 6 days

Pull request review commentsoftware-mansion/react-native-gesture-handler

Add TS types to the files

 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

jakub-gonet

comment created time in 6 days

Pull request review commentsoftware-mansion/react-native-gesture-handler

Add TS types to the files

 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);
jakub-gonet

comment created time in 6 days

Pull request review commentsoftware-mansion/react-native-gesture-handler

Add TS types to the files

 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

jakub-gonet

comment created time in 6 days

more