react-native-gesture-handler - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

createNativeWrapper.js

@@ -5,4 +5,2 @@ import React from 'react';
 
-const NATIVE_WRAPPER_BIND_BLACKLIST = new Set(['replaceState', 'isMounted']);
-
 /*
@@ -37,52 +35,26 @@ * This array should consist of:
 export default function createNativeWrapper(Component, config = {}) {
-  class ComponentWrapper extends React.Component {
-    static propTypes = {
-      ...Component.propTypes,
-    };
+  const ComponentWrapper = React.forwardRef((props, ref) => {
+    // filter out props that should be passed to gesture handler wrapper
+    const gestureHandlerProps = Object.keys(props).reduce(
+      (res, key) => {
+        if (NATIVE_WRAPPER_PROPS_FILTER.indexOf(key) !== -1) {
+          res[key] = props[key];
+        }
+        return res;
+      },
+      { ...config } // watch out not to modify config
+    );
+    return (
+      <NativeViewGestureHandler {...gestureHandlerProps}>
+        <Component {...props} ref={ref} />
+      </NativeViewGestureHandler>
+    );
+  });
 
-    static displayName = Component.displayName || 'ComponentWrapper';
+  ComponentWrapper.propTypes = {
+    ...Component.propTypes,
+  };
+  ComponentWrapper.displayName = Component.displayName || 'ComponentWrapper';
 
-    _refHandler = node => {
-      // bind native component's methods
-      let source = node;
-      while (source != null) {
-        for (let methodName of Object.getOwnPropertyNames(source)) {
-          if (
-            !methodName.startsWith('_') && // private methods
-            !methodName.startsWith('component') && // lifecycle methods
-            !NATIVE_WRAPPER_BIND_BLACKLIST.has(methodName) && // other
-            typeof source[methodName] === 'function' &&
-            this[methodName] === undefined
-          ) {
-            if (source[methodName].prototype) {
-              // determine if it's not bound already
-              this[methodName] = source[methodName].bind(node);
-            } else {
-              this[methodName] = source[methodName];
-            }
-          }
-        }
-        source = Object.getPrototypeOf(source);
-      }
-    };
-
-    render() {
-      // filter out props that should be passed to gesture handler wrapper
-      const gestureHandlerProps = Object.keys(this.props).reduce(
-        (props, key) => {
-          if (NATIVE_WRAPPER_PROPS_FILTER.indexOf(key) !== -1) {
-            props[key] = this.props[key];
-          }
-          return props;
-        },
-        { ...config } // watch out not to modify config
-      );
-      return (
-        <NativeViewGestureHandler {...gestureHandlerProps}>
-          <Component {...this.props} ref={this._refHandler} />
-        </NativeViewGestureHandler>
-      );
-    }
-  }
   return ComponentWrapper;
 }

GestureButtons.js

@@ -63,7 +63,6 @@ import PropTypes from 'prop-types';
   render() {
-    const { style, rippleColor, ...rest } = this.props;
+    const { rippleColor, ...rest } = this.props;
 
     return (
       <RawButton
-        style={[{ overflow: 'hidden' }, style]}
         rippleColor={processColor(rippleColor)}
@@ -112,11 +111,23 @@ {...rest}
   render() {
-    const { children, ...rest } = this.props;
+    const { children, style, ...rest } = this.props;
 
+    const resolvedStyle = StyleSheet.flatten(style ?? {});
+
     return (
-      <BaseButton {...rest} onActiveStateChange={this._onActiveStateChange}>
+      <BaseButton
+        {...rest}
+        style={resolvedStyle}
+        onActiveStateChange={this._onActiveStateChange}>
         <Animated.View
           style={[
             btnStyles.underlay,
-            { opacity: this._opacity },
-            { backgroundColor: this.props.underlayColor },
+            {
+              opacity: this._opacity,
+              backgroundColor: this.props.underlayColor,
+              borderRadius: resolvedStyle.borderRadius,
+              borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
+              borderTopRightRadius: resolvedStyle.borderTopRightRadius,
+              borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
+              borderBottomRightRadius: resolvedStyle.borderBottomRightRadius,
+            },
           ]}
@@ -123,0 +134,0 @@ />

package.json

 {
   "name": "react-native-gesture-handler",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
@@ -98,3 +98,3 @@ "scripts": {
     "*.js": [
-      "prettier --write --print-width 80 --tab-width 2 --single-quote --jsx-bracket-same-line=true --trailing-comma=es5",
+      "prettier --write",
       "git add"
@@ -101,0 +101,0 @@ ]

react-native-gesture-handler.d.ts

@@ -437,3 +437,6 @@ // Project: https://github.com/software-mansion/react-native-gesture-handler
     NativeViewGestureHandlerProperties & ScrollViewProperties
-  > {}
+  > {
+    scrollTo(y?: number | { x?: number; y?: number; animated?: boolean }, x?: number, animated?: boolean): void;
+    scrollToEnd(options?: { animated: boolean }): void;
+  }
 
@@ -456,3 +459,8 @@ export class Switch extends React.Component<
     NativeViewGestureHandlerProperties & FlatListProperties<ItemT>
-  > {}
+  > {
+    scrollToEnd: (params?: { animated?: boolean }) => void;
+    scrollToIndex: (params: { animated?: boolean; index: number; viewOffset?: number; viewPosition?: number }) => void;
+    scrollToItem: (params: { animated?: boolean; item: ItemT; viewPosition?: number }) => void;
+    scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
+  }
 
@@ -459,0 +467,0 @@ export const GestureHandlerRootView: React.ComponentType<ViewProps>;

README.md

 <p align="center">
-  <img height="150" src="https://software-mansion.github.io/react-native-gesture-handler/img/ghlogo.svg" />
+  <img height="150" src="https://docs.swmansion.com/react-native-gesture-handler/img/ghlogo.svg" />
   <h1 align="center">React Native Gesture Handler</h1>
@@ -14,7 +14,7 @@ <h3 align="center">Declarative API exposing platform native touch and gesture system to React Native.</h3>
 
-Check [getting started](https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html) section of our docs for the detailed installation instructions.
+Check [getting started](https://docs.swmansion.com/react-native-gesture-handler/docs/getting-started.html) section of our docs for the detailed installation instructions.
 
 ## Documentation
 
-Check out our dedicated documentation page for info about this library, API reference and more: [https://software-mansion.github.io/react-native-gesture-handler](https://software-mansion.github.io/react-native-gesture-handler)
+Check out our dedicated documentation page for info about this library, API reference and more: [https://docs.swmansion.com/react-native-gesture-handler/](https://docs.swmansion.com/react-native-gesture-handler)
 
@@ -54,2 +54,2 @@ ## Examples
 [![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 "Expo.io")](https://expo.io)
-[![swm](https://avatars1.githubusercontent.com/u/6952717?v=3&s=100 "Software Mansion")](https://swmansion.com)
+[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-gesture-handler-github "Software Mansion")](https://swmansion.com)

touchables/GenericTouchable.js

@@ -254,3 +254,2 @@ import React, { Component } from 'react';
       nativeID: this.props.nativeID,
-      testID: this.props.testID,
       onLayout: this.props.onLayout,
@@ -270,2 +269,3 @@ hitSlop: this.props.hitSlop,
         disallowInterruption={this.props.disallowInterruption}
+        testID={this.props.testID}
         {...this.props.extraButtonProps}>
@@ -272,0 +272,0 @@ <Animated.View {...coreProps} style={this.props.style}>

touchables/TouchableNativeFeedback.android.js

@@ -1,4 +0,5 @@
-import GenericTouchable from './GenericTouchable';
+import { Platform } from 'react-native';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import GenericTouchable from './GenericTouchable';
 
@@ -12,10 +13,15 @@ /**
 export default class TouchableNativeFeedback extends Component {
-  static SelectableBackground = () => ({ type: 'SelectableBackground' });
-  static SelectableBackgroundBorderless = () => ({
+  static SelectableBackground = rippleRadius => ({
+    type: 'SelectableBackground',
+    rippleRadius,
+  });
+  static SelectableBackgroundBorderless = rippleRadius => ({
     type: 'SelectableBackgroundBorderless',
+    rippleRadius,
   });
-  static Ripple = (color, borderless) => ({
+  static Ripple = (color, borderless, rippleRadius) => ({
     type: 'Ripple',
     color,
     borderless,
+    rippleRadius,
   });
@@ -41,3 +47,3 @@
 
-  getExtraButtonProps = () => {
+  getExtraButtonProps() {
     const extraProps = {};
@@ -49,4 +55,6 @@ const { background } = this.props;
         extraProps['rippleColor'] = background.color;
+        extraProps['rippleRadius'] = background.rippleRadius;
       } else if (background.type === 'SelectableBackgroundBorderless') {
         extraProps['borderless'] = true;
+        extraProps['rippleRadius'] = background.rippleRadius;
       }
@@ -56,3 +64,3 @@ }
     return extraProps;
-  };
+  }
   render() {
@@ -59,0 +67,0 @@ const { style = {}, ...rest } = this.props;

web/DiscreteGestureHandler.js

@@ -29,8 +29,10 @@ import GestureHandler from './GestureHandler';
 
-  transformNativeEvent({ x, y }) {
+  transformNativeEvent({ center: { x, y } }) {
+    const rect = this.view.getBoundingClientRect();
+
     return {
       absoluteX: x,
       absoluteY: y,
-      x,
-      y,
+      x: x - rect.left,
+      y: y - rect.top,
     };
@@ -37,0 +39,0 @@ }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

4211

increased by0.02%

Worsened metrics

Total package byte prevSize

402744

decreased by-5.22%

Number of package files

125

decreased by-3.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes