feat(animation): replaces Animatable.View with Animated.View

Author: GuillaumeOj

src/Dropdown.tsx

@@ -1,10 +1,10 @@
 import React, { memo, useMemo } from 'react'
 import type { ListRenderItem } from 'react-native'
 import { StyleSheet, FlatList, View, useColorScheme } from 'react-native'
-import * as Animatable from 'react-native-animatable'
-import { fadeInDownShort, fadeInUpShort } from './helpers'
+import Animated from 'react-native-reanimated'
 import { theme as defaultTheme } from './theme'
 import type { AutocompleteDropdownItem, IAutocompleteDropdownProps } from './types'
+import { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp } from './helpers'
 interface DropdownProps extends Omit<IAutocompleteDropdownProps, 'renderItem' | 'ref'> {
   ListEmptyComponent: React.ReactElement
   renderItem: ListRenderItem<AutocompleteDropdownItem>
@@ -30,12 +30,9 @@ export const Dropdown = memo((props: DropdownProps) => {
   }, [styles.itemSeparator])
 
   return (
-    <Animatable.View
-      useNativeDriver
-      animation={direction === 'up' ? fadeInUpShort : fadeInDownShort}
-      easing="ease-out-quad"
-      delay={direction === 'up' ? 150 : 0}
-      duration={150}
+    <Animated.View
+      entering={direction === 'up' ? FadeInUp : FadeInDown}
+      exiting={direction === 'up' ? FadeOutUp : FadeOutDown}
       style={{
         ...styles.listContainer,
         ...(rest.suggestionsListContainerStyle as object),
@@ -52,7 +49,7 @@ export const Dropdown = memo((props: DropdownProps) => {
         ItemSeparatorComponent={ItemSeparatorComponent ?? defaultItemSeparator}
         {...rest.flatListProps}
       />
-    </Animatable.View>
+    </Animated.View>
   )
 })
 

src/helpers.ts

@@ -1,21 +1,22 @@
-export const fadeInDownShort = {
-  0: {
-    opacity: 0,
-    transform: [{ translateY: -20 }],
-  },
-  1: {
-    opacity: 1,
-    transform: [{ translateY: 0 }],
-  },
-}
+import {
+  Easing,
+  FadeInDown as RNRFadeInDown,
+  FadeInUp as RNRFadeInUp,
+  FadeOutDown as RNRFadeOutDown,
+  FadeOutUp as RNRFadeOutUp,
+} from 'react-native-reanimated'
 
-export const fadeInUpShort = {
-  0: {
-    opacity: 0,
-    transform: [{ translateY: 20 }],
-  },
-  1: {
-    opacity: 1,
-    transform: [{ translateY: 0 }],
-  },
-}
+const ANIMATION_DURATION = 150
+const ANIMATION_EASING = Easing.quad
+export const FadeInUp = RNRFadeInUp.duration(ANIMATION_DURATION)
+  .easing(ANIMATION_EASING)
+  .withInitialValues({ transform: [{ translateY: -20 }] })
+export const FadeOutUp = RNRFadeOutUp.duration(ANIMATION_DURATION)
+  .easing(ANIMATION_EASING)
+  .withInitialValues({ transform: [{ translateY: 0 }] })
+export const FadeInDown = RNRFadeInDown.duration(ANIMATION_DURATION)
+  .easing(ANIMATION_EASING)
+  .withInitialValues({ transform: [{ translateY: 20 }] })
+export const FadeOutDown = RNRFadeOutDown.duration(ANIMATION_DURATION)
+  .easing(ANIMATION_EASING)
+  .withInitialValues({ transform: [{ translateY: 0 }] })