feat: use Animated API if reanimated2 not available

Stringsaeed · Stringsaeed · commit cec2483346de · 2022-11-07T09:51:45.000+02:00
diff --git a/example/package.json b/example/package.json
@@ -14,8 +14,7 @@
     "expo-status-bar": "~1.4.0",
     "expo-updates": "~0.14.6",
     "react": "18.0.0",
-    "react-native": "0.69.6",
-    "react-native-reanimated": "~2.9.1"
+    "react-native": "0.69.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -344,7 +344,7 @@
     "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-default-from" "^7.18.6"
 
-"@babel/plugin-proposal-export-namespace-from@^7.17.12", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
   integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
@@ -748,13 +748,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-object-assign@^7.16.7":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
-  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -997,7 +990,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
+"@babel/preset-typescript@^7.13.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
   integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@@ -1716,11 +1709,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/invariant@^2.2.35":
-  version "2.2.35"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
-  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -4139,11 +4127,6 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
-
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@@ -5253,20 +5236,6 @@ react-native-gradle-plugin@^0.0.7:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz#96602f909745239deab7b589443f14fce5da2056"
   integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g==
 
-react-native-reanimated@~2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
-  integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
-  dependencies:
-    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
-    "@babel/plugin-transform-object-assign" "^7.16.7"
-    "@babel/preset-typescript" "^7.16.7"
-    "@types/invariant" "^2.2.35"
-    invariant "^2.2.4"
-    lodash.isequal "^4.5.0"
-    setimmediate "^1.0.5"
-    string-hash-64 "^1.0.3"
-
 react-native@0.69.6:
   version "0.69.6"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.6.tgz#cdd1a5757d902b91b165c28fdda4e518ed6f683a"
@@ -5901,11 +5870,6 @@ stream-buffers@2.2.x:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-string-hash-64@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
-  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
-
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
     "react": "18.0.0",
     "react-native": "0.69.6",
     "react-native-builder-bob": "^0.20.1",
-    "react-native-reanimated": "^2.12.0",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
   },
@@ -88,8 +87,7 @@
   "peerDependencies": {
     "@gorhom/portal": "^1",
     "react": "*",
-    "react-native": "*",
-    "react-native-reanimated": "^2"
+    "react-native": "*"
   },
   "jest": {
     "preset": "react-native",
@@ -167,5 +165,8 @@
   },
   "dependencies": {
     "framer-motion": "^7.6.4"
+  },
+  "optionalDependencies": {
+    "react-native-reanimated": "^2.12.0"
   }
 }
diff --git a/src/animated/AnimatedView/Animated.tsx b/src/animated/AnimatedView/Animated.tsx
@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+
+export default Animated.View;
diff --git a/src/animated/AnimatedView/Reanimated.tsx b/src/animated/AnimatedView/Reanimated.tsx
@@ -0,0 +1,3 @@
+import Animated from 'react-native-reanimated';
+
+export default Animated.View;
diff --git a/src/animated/AnimatedView/index.ts b/src/animated/AnimatedView/index.ts
@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentType } from 'react';
+import type { AnimateStyle } from 'react-native-reanimated';
+import type { ViewProps, ViewStyle, Animated } from 'react-native';
+
+interface Props extends Omit<ViewProps, 'style'> {
+  style?:
+    | AnimateStyle<ViewStyle>
+    | ComponentProps<typeof Animated.View>['style'];
+}
+
+let AnimatedView: ComponentType<Props>;
+
+// @ts-ignore
+if (global._WORKLET) {
+  AnimatedView = require('./Reanimated').default;
+} else {
+  AnimatedView = require('./Animated').default;
+}
+
+export default AnimatedView;
diff --git a/src/animated/index.ts b/src/animated/index.ts
@@ -0,0 +1,3 @@
+export { default as AnimatedView } from './AnimatedView';
+export { default as useAnimatedPresence } from './useAnimatedPresence';
+export { default as useAnimatedStyles } from './useAnimatedStyles';
diff --git a/src/animated/useAnimatedPresence/index.ts b/src/animated/useAnimatedPresence/index.ts
@@ -0,0 +1,12 @@
+let useAnimatedPresence:
+  | typeof import('./useAnimatedPresence').default
+  | typeof import('./useReanimated2Presence').default;
+
+// @ts-ignore
+if (global._WORKLET) {
+  useAnimatedPresence = require('./useReanimated2Presence').default;
+} else {
+  useAnimatedPresence = require('./useAnimatedPresence').default;
+}
+
+export default useAnimatedPresence;
diff --git a/src/animated/useAnimatedPresence/useAnimatedPresence.ts b/src/animated/useAnimatedPresence/useAnimatedPresence.ts
@@ -0,0 +1,33 @@
+import { usePresence } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+const { timing } = Animated;
+
+type TimingConfig = Partial<Omit<Animated.TimingAnimationConfig, 'toValue'>>;
+
+const defaultConfig: TimingConfig = {
+  duration: 300,
+};
+
+export default function useAnimatedPresence(
+  timingConfig: TimingConfig = defaultConfig
+) {
+  const animatedIsPresent = useRef(new Animated.Value(0)).current;
+
+  const [isPresent, safeToRemove] = usePresence();
+
+  useEffect(() => {
+    timing(animatedIsPresent, {
+      toValue: isPresent ? 1 : 0,
+      duration: timingConfig.duration,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished && !isPresent && safeToRemove) {
+        safeToRemove();
+      }
+    });
+  }, [animatedIsPresent, isPresent, safeToRemove, timingConfig.duration]);
+
+  return animatedIsPresent;
+}
diff --git a/src/animated/useAnimatedPresence/useReanimated2Presence.ts b/src/animated/useAnimatedPresence/useReanimated2Presence.ts
@@ -1,16 +1,14 @@
 import { usePresence } from 'framer-motion';
 import {
   runOnJS,
-  withTiming,
-  withSequence,
   useDerivedValue,
+  withSequence,
+  withTiming,
   WithTimingConfig,
 } from 'react-native-reanimated';
 
-export default function useAnimatedPresence(
-  timingConfig: WithTimingConfig = {
-    duration: 300,
-  }
+export default function useReanimated2Presence(
+  timingConfig: WithTimingConfig = { duration: 50 }
 ) {
   const [isPresent, safeToRemove] = usePresence();
 
diff --git a/src/animated/useAnimatedPresence/useReanimatedPresence.ts b/src/animated/useAnimatedPresence/useReanimatedPresence.ts
@@ -0,0 +1,2 @@
+// Reanimated v1
+export default function useReanimatedPresence() {}
diff --git a/src/animated/useAnimatedStyles/index.ts b/src/animated/useAnimatedStyles/index.ts
@@ -0,0 +1,12 @@
+let useAnimatedStyles:
+  | typeof import('./useAnimatedStyles').default
+  | typeof import('./useReanimatedStyles').default;
+
+// @ts-ignore
+if (global._WORKLET) {
+  useAnimatedStyles = require('./useReanimatedStyles').default;
+} else {
+  useAnimatedStyles = require('./useAnimatedStyles').default;
+}
+
+export default useAnimatedStyles;
diff --git a/src/animated/useAnimatedStyles/useAnimatedStyles.ts b/src/animated/useAnimatedStyles/useAnimatedStyles.ts
@@ -0,0 +1,14 @@
+import type { Animated } from 'react-native';
+
+export default function useAnimatedStyles(
+  animatedPresence?: Animated.AnimatedValue
+) {
+  const stylez = {
+    opacity: animatedPresence?.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    }),
+  };
+
+  return stylez;
+}
diff --git a/src/animated/useAnimatedStyles/useReanimatedStyles.ts b/src/animated/useAnimatedStyles/useReanimatedStyles.ts
@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import type Animated from 'react-native-reanimated';
+
+export default function useReanimatedStyles(
+  animatedPresence?: Animated.SharedValue<number>
+) {
+  const stylez = useMemo(
+    () => ({
+      opacity: animatedPresence?.value,
+    }),
+    [animatedPresence]
+  );
+
+  return stylez;
+}
diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx
@@ -1,27 +1,22 @@
 import React from 'react';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
 
 import type { OverlayProps } from '../../types';
+import { useAnimatedStyles, AnimatedView } from '../../animated';
 
 const Overlay: React.FC<OverlayProps> = ({
   children,
   animatedPresence,
   onDismiss,
   overlayStyle,
 }) => {
-  const stylez = useAnimatedStyle(
-    () => ({
-      opacity: animatedPresence?.value,
-    }),
-    [animatedPresence]
-  );
+  const stylez = useAnimatedStyles(animatedPresence);
 
   return (
     <TouchableWithoutFeedback onPress={onDismiss}>
-      <Animated.View style={[styles.overlay, overlayStyle, stylez]}>
+      <AnimatedView style={[styles.overlay, overlayStyle, stylez]}>
         {children}
-      </Animated.View>
+      </AnimatedView>
     </TouchableWithoutFeedback>
   );
 };
diff --git a/src/components/TooltipWrapper/TooltipWrapper.tsx b/src/components/TooltipWrapper/TooltipWrapper.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useLayout } from '../../hooks';
 import { getPositionStyles } from '../../utils';
 import type { TooltipWrapperProps } from '../../types';
+import { AnimatedView, useAnimatedStyles } from '../../animated';
 
 import PointerWrapper from '../PointerWrapper';
 
@@ -19,10 +19,7 @@ const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
 
   const { onLayout, ...layout } = useLayout();
 
-  const stylez = useAnimatedStyle(
-    () => ({ opacity: animatedPresence?.value }),
-    [animatedPresence]
-  );
+  const stylez = useAnimatedStyles(animatedPresence);
 
   const positionStyles = useMemo(() => {
     const { offset, childrenLayout, pointerStyle: pointerStyles } = props;
@@ -37,7 +34,7 @@ const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
   }, [layout, position, props]);
 
   return (
-    <Animated.View
+    <AnimatedView
       onLayout={onLayout}
       style={[styles.tooltipWrapper, positionStyles, stylez]}
     >
@@ -47,7 +44,7 @@ const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
         tooltipLayout={layout}
         position={position}
       />
-    </Animated.View>
+    </AnimatedView>
   );
 };
 
diff --git a/src/components/Wrapper/Wrapper.tsx b/src/components/Wrapper/Wrapper.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useAnimatedPresence } from '../../hooks';
-import type { WrapperProps } from '../../types';
+import { useAnimatedPresence } from '../../animated';
+import type { AnimatedPresenceProp, WrapperProps } from '../../types';
 
 import Overlay from '../Overlay';
 import TooltipWrapper from '../TooltipWrapper';
@@ -12,9 +12,13 @@ const WrapperComponent: React.FC<WrapperProps> = (props) => {
     onDismiss,
     children,
     overlayStyle,
+    timingConfig,
     ...tooltipWrapperProps
   } = props;
-  const animatedPresence = useAnimatedPresence();
+  const animatedPresence = useAnimatedPresence(
+    // @ts-ignore
+    timingConfig
+  ) as AnimatedPresenceProp['animatedPresence'];
 
   const renderTooltipWrapper = () => (
     <TooltipWrapper
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,2 +1 @@
 export { default as useLayout } from './useLayout';
-export { default as useAnimatedPresence } from './useAnimatedPresence';
diff --git a/src/types/ComponentsProps.ts b/src/types/ComponentsProps.ts
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { LayoutRectangle, ViewStyle } from 'react-native';
+import type { LayoutRectangle, ViewStyle, Animated } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 
 import type {
@@ -37,7 +37,7 @@ export interface WrapperProps
     Omit<TooltipWrapperProps, 'children' | 'animatedPresence'>,
     Pick<OverlayProps, 'onDismiss' | 'overlayStyle'> {
   withOverlay?: boolean;
-  timingConfig?: WithTimingConfig;
+  timingConfig?: WithTimingConfig | Animated.TimingAnimationConfig;
 }
 
 export interface TooltipProps
diff --git a/src/types/SingleProps.ts b/src/types/SingleProps.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { Animated } from 'react-native';`
	`2`	`+`
	`3`	`+export default Animated.View;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Animated from 'react-native-reanimated';`
	`2`	`+`
	`3`	`+export default Animated.View;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export { default as AnimatedView } from './AnimatedView';`
	`2`	`+export { default as useAnimatedPresence } from './useAnimatedPresence';`
	`3`	`+export { default as useAnimatedStyles } from './useAnimatedStyles';`