react-native-gesture-handler 1.2.1 → 1.4.1

package/DrawerLayout.js

@@ -78,7 +78,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
     drawerType: 'front',
     edgeWidth: 20,
     minSwipeDistance: 3,
-    overlayColor: 'black',
+    overlayColor: 'rgba(0, 0, 0, 0.7)',
     drawerLockMode: 'unlocked',
   };
 
@@ -110,7 +110,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
     this._updateAnimatedEvent(props, this.state);
   }
 
-  componentWillUpdate(props: PropType, state: StateType) {
+  UNSAFE_componentWillUpdate(props: PropType, state: StateType) {
     if (
       this.props.drawerPosition !== props.drawerPosition ||
       this.props.drawerWidth !== props.drawerWidth ||
@@ -369,7 +369,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
     invariant(this._openValue, 'should be set');
     const overlayOpacity = this._openValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 0.7],
+      outputRange: [0, 1],
       extrapolate: 'clamp',
     });
     const dynamicOverlayStyles = {
@@ -450,7 +450,8 @@ export default class DrawerLayout extends Component<PropType, StateType> {
               : styles.containerInFront,
             containerStyles,
             contentContainerStyle,
-          ]}>
+          ]}
+          importantForAccessibility={this._drawerShown ? "no-hide-descendants" : "yes"}>
           {typeof this.props.children === 'function'
             ? this.props.children(this._openValue)
             : this.props.children}

package/GestureButtons.js

@@ -0,0 +1,166 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Animated, Platform, processColor, StyleSheet } from 'react-native';
+
+import createNativeWrapper from './createNativeWrapper';
+import GestureHandlerButton from './GestureHandlerButton';
+import State from './State';
+
+export const RawButton = createNativeWrapper(GestureHandlerButton, {
+  shouldCancelWhenOutside: false,
+  shouldActivateOnStart: false,
+});
+
+/* Buttons */
+
+export class BaseButton extends React.Component {
+  static propTypes = {
+    ...RawButton.propTypes,
+    onPress: PropTypes.func,
+    onActiveStateChange: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this._lastActive = false;
+  }
+
+  _handleEvent = ({ nativeEvent }) => {
+    const { state, oldState, pointerInside } = nativeEvent;
+    const active = pointerInside && state === State.ACTIVE;
+
+    if (active !== this._lastActive && this.props.onActiveStateChange) {
+      this.props.onActiveStateChange(active);
+    }
+
+    if (
+      oldState === State.ACTIVE &&
+      state !== State.CANCELLED &&
+      this._lastActive &&
+      this.props.onPress
+    ) {
+      this.props.onPress(active);
+    }
+
+    this._lastActive = active;
+  };
+
+  // Normally, the parent would execute it's handler first,
+  // then forward the event to listeners. However, here our handler
+  // is virtually only forwarding events to listeners, so we reverse the order
+  // to keep the proper order of the callbacks (from "raw" ones to "processed").
+  _onHandlerStateChange = e => {
+    this.props.onHandlerStateChange && this.props.onHandlerStateChange(e);
+    this._handleEvent(e);
+  };
+
+  _onGestureEvent = e => {
+    this.props.onGestureEvent && this.props.onGestureEvent(e);
+    this._handleEvent(e);
+  };
+
+  render() {
+    const { style, rippleColor, ...rest } = this.props;
+
+    return (
+      <RawButton
+        style={[{ overflow: 'hidden' }, style]}
+        rippleColor={processColor(rippleColor)}
+        {...rest}
+        onGestureEvent={this._onGestureEvent}
+        onHandlerStateChange={this._onHandlerStateChange}
+      />
+    );
+  }
+}
+
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
+const btnStyles = StyleSheet.create({
+  underlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  },
+});
+
+export class RectButton extends React.Component {
+  static propTypes = BaseButton.propTypes;
+
+  static defaultProps = {
+    activeOpacity: 0.105,
+    underlayColor: 'black',
+  };
+
+  constructor(props) {
+    super(props);
+    this._opacity = new Animated.Value(0);
+  }
+
+  _onActiveStateChange = active => {
+    if (Platform.OS !== 'android') {
+      this._opacity.setValue(active ? this.props.activeOpacity : 0);
+    }
+
+    this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+  };
+
+  render() {
+    const { children, ...rest } = this.props;
+
+    return (
+      <BaseButton {...rest} onActiveStateChange={this._onActiveStateChange}>
+        <Animated.View
+          style={[
+            btnStyles.underlay,
+            { opacity: this._opacity },
+            { backgroundColor: this.props.underlayColor },
+          ]}
+        />
+        {children}
+      </BaseButton>
+    );
+  }
+}
+
+export class BorderlessButton extends React.Component {
+  static propTypes = {
+    ...BaseButton.propTypes,
+    borderless: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    activeOpacity: 0.3,
+    borderless: true,
+  };
+
+  constructor(props) {
+    super(props);
+    this._opacity = new Animated.Value(1);
+  }
+
+  _onActiveStateChange = active => {
+    if (Platform.OS !== 'android') {
+      this._opacity.setValue(active ? this.props.activeOpacity : 1);
+    }
+
+    this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+  };
+
+  render() {
+    const { children, style, ...rest } = this.props;
+
+    return (
+      <AnimatedBaseButton
+        {...rest}
+        onActiveStateChange={this._onActiveStateChange}
+        style={[style, Platform.OS === 'ios' && { opacity: this._opacity }]}>
+        {children}
+      </AnimatedBaseButton>
+    );
+  }
+}
+
+export { default as PureNativeButton } from './GestureHandlerButton';

package/GestureComponents.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactNative from 'react-native';
+
+import createNativeWrapper from './createNativeWrapper';
+
+const MEMOIZED = new WeakMap();
+
+function memoizeWrap(Component, config) {
+  if (Component == null) {
+    return null;
+  }
+  let memoized = MEMOIZED.get(Component);
+  if (!memoized) {
+    memoized = createNativeWrapper(
+      Component,
+      config
+    );
+    MEMOIZED.set(Component, memoized);
+  }
+  return memoized;
+}
+
+module.exports = {
+  /* RN's components */
+  get ScrollView() {
+    return memoizeWrap(ReactNative.ScrollView, {
+      disallowInterruption: true,
+    });
+  },
+  get Switch() {
+    return memoizeWrap(ReactNative.Switch, {
+      shouldCancelWhenOutside: false,
+      shouldActivateOnStart: true,
+      disallowInterruption: true,
+    });
+  },
+  get TextInput() {
+    return memoizeWrap(ReactNative.TextInput);
+  },
+  get ToolbarAndroid() {
+    return memoizeWrap(ReactNative.ToolbarAndroid);
+  },
+  get DrawerLayoutAndroid() {
+    const DrawerLayoutAndroid = memoizeWrap(ReactNative.DrawerLayoutAndroid, {
+      disallowInterruption: true,
+    });
+    DrawerLayoutAndroid.positions = ReactNative.DrawerLayoutAndroid.positions;
+    return DrawerLayoutAndroid;
+  },
+  get FlatList() {
+    if (!MEMOIZED.FlatList) {
+      const ScrollView = this.ScrollView;
+      MEMOIZED.FlatList = React.forwardRef((props, ref) => (
+        <ReactNative.FlatList
+          ref={ref}
+          {...props}
+          renderScrollComponent={scrollProps => <ScrollView {...scrollProps} />}
+        />
+      ));
+    }
+    return MEMOIZED.FlatList;
+  },
+};

package/GestureComponents.web.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
+  FlatList as RNFlatList,
+  Switch as RNSwitch,
+  TextInput as RNTextInput,
+  ToolbarAndroid as RNToolbarAndroid,
+  ScrollView as RNScrollView,
+} from 'react-native';
+
+import createNativeWrapper from './createNativeWrapper';
+
+export const ScrollView = createNativeWrapper(RNScrollView, {
+  disallowInterruption: true,
+});
+
+export const Switch = createNativeWrapper(RNSwitch, {
+  shouldCancelWhenOutside: false,
+  shouldActivateOnStart: true,
+  disallowInterruption: true,
+});
+export const TextInput = createNativeWrapper(RNTextInput);
+export const ToolbarAndroid = createNativeWrapper(RNToolbarAndroid);
+export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
+  disallowInterruption: true,
+});
+DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
+
+export const FlatList = React.forwardRef((props, ref) => (
+  <RNFlatList
+    ref={ref}
+    {...props}
+    renderScrollComponent={scrollProps => <ScrollView {...scrollProps} />}
+  />
+));