Feat/new pan view with reanimated 2

demo/src/index.js

@@ -222,6 +222,9 @@ module.exports = {
       get IncubatorTextFieldScreen() {
         return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
       },
+      get PanViewScreen() {
+        return require('./screens/incubatorScreens/PanViewScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/screens/MenuStructure.js

@@ -155,7 +155,8 @@ export const navigationData = {
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
-      {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'}
+      {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
+      {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },
   Inspirations: {

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -0,0 +1,200 @@
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {GestureHandlerRootView, FlatList} from 'react-native-gesture-handler';
+import {
+  View,
+  Text,
+  Colors,
+  Incubator,
+  Card,
+  Constants,
+  Modal,
+  BorderRadiuses,
+  Image,
+  TouchableOpacity
+} from 'react-native-ui-lib';
+const {PanView} = Incubator;
+
+interface Item {
+  value: string;
+  label: string;
+}
+
+const chevronDown = require('../../assets/icons/chevronDown.png');
+const overlayBackgroundColor = Colors.rgba(Colors.black, 0.2);
+const colors: Item[] = [
+  {value: Colors.red10, label: 'Red10'},
+  {value: Colors.red30, label: 'Red30'},
+  {value: Colors.red50, label: 'Red50'},
+  {value: Colors.red70, label: 'Red70'},
+  {value: Colors.blue10, label: 'Blue10'},
+  {value: Colors.blue30, label: 'Blue30'},
+  {value: Colors.blue50, label: 'Blue50'},
+  {value: Colors.blue70, label: 'Blue70'},
+  {value: Colors.purple10, label: 'Purple10'},
+  {value: Colors.purple30, label: 'Purple30'},
+  {value: Colors.purple50, label: 'Purple50'},
+  {value: Colors.purple70, label: 'Purple70'},
+  {value: Colors.green10, label: 'Green10'},
+  {value: Colors.green30, label: 'Green30'},
+  {value: Colors.green50, label: 'Green50'},
+  {value: Colors.green70, label: 'Green70'},
+  {value: Colors.yellow10, label: 'Yellow10'},
+  {value: Colors.yellow30, label: 'Yellow30'},
+  {value: Colors.yellow50, label: 'Yellow50'},
+  {value: Colors.yellow70, label: 'Yellow70'}
+];
+
+class PanViewScreen extends Component {
+  state = {
+    showToast: false,
+    showDialog: false
+  };
+
+  onDialogDismissed = () => {
+    this.setState({showDialog: false});
+  };
+
+  keyExtractor = (item: Item) => {
+    return item.value;
+  };
+
+  renderVerticalItem = ({item}: {item: Item}) => {
+    return (
+      <Text text50 margin-20 color={item.value}>
+        {item.label}
+      </Text>
+    );
+  };
+
+  renderDialog = () => {
+    return (
+      <View flex>
+        <Modal
+          useGestureHandlerRootView
+          transparent
+          onBackgroundPress={this.onDialogDismissed}
+          overlayBackgroundColor={overlayBackgroundColor}
+          visible
+        >
+          <PanView
+            directions={[PanView.directions.DOWN]}
+            dismissible
+            // threshold={{y: 10}}
+            containerStyle={styles.container}
+            onDismiss={this.onDialogDismissed}
+          >
+            <View style={styles.dialog}>
+              <Text text60 margin-s2>
+                Title (swipe here)
+              </Text>
+              <View height={1} bg-grey40/>
+              <FlatList
+                showsVerticalScrollIndicator={false}
+                style={styles.verticalScroll}
+                data={colors}
+                renderItem={this.renderVerticalItem}
+                keyExtractor={this.keyExtractor}
+              />
+            </View>
+          </PanView>
+        </Modal>
+      </View>
+    );
+  };
+
+  onToastDismissed = () => {
+    this.setState({showToast: false});
+  };
+
+  renderToast = () => {
+    return (
+      <PanView
+        directions={[PanView.directions.LEFT, PanView.directions.DOWN, PanView.directions.RIGHT]}
+        dismissible
+        directionLock
+        threshold={{y: 10}}
+        containerStyle={styles.container}
+        onDismiss={this.onToastDismissed}
+      >
+        <TouchableOpacity center style={styles.toast} onPress={this.onToastDismissed}>
+          <Text>Swipe or click to dismiss</Text>
+        </TouchableOpacity>
+      </PanView>
+    );
+  };
+
+  renderCard = (key: string, name: string) => {
+    // @ts-expect-error
+    const value = this.state[key];
+    const text = value ? `I'm still showing or being dismissed` : `Click me (${name})`;
+    const onPress = value ? undefined : () => this.setState({[key]: true});
+    return (
+      <Card margin-page onPress={onPress}>
+        <View padding-15>
+          <Text text30 grey30>
+            {text}
+          </Text>
+        </View>
+      </Card>
+    );
+  };
+
+  render() {
+    const {showToast, showDialog} = this.state;
+    const Container = showDialog ? View : GestureHandlerRootView;
+    return (
+      <Container style={[styles.root, styles.gestureHandler]}>
+        <View marginL-page height={50} centerV>
+          <Text text50>New Pan View</Text>
+        </View>
+        <ScrollView>
+          {this.renderCard('showToast', 'toast')}
+          {this.renderCard('showDialog', 'dialog')}
+          <View height={Constants.screenHeight} centerH>
+            <Text text50 marginB-s2>
+              Scrollable
+            </Text>
+            <Image source={chevronDown}/>
+          </View>
+        </ScrollView>
+        {showToast && this.renderToast()}
+        {showDialog && this.renderDialog()}
+      </Container>
+    );
+  }
+}
+
+export default PanViewScreen;
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: Colors.grey80
+  },
+  gestureHandler: {
+    flex: 1
+  },
+  container: {
+    flex: 1,
+    position: 'absolute',
+    bottom: 20,
+    alignSelf: 'center'
+  },
+  toast: {
+    backgroundColor: Colors.white,
+    width: 200,
+    height: 40,
+    borderRadius: BorderRadiuses.br20,
+    borderWidth: 0.5,
+    borderColor: Colors.grey30
+  },
+  dialog: {
+    backgroundColor: Colors.white,
+    width: 200,
+    height: 300,
+    borderRadius: BorderRadiuses.br20
+  },
+  verticalScroll: {
+    marginTop: 20
+  }
+});

demo/src/screens/incubatorScreens/index.js

@@ -5,4 +5,5 @@ export function registerScreens(registrar) {
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
   registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
+  registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
 }

generatedTypes/components/modal/index.d.ts

@@ -28,6 +28,10 @@ export interface ModalProps extends RNModalProps {
      * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
      */
     accessibilityLabel?: string;
+    /**
+     * Should add a GestureHandlerRootView (Android only)
+     */
+    useGestureHandlerRootView?: boolean;
 }
 /**
  * @description: Component that present content on top of the invoking screen

generatedTypes/incubator/index.d.ts

@@ -2,3 +2,4 @@ export { default as TabController } from './TabController';
 export { default as TextField, TextFieldProps, FieldContextType } from './TextField';
 export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
 export { default as WheelPicker, WheelPickerProps } from './WheelPicker';
+export { default as PanView, PanViewProps, PanningDirections, PanDismissThreshold } from './panView';

generatedTypes/incubator/panView/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewProps } from '../../components/view';
+import { PanningDirections, TranslationLock, PanDismissThreshold } from './panningUtil';
+export { PanningDirections, TranslationLock, PanDismissThreshold };
+export interface PanViewProps extends ViewProps {
+    /**
+     * The directions of the allowed pan (default is all)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanView.directions.###)
+     */
+    directions?: PanningDirections[];
+    /**
+     * Will enable the dismissible behavior:
+     * 1. Dismiss if over the threshold.
+     * 2. Animate to start if no dismissed.
+     */
+    dismissible?: boolean;
+    /**
+     * Callback to the dismiss animation end
+     */
+    onDismiss?: () => void;
+    /**
+     * Should the direction of dragging be locked once a drag has started.
+     */
+    directionLock?: boolean;
+    /**
+     * Allows locking the translation when dragging or dropping.
+     * i.e. cannot drag back when a certain direction is not allowed.
+     * Only when dismissible={false}
+     */
+    translationLock?: TranslationLock;
+    /**
+     * Object to adjust the dismiss threshold limits.
+     */
+    threshold?: PanDismissThreshold;
+    /**
+     * Add a style to the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+interface StaticMembers {
+    directions: typeof PanningDirections;
+    translationLock: typeof TranslationLock;
+}
+declare const _default: React.ComponentClass<PanViewProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & StaticMembers;
+export default _default;

generatedTypes/incubator/panView/panningUtil.d.ts

@@ -0,0 +1,56 @@
+import { PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
+export declare enum PanningDirections {
+    UP = "up",
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum TranslationLock {
+    /**
+     * No locking (default).
+     */
+    NONE = "none",
+    /**
+     * Will lock the start location to the drop location.
+     * Only when a certain direction is not allowed.
+     * Only when dismissible={false}
+     */
+    DROP = "drop",
+    /**
+     * Will lock the start location to the dragged location.
+     * Only when a certain direction is not allowed.
+     * Only when dismissible={false}
+     */
+    DRAG = "drag"
+}
+export interface Frame {
+    x: number;
+    y: number;
+}
+export interface TranslationOptions {
+    directionLock?: boolean;
+    translationLock: TranslationLock;
+    currentTranslation: Frame;
+}
+export interface PanDismissThreshold {
+    /**
+     * The (positive) velocity of a drag\swipe past it the view will be dismissed.
+     */
+    velocity?: number;
+    /**
+     * The x translation from the start location past it the view will be dismissed.
+     */
+    x?: number;
+    /**
+     * The y translation from the start location past it the view will be dismissed.
+     */
+    y?: number;
+}
+export declare function getTranslationClamp(initialTranslation: Frame, options: TranslationOptions): Frame;
+export declare function getTranslationDirectionClamp(translation: Frame, options: TranslationOptions): Frame;
+export declare function getTranslation(event: PanGestureHandlerEventPayload, initialTranslation: Frame, directions: PanningDirections[], options: TranslationOptions): Frame;
+export declare const DEFAULT_THRESHOLD: Required<PanDismissThreshold>;
+/**
+ * Will return undefined if should not dismiss
+ */
+export declare function getDismissVelocity(event: PanGestureHandlerEventPayload, directions: PanningDirections[], options: TranslationOptions, threshold?: PanDismissThreshold): Partial<Frame> | undefined;

jest-setup.js

@@ -7,5 +7,6 @@ jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() =>
 jest.mock('@react-native-community/blur', () => {});
 jest.mock('@react-native-community/netinfo', () => {});
 jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
+global.__reanimatedWorkletInit = jest.fn();
 jest.mock('react-native-gesture-handler', () => {});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));