All Projects → rgommezz → Reanimated Collapsible Navbar

rgommezz / Reanimated Collapsible Navbar

Declarative implementation of a collapsible navigation bar with snapping in React Native, with all animations running on the UI thread 🚀

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Reanimated Collapsible Navbar

React Native Spaceviewer
See and search upcoming and previous rocket space launches! Built with React Native, using Detox E2E tests, Fastlane and Github Actions for app store deployment.
Stars: ✭ 61 (-29.07%)
Mutual labels:  reactnative
Loadingshimmer
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.
Stars: ✭ 1,180 (+1272.09%)
Mutual labels:  animations
Photoviewslider
📷 A simple photo browser for Android applications.
Stars: ✭ 78 (-9.3%)
Mutual labels:  animations
Androidanimationinterpolator
Based on Article: https://blog.mindorks.com/understanding-interpolators-in-android-ce4e8d1d71cd
Stars: ✭ 65 (-24.42%)
Mutual labels:  animations
Tus Js Client
A pure JavaScript client for the tus resumable upload protocol
Stars: ✭ 1,151 (+1238.37%)
Mutual labels:  reactnative
Ejdb
🏂 EJDB 2.0 — Embeddable JSON Database engine C library. Simple XPath like query language (JQL). Websockets / Android / iOS / React Native / Flutter / Java / Dart / Node.js bindings. Docker image.
Stars: ✭ 1,187 (+1280.23%)
Mutual labels:  reactnative
Springbasedsplash
A splash screen made from inspiration of ShowBox app using Physics Based Animation
Stars: ✭ 58 (-32.56%)
Mutual labels:  animations
Simpletab
A Simple iOS Tab Bar Controller with animation support.
Stars: ✭ 83 (-3.49%)
Mutual labels:  animations
Vanta
Animated 3D backgrounds for your website
Stars: ✭ 1,162 (+1251.16%)
Mutual labels:  animations
Ease
It's magic.
Stars: ✭ 1,213 (+1310.47%)
Mutual labels:  animations
Libanimation Old
Wobbly windows and animations logic split out from Compiz
Stars: ✭ 65 (-24.42%)
Mutual labels:  animations
Android data
Some Android learning materials, hoping to help you learn Android development.
Stars: ✭ 8,461 (+9738.37%)
Mutual labels:  animations
Reactxp Starter
Basic Blank ReactXP Project for Development
Stars: ✭ 75 (-12.79%)
Mutual labels:  reactnative
React Native Spline Interpolate
Spline interpolation for React Native animations
Stars: ✭ 65 (-24.42%)
Mutual labels:  animations
Radio
A simple javascript web radio visualizer
Stars: ✭ 80 (-6.98%)
Mutual labels:  animations
React Typist
Typing animations with React
Stars: ✭ 1,092 (+1169.77%)
Mutual labels:  animations
Highway
Highway - A Modern Javascript Transitions Manager
Stars: ✭ 1,185 (+1277.91%)
Mutual labels:  animations
Jgraph
🔥 一个视觉效果还不错的图表控件(停止维护了,不建议直接用到项目)
Stars: ✭ 1,265 (+1370.93%)
Mutual labels:  animations
React Native Fingerprint Identify
Awesome Fingerprint Identify for react-native (android only)
Stars: ✭ 81 (-5.81%)
Mutual labels:  reactnative
Dl Visualization
This is the source code for the animations in the series "Visualizing Deep Learning"
Stars: ✭ 76 (-11.63%)
Mutual labels:  animations

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:

yarn install
expo start

Article explaining the code

https://medium.com/@rgommezz/reanimating-your-react-native-experience-d1377d51118a

collapsiblenavbar3

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].