Announcements - React Native Reanimated Custom Layout Animation

Description

This component is a reusable React Native building block powered by **React Native Reanimated**. It introduces a custom **Layout animation** that smoothly animates items as they enter and exit the screen. The system exposes two parts: * `Announcements` - the wrapper container * `AnnouncementsItem` - the animated element ### `Announcements` `Announcements` behaves like a lightweight `FlatList`: it renders a `View` and accepts `data` and `renderItem`. Whenever the `data` array changes, a new `AnnouncementsItem` is mounted and its entrance animation automatically plays. ### `AnnouncementsItem` This component handles the full animation lifecycle and exposes the following API: * `children` - your custom UI content * `duration` - how long the item stays visible from entrance to exit * `scale` - final scale value (items animate in from `scale: 0` to this value) * `y` - the vertical position of the item * `onDone` - callback fired after the exit animation completes (in the included `example.tsx`, it’s used to remove the item from local state) This component uses `scheduleOnRN` from `react-native-worklets` to call `onDone` from the `UI Thread` but if you are have React Native Reanimated below v4, use `runOnJS` instead - there's a comment in the code inside `index.tsx`.

Installation

bunx @animatereactnative/cli@latest add announcements-react-native-reanimated-custom-layout-animation

npx @animatereactnative/cli@latest add announcements-react-native-reanimated-custom-layout-animation

yarn @animatereactnative/cli@latest add announcements-react-native-reanimated-custom-layout-animation

pnpm dlx @animatereactnative/cli@latest add announcements-react-native-reanimated-custom-layout-animation

Preview

Dependencies

PackageVersion
react-native-reanimated~4.1.0
react-native-worklets^0.5.1

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

bun add react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

npm install react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

yarn install react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

pnpm install react-native-reanimated@"~4.1.0" react-native-worklets@"^0.5.1"

Source code