https://github.com/gupta-ji6/react-native-instagram-post-ui
a react-native ui component to clone the instagram's feed post list item component, step by step with animations
https://github.com/gupta-ji6/react-native-instagram-post-ui
Last synced: 3 months ago
JSON representation
a react-native ui component to clone the instagram's feed post list item component, step by step with animations
- Host: GitHub
- URL: https://github.com/gupta-ji6/react-native-instagram-post-ui
- Owner: gupta-ji6
- Created: 2024-01-09T16:37:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T06:41:41.000Z (over 1 year ago)
- Last Synced: 2025-01-24T00:29:04.459Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-instagram-post-ui
An attempt to recreate the instagram feed post item UI in `react-native` with `react-native-reanimated` animations.
## Features
### 1. ❤️ Double Tap to Like
https://github.com/gupta-ji6/react-native-instagram-post-ui/assets/21218732/36e3be19-c9cf-433a-b9fe-5d1d016c2da4
- [x] handle both single & double tap
- [x] scale with spring
- [ ] rotate while scaling (currently it rotates after scaling)
- [x] rotation angle should be random
- [x] translate to top after scale & rotate
### 2. 🏷️ Show Tags on Single Tap
https://github.com/gupta-ji6/react-native-instagram-post-ui/assets/21218732/755b1051-21d2-454b-b430-485f97c7ff4e
- [x] show user icon at bottom left on single tap
- [x] show multiple user tags on single tap
- [x] animate tags & icon opacity
- [ ] add arrow in tags component
## Contributing
> [!NOTE]
> The project was created with command `npx create-expo-app@latest react-native-instagram-post-ui -e with-reanimated`
- Run `yarn` or `npm install`
- Run `yarn start` or `npm run start` to try it out.
## 📝 Notes
- [`react-native-reanimated` docs](https://docs.swmansion.com/react-native-reanimated/)