replace react native animatable by react native reanimated

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 }

example/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 }

example/metro.config.js

@@ -2,6 +2,7 @@ const path = require('path')
 const escape = require('escape-string-regexp')
 const { getDefaultConfig } = require('@react-native/metro-config')
 const exclusionList = require('metro-config/src/defaults/exclusionList')
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config')
 const pak = require('../package.json')
 
 const root = path.resolve(__dirname, '..')
@@ -38,4 +39,4 @@ const config = {
   },
 }
 
-module.exports = config
+module.exports = wrapWithReanimatedMetroConfig(config)

package.json

@@ -52,6 +52,7 @@
         "lodash.debounce": "^4.0.8",
         "react-native-animatable": "^1.4.0",
         "react-native-feather": "^1.1.2",
+        "react-native-reanimated": "^3.17.5",
         "react-native-size-matters": "^0.4.2"
     },
     "devDependencies": {

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 { theme } from './theme'
+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>
@@ -21,20 +21,18 @@ export const Dropdown = memo((props: DropdownProps) => {
     theme,
     ...rest
   } = props
-  const themeName = theme || useColorScheme()
+  const systemTheme = useColorScheme()
+  const themeName = theme || systemTheme
   const styles = useMemo(() => getStyles(themeName || 'light'), [themeName])
 
   const defaultItemSeparator = useMemo(() => {
     return () => <View style={styles.itemSeparator} />
   }, [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),
@@ -51,19 +49,19 @@ export const Dropdown = memo((props: DropdownProps) => {
         ItemSeparatorComponent={ItemSeparatorComponent ?? defaultItemSeparator}
         {...rest.flatListProps}
       />
-    </Animatable.View>
+    </Animated.View>
   )
 })
 
 const getStyles = (themeName: 'light' | 'dark' = 'light') =>
   StyleSheet.create({
     container: {},
     listContainer: {
-      backgroundColor: theme[themeName].suggestionsListBackgroundColor,
+      backgroundColor: defaultTheme[themeName].suggestionsListBackgroundColor,
       width: '100%',
       zIndex: 9,
       borderRadius: 5,
-      shadowColor: theme[themeName || 'light'].shadowColor,
+      shadowColor: defaultTheme[themeName || 'light'].shadowColor,
       shadowOffset: {
         width: 0,
         height: 12,
@@ -76,6 +74,6 @@ const getStyles = (themeName: 'light' | 'dark' = 'light') =>
     itemSeparator: {
       height: 1,
       width: '100%',
-      backgroundColor: theme[themeName || 'light'].itemSeparatorColor,
+      backgroundColor: defaultTheme[themeName || 'light'].itemSeparatorColor,
     },
   })

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 }] })

yarn.lock

@@ -610,7 +610,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
+"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
   dependencies:
@@ -669,7 +669,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
+"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
   dependencies:
@@ -693,7 +693,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.27.1":
+"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-classes@npm:7.27.1"
   dependencies:
@@ -954,7 +954,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
   dependencies:
@@ -1012,7 +1012,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
+"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
   dependencies:
@@ -1192,7 +1192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
+"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
   dependencies:
@@ -1237,7 +1237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.27.1":
+"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
@@ -1297,7 +1297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
+"@babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
   dependencies:
@@ -1442,7 +1442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.24.7":
+"@babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.24.7":
   version: 7.27.1
   resolution: "@babel/preset-typescript@npm:7.27.1"
   dependencies:
@@ -10951,6 +10951,7 @@ __metadata:
     react-native-animatable: ^1.4.0
     react-native-builder-bob: ^0.30.2
     react-native-feather: ^1.1.2
+    react-native-reanimated: ^3.17.5
     react-native-size-matters: ^0.4.2
     react-native-svg: ^15.1.0
     react-test-renderer: 19.0.0
@@ -11005,6 +11006,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-is-edge-to-edge@npm:1.1.7":
+  version: 1.1.7
+  resolution: "react-native-is-edge-to-edge@npm:1.1.7"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 4cdf2b2fb5b131f2015c26d2cb7688b4a0c5f3c8474b1bf0ddfa9eabb0263df440c87262ae8f812a6ecab0d5310df0373bddad4b51f53dabb2ffee01e9ef0f44
+  languageName: node
+  linkType: hard
+
+"react-native-reanimated@npm:^3.17.5":
+  version: 3.17.5
+  resolution: "react-native-reanimated@npm:3.17.5"
+  dependencies:
+    "@babel/plugin-transform-arrow-functions": ^7.0.0-0
+    "@babel/plugin-transform-class-properties": ^7.0.0-0
+    "@babel/plugin-transform-classes": ^7.0.0-0
+    "@babel/plugin-transform-nullish-coalescing-operator": ^7.0.0-0
+    "@babel/plugin-transform-optional-chaining": ^7.0.0-0
+    "@babel/plugin-transform-shorthand-properties": ^7.0.0-0
+    "@babel/plugin-transform-template-literals": ^7.0.0-0
+    "@babel/plugin-transform-unicode-regex": ^7.0.0-0
+    "@babel/preset-typescript": ^7.16.7
+    convert-source-map: ^2.0.0
+    invariant: ^2.2.4
+    react-native-is-edge-to-edge: 1.1.7
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+    react: "*"
+    react-native: "*"
+  checksum: fe667e4764f691b2e752eaedb7527fd8ac251637ae9e7dd9ab124abae85627839b5daea064befc5e09ca710ef673d5501ed11286eb39dfcb04f5d57b2d47e49c
+  languageName: node
+  linkType: hard
+
 "react-native-size-matters@npm:^0.4.2":
   version: 0.4.2
   resolution: "react-native-size-matters@npm:0.4.2"