Incoming chat messages animation - Reanimated

Description

This animation is designed to create smooth, dynamic chat messages, similar to those seen in Stories on TikTok, Instagram, or live chat features. It leverages React Native Reanimated’s layout animations, including `entering` and `exiting`, and is built on top of an `Animated.FlatList`, extending all standard `FlatList` props. Currently in beta, this animation attempts to maintain scroll position using the `maintainVisibleContentPosition` property. If scrolling isn't required, you can simply disable it by passing `scrollEnabled={false}`.

Installation

bunx @animatereactnative/cli@latest add incoming-chat-messages-animation-reanimated

npx @animatereactnative/cli@latest add incoming-chat-messages-animation-reanimated

yarn @animatereactnative/cli@latest add incoming-chat-messages-animation-reanimated

pnpm dlx @animatereactnative/cli@latest add incoming-chat-messages-animation-reanimated

Preview

Dependencies

PackageVersion
@faker-js/faker^9.2.0
@react-native-segmented-control/segmented-control2.5.7
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @faker-js/faker@"^9.2.0" @react-native-segmented-control/segmented-control@"2.5.7" react-native-reanimated@"~4.1.0"

npm install @faker-js/faker@"^9.2.0" @react-native-segmented-control/segmented-control@"2.5.7" react-native-reanimated@"~4.1.0"

yarn install @faker-js/faker@"^9.2.0" @react-native-segmented-control/segmented-control@"2.5.7" react-native-reanimated@"~4.1.0"

pnpm install @faker-js/faker@"^9.2.0" @react-native-segmented-control/segmented-control@"2.5.7" react-native-reanimated@"~4.1.0"

Source code