Fake Shared Element transition - Reanimated

Description

The **SessionsModal** component provides a modal with interactive session items that expand on selection. It uses **React Native Reanimated** for smooth, animated transitions, with each session item scaling and adjusting its layout based on the active state. ### Key Components - **Item Component**: Renders each session item with scaling and layout animations. When selected, an item expands to take up more space, leveraging React Native Reanimated Layout animation to "fake" the Shared Element transition and create room for the active "Session" item. - **Modal Overlay**: A semi-transparent overlay that fades in and out with `FadeIn` and `FadeOut` animations, providing a backdrop for the modal. - **Session Selection and Indicator**: An indicator that prompts the user to start a session when an item is selected.

Installation

bunx @animatereactnative/cli@latest add fake-shared-element-transition-reanimated

npx @animatereactnative/cli@latest add fake-shared-element-transition-reanimated

yarn @animatereactnative/cli@latest add fake-shared-element-transition-reanimated

pnpm dlx @animatereactnative/cli@latest add fake-shared-element-transition-reanimated

Preview

Dependencies

PackageVersion
react-native-reanimated~4.1.0

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

bun add react-native-reanimated@"~4.1.0"

npm install react-native-reanimated@"~4.1.0"

yarn install react-native-reanimated@"~4.1.0"

pnpm install react-native-reanimated@"~4.1.0"

Source code