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
Dependencies
| Package | Version |
|---|---|
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"