https://github.com/arunabhverma/expo-instagram-ask-me-everything-transition
📱 Instagram inspired ask me anything modal built with Expo and Reanimated and RN Keyboard Controller ✨
https://github.com/arunabhverma/expo-instagram-ask-me-everything-transition
animation ask-me-anything expo instagram ios react-native react-native-keyboard-controller reanimated transition
Last synced: about 2 months ago
JSON representation
📱 Instagram inspired ask me anything modal built with Expo and Reanimated and RN Keyboard Controller ✨
- Host: GitHub
- URL: https://github.com/arunabhverma/expo-instagram-ask-me-everything-transition
- Owner: arunabhverma
- Created: 2025-01-12T17:16:43.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-12T19:27:06.000Z (4 months ago)
- Last Synced: 2025-01-27T17:59:10.578Z (4 months ago)
- Topics: animation, ask-me-anything, expo, instagram, ios, react-native, react-native-keyboard-controller, reanimated, transition
- Language: TypeScript
- Homepage:
- Size: 15.1 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram's "Ask Me a Question!" Card Demo
Demonstrates of Instagram's "Ask Me a Question! Card" with smooth keyboard avoiding and transitions. It showcases how to transition smoothly with the keyboard. Built using [Expo](https://expo.dev/), [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/), and [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller), and blur effects from [Expo Blur](https://docs.expo.dev/versions/latest/sdk/blur-view/).
## Demo
Check out the "Ask Me a Question!" card in action 👇:
| iOS |
|--------------------------------------------------------------------------------------------------------------------------------|
| |
## Features
- **Smooth Transitions**: React Native Keyboard Controller was instrumental in achieving buttery smooth transitions when the keyboard opens and closes.
- **Drag n Drop**: Reanimated's API provides excellent support for implementing drag and drop effects.
- **Scaling while Panning**: The card scales up when grabbed and smoothly returns to its original scale when dropped, creating a satisfying grab-and-drop effect.
- **Blurred Background**: Uses Expo's blur view to blur the background when the keyboard is open.
- **Dynamic Keyboard Interaction**: The card adjusts its position dynamically to stay perfectly centered above the keyboard.
## How It Works
- **Keyboard Interaction**: The card leverages RNKC's useReanimatedKeyboardAnimation hook to track the keyboard's height and progress. Based on this progress, the card's position is dynamically adjusted using the screen and keyboard height, ensuring it remains centered in the available space for a well-balanced layout.
- **Blurred Background**: When the keyboard appears, the background becomes blurred using the Expo Blur View, with its opacity smoothly transitioning from 0 to 1 via Reanimated, creating a polished UI experience. This is just a demo for keyboard transitions. The recommended and proper approach is to use `react-native-portal` to render the blurred background. This ensures it remains on top of all content, allowing the underlying screen content to stay accessible and unaffected.
- **Animation with Reanimated**: The card uses Reanimated for scaling and drag and drop animations, providing smooth transitions between states.
- **Keyboard Controller Integration**: Leveraging `react-native-keyboard-controller` allows for precise timing and synchronization between the keyboard's appearance and the card's animation.
## Acknowledgments
- **[Expo](https://expo.dev/)**: For simplifying cross-platform mobile development.
- **[Reanimated](https://docs.swmansion.com/react-native-reanimated/)**: For creating fluid, hardware-accelerated animations.
- **[Expo Blur](https://docs.expo.dev/versions/latest/sdk/blur-view/)**: For enhancing the visual quality of the UI with native blur effects.
- **[react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)**: A special shoutout to its author, [@kirillzyusko](https://github.com/kirillzyusko), for this amazing library that simplifies animations synchronized with the keyboard.
---
Feel free to fork the project and contribute by submitting a pull request (PR) for new features, bug fixes, or overall improvements!