Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rgommezz/reanimated-collapsible-navbar
Declarative implementation of a collapsible navigation bar with snapping in React Native, with all animations running on the UI thread :rocket:
https://github.com/rgommezz/reanimated-collapsible-navbar
animations javascript react react-native reactnative ui-thread
Last synced: 5 days ago
JSON representation
Declarative implementation of a collapsible navigation bar with snapping in React Native, with all animations running on the UI thread :rocket:
- Host: GitHub
- URL: https://github.com/rgommezz/reanimated-collapsible-navbar
- Owner: rgommezz
- Created: 2018-08-06T20:31:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-04T00:27:28.000Z (almost 6 years ago)
- Last Synced: 2024-11-02T01:50:27.595Z (12 days ago)
- Topics: animations, javascript, react, react-native, reactnative, ui-thread
- Language: JavaScript
- Homepage:
- Size: 209 KB
- Stars: 95
- Watchers: 3
- Forks: 13
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reanimated-collapsible-navbar
Small demo to show how to implement a collapsible navigation bar in React Native, with all the animations running on the UI thread and without the JS thread having to intervene. The GIF below showcases how the JS thread is intentionally frozen and still the snapping animation gets executed after the gesture release.
## Expo
The application is available in Expo ready to play with: https://expo.io/@rgommezz/reanimated-collapsible-navbar
## Running the app locally
You need to have `expo-cli` installed locally. After cloning the repo execute:
```bash
yarn install
expo start
```
## Article explaining the code
https://medium.com/@rgommezz/reanimating-your-react-native-experience-d1377d51118a
