Skip to content

The dependency react-native-animatable is throwing an error #172

Open
@GuillaumeOj

Description

@GuillaumeOj

react-native-autocomplete-dropdown is using react-native-animatable for the animation of entering and exiting of the dropdown here:

<Animatable.View
useNativeDriver
animation={direction === 'up' ? fadeInUpShort : fadeInDownShort}
easing="ease-out-quad"
delay={direction === 'up' ? 150 : 0}
duration={150}
style={{
...styles.listContainer,
...(rest.suggestionsListContainerStyle as object),
}}>
<FlatList
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled"
nestedScrollEnabled={true}
data={dataSet}
style={{ maxHeight: suggestionsListMaxHeight }}
renderItem={renderItem}
keyExtractor={item => item.id}
ListEmptyComponent={ListEmptyComponent}
ItemSeparatorComponent={ItemSeparatorComponent ?? defaultItemSeparator}
{...rest.flatListProps}
/>
</Animatable.View>
)
})

However, this dependency has not been updated since 2 years. Also it use UNSAFE_componentWillReceiveProps:
https://github.com/oblador/react-native-animatable/blob/dfd7413734eb693358defcac536b0b32e9dc0b8c/createAnimatableComponent.js#L321-L349

So it's throwing an error:

 ERROR  Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state

Please update the following components: %s withAnimatable(View)

Since this dependency seems not maintained anymore, is there a way to replace it with another one?
To be completely honest, I tried with react-native-reanimated. But I'm a beginner and was not able to test if this could work.
I have created a draft PR here: #171 (for the record, the second commit of this PR is a fix to avoid errors with eslint and commitlint)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions