chore: updated reanimated to 2.8

example/package.json

@@ -27,9 +27,9 @@
     "react-native-gesture-handler": "^2.1.0",
     "react-native-maps": "^0.30.1",
     "react-native-pager-view": "^5.4.9",
-    "react-native-reanimated": "^2.3.1",
+    "react-native-reanimated": "^2.8.0",
     "react-native-redash": "^16.0.11",
-    "react-native-safe-area-context": "3.3.2",
+    "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "^3.10.1",
     "react-native-tab-view": "^3.1.1"
   },

package.json

@@ -63,7 +63,7 @@
     "react-native": "^0.62.2",
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.2.0",
+    "react-native-reanimated": "^2.8.0",
     "release-it": "^14.10.1",
     "typescript": "^4.2.4"
   },

src/components/bottomSheet/BottomSheet.tsx

@@ -19,6 +19,8 @@ import Animated, {
   runOnUI,
   cancelAnimation,
   useWorkletCallback,
+  WithSpringConfig,
+  WithTimingConfig,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
 import {
@@ -624,7 +626,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animatedAnimationState.value = ANIMATION_STATE.STOPPED;
     }, [animatedPosition, animatedAnimationState, animatedAnimationSource]);
     const animateToPositionCompleted = useWorkletCallback(
-      function animateToPositionCompleted(isFinished: boolean) {
+      function animateToPositionCompleted(isFinished?: boolean) {
         isForcedClosing.value = false;
 
         if (!isFinished) {
@@ -651,7 +653,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         position: number,
         source: ANIMATION_SOURCE,
         velocity: number = 0,
-        configs?: Animated.WithTimingConfig | Animated.WithSpringConfig
+        configs?: WithTimingConfig | WithSpringConfig
       ) {
         if (
           position === animatedPosition.value ||
@@ -722,7 +724,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const handleSnapToIndex = useCallback(
       function handleSnapToIndex(
         index: number,
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         const snapPoints = animatedSnapPoints.value;
         invariant(
@@ -781,7 +783,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const handleSnapToPosition = useWorkletCallback(
       function handleSnapToPosition(
         position: number | string,
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         print({
           component: BottomSheet.name,
@@ -839,7 +841,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     const handleClose = useCallback(
       function handleClose(
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         print({
           component: BottomSheet.name,
@@ -885,7 +887,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     const handleForceClose = useCallback(
       function handleForceClose(
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         print({
           component: BottomSheet.name,
@@ -933,7 +935,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     const handleExpand = useCallback(
       function handleExpand(
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         print({
           component: BottomSheet.name,
@@ -982,7 +984,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     const handleCollapse = useCallback(
       function handleCollapse(
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
         print({
           component: BottomSheet.name,

src/components/bottomSheetHandle/BottomSheetHandle.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { styles } from './styles';
 import type { BottomSheetDefaultHandleProps } from './types';
@@ -11,11 +10,14 @@ const BottomSheetHandleComponent = ({
 }: BottomSheetDefaultHandleProps) => {
   // styles
   const containerStyle = useMemo(
-    () => StyleSheet.flatten([styles.container, style]),
+    () => [styles.container, ...[Array.isArray(style) ? style : [style]]],
     [style]
   );
   const indicatorStyle = useMemo(
-    () => StyleSheet.flatten([styles.indicator, _indicatorStyle]),
+    () => [
+      styles.indicator,
+      ...[Array.isArray(_indicatorStyle) ? _indicatorStyle : [_indicatorStyle]],
+    ],
     [_indicatorStyle]
   );
 

src/components/bottomSheetHandle/types.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { ViewProps } from 'react-native';
+import type { AnimateProps } from 'react-native-reanimated';
 import type { BottomSheetVariables } from '../../types';
 
 export interface BottomSheetHandleProps extends BottomSheetVariables {}
@@ -11,13 +11,13 @@ export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
    * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
    * @default undefined
    */
-  style?: StyleProp<ViewStyle | Animated.AnimateStyle<ViewStyle>>;
+  style?: AnimateProps<ViewProps>['style'];
   /**
    * View style to be applied to the handle indicator.
    * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
    * @default undefined
    */
-  indicatorStyle?: StyleProp<ViewStyle | Animated.AnimateStyle<ViewStyle>>;
+  indicatorStyle?: AnimateProps<ViewProps>['style'];
   /**
    * Content to be added below the indicator.
    * @type React.ReactNode | React.ReactNode[];

src/hooks/useBottomSheetSpringConfigs.ts

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
-import type Animated from 'react-native-reanimated';
+import type { WithSpringConfig } from 'react-native-reanimated';
 
 /**
  * Generate spring animation configs.
  * @param configs overridable configs.
  */
 export const useBottomSheetSpringConfigs = (
-  configs: Omit<Animated.WithSpringConfig, 'velocity'>
+  configs: Omit<WithSpringConfig, 'velocity'>
 ) => {
   return useMemo(() => configs, [configs]);
 };

src/hooks/useBottomSheetTimingConfigs.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
 
 /**
@@ -9,11 +9,9 @@ import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
  * - duration 250
  * @param configs overridable configs.
  */
-export const useBottomSheetTimingConfigs = (
-  configs: Animated.WithTimingConfig
-) => {
+export const useBottomSheetTimingConfigs = (configs: WithTimingConfig) => {
   return useMemo(() => {
-    const _configs: Animated.WithTimingConfig = {
+    const _configs: WithTimingConfig = {
       easing: configs.easing || ANIMATION_EASING,
       duration: configs.duration || ANIMATION_DURATION,
     };

src/utilities/animate.ts

@@ -1,11 +1,17 @@
-import Animated, { withSpring, withTiming } from 'react-native-reanimated';
+import {
+  WithSpringConfig,
+  WithTimingConfig,
+  withTiming,
+  withSpring,
+  AnimationCallback,
+} from 'react-native-reanimated';
 import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
 
 interface AnimateParams {
   point: number;
   velocity?: number;
-  configs?: Animated.WithSpringConfig | Animated.WithTimingConfig;
-  onComplete?: (isFinished: boolean) => void;
+  configs?: WithSpringConfig | WithTimingConfig;
+  onComplete?: AnimationCallback;
 }
 
 export const animate = ({
@@ -27,11 +33,11 @@ export const animate = ({
       : ANIMATION_METHOD.SPRING;
 
   if (type === ANIMATION_METHOD.TIMING) {
-    return withTiming(point, configs as Animated.WithTimingConfig, onComplete);
+    return withTiming(point, configs as WithTimingConfig, onComplete);
   } else {
     return withSpring(
       point,
-      Object.assign({ velocity }, configs) as Animated.WithSpringConfig,
+      Object.assign({ velocity }, configs) as WithSpringConfig,
       onComplete
     );
   }