feat(EMI-2095): Add Swipeable component

app/App.tsx

@@ -1,15 +1,18 @@
 import React from "react"
-import { StorybookUIRoot } from "../.storybook/Storybook"
-import FlipperAsyncStorage from "rn-flipper-async-storage-advanced"
 import { LogBox } from "react-native"
+import { GestureHandlerRootView } from "react-native-gesture-handler"
+import FlipperAsyncStorage from "rn-flipper-async-storage-advanced"
+import { StorybookUIRoot } from "../.storybook/Storybook"
 
 LogBox.ignoreLogs(['Each child in a list should have a unique "key" prop.'])
 
 export const App = () => {
   return (
     <>
-      <FlipperAsyncStorage />
-      <StorybookUIRoot />
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <FlipperAsyncStorage />
+        <StorybookUIRoot />
+      </GestureHandlerRootView>
     </>
   )
 }

ios/Podfile.lock

@@ -1144,6 +1144,10 @@ PODS:
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFlashList (1.6.4):
     - React-Core
+  - RNGestureHandler (2.19.0):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
   - RNReanimated (3.8.1):
@@ -1244,6 +1248,7 @@ DEPENDENCIES:
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -1382,6 +1387,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-fast-image"
   RNFlashList:
     :path: "../node_modules/@shopify/flash-list"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNReactNativeHapticFeedback:
     :path: "../node_modules/react-native-haptic-feedback"
   RNReanimated:
@@ -1461,6 +1468,7 @@ SPEC CHECKSUMS:
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
   RNFlashList: b521ebdd7f9352673817f1d98e8bdc0c8cf8545b
+  RNGestureHandler: 75e2ebf4e8ac521f2b3c9afdc048fcbc2e2c9ea4
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: 8a4d86eb951a4a99d8e86266dc71d7735c0c30a9
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a

package.json

@@ -44,6 +44,7 @@
     "react-native-blurhash": "^1.1.11",
     "react-native-collapsible-tab-view": "^8.0.0",
     "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "2.19.0",
     "react-native-pager-view": "^6.2.0",
     "react-native-popover-view": "^5.1.7",
     "react-spring": "8.0.23",

src/elements/Swipeable/Swipeable.stories.tsx

@@ -0,0 +1,29 @@
+import { useRef } from "react"
+import { SwipeableMethods } from "react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable"
+import { Swipeable } from "./"
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+
+export default {
+  title: "Swipeable",
+  component: Swipeable,
+}
+
+export const Swipable = () => {
+  const swipeableRef = useRef<SwipeableMethods>(null)
+
+  return (
+    <Flex p={2}>
+      <Swipeable
+        ref={swipeableRef}
+        actionCompoent={<Text color="white100">Close</Text>}
+        actionOnPress={() => swipeableRef.current?.close()}
+        actionBackground="blue100"
+      >
+        <Flex p={2} bg="blue10">
+          <Text>Hello</Text>
+        </Flex>
+      </Swipeable>
+    </Flex>
+  )
+}

src/elements/Swipeable/Swipeable.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useCallback } from "react"
+import ReanimatedSwipeable, {
+  SwipeableMethods,
+  SwipeableRef,
+} from "react-native-gesture-handler/ReanimatedSwipeable"
+import { SharedValue } from "react-native-reanimated"
+import { Color } from "../../types"
+import { Flex } from "../Flex"
+import { Touchable } from "../Touchable"
+
+export interface SwipeableProps {
+  children: React.ReactNode
+  actionOnPress: () => void
+  actionCompoent: React.ReactNode
+  actionBackground?: Color
+  swipeableProps?: SwipeableProps
+  enabled?: boolean
+}
+
+export const Swipeable = forwardRef((props: SwipeableProps, swipeableRef: SwipeableRef) => {
+  const {
+    children,
+    actionOnPress,
+    actionCompoent,
+    actionBackground = "red100",
+    enabled = true,
+    swipeableProps,
+  } = props
+
+  const renderRightActions: (
+    progress: SharedValue<number>,
+    dragX: SharedValue<number>,
+    swipable: SwipeableMethods
+  ) => React.ReactNode = useCallback(() => {
+    return (
+      <Touchable onPress={actionOnPress}>
+        <Flex
+          ml={1}
+          p={1}
+          flex={1}
+          minWidth={71}
+          bg={actionBackground}
+          alignItems="center"
+          justifyContent="center"
+        >
+          {actionCompoent}
+        </Flex>
+      </Touchable>
+    )
+  }, [actionBackground, actionCompoent, actionOnPress])
+
+  return (
+    <ReanimatedSwipeable
+      testID="swipeable-component"
+      ref={swipeableRef}
+      enabled={enabled}
+      renderRightActions={renderRightActions}
+      friction={1.5}
+      {...swipeableProps}
+    >
+      {children}
+    </ReanimatedSwipeable>
+  )
+})

src/elements/Swipeable/index.ts

@@ -0,0 +1 @@
+export * from "./Swipeable"

src/elements/index.tsx

@@ -37,6 +37,7 @@ export * from "./SimpleMessage"
 export * from "./Skeleton"
 export * from "./Spacer"
 export * from "./Spinner"
+export * from "./Swipeable"
 export * from "./Switch"
 export * from "./Tabs"
 export * from "./Text"

yarn.lock

@@ -2348,6 +2348,13 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -4083,6 +4090,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.45"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
+  integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -10235,7 +10247,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, [email protected], prop-types@^15.5.8, prop-types@^15.8.1:
+prop-types@*, [email protected], prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10395,6 +10407,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.265.0.tgz#385c6fb26b27e3812bad374f2ae2ec2cdb1833bb"
   integrity sha512-GA5Y84eOAl4xtl3q/zmTbegD3rq7OpB5MBGKVH5cmr1DnJY2DgKdALVbqmDOK3mR9sj4z6VBWiRpiU9j4j1eMg==
 
+[email protected]:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.19.0.tgz#16deaefcefe77d6b4b7fa48a82ef52be61ddbb07"
+  integrity sha512-Cc6DnSnn5hhgiuJOtlOJmXkbBBOZkW9UnJJG+DrWPq2jJuNvM4g5qq2plsywhxQj9xT7FyXZwVVblaXabfGZvQ==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+
 [email protected]:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/react-native-haptic-feedback/-/react-native-haptic-feedback-1.14.0.tgz#b50f49dedda4980b3c37c5780823f753cf3ee717"