react-native-bottom-sheet
react-native-reanimated
Our great sponsors
react-native-bottom-sheet | react-native-reanimated | |
---|---|---|
55 | 61 | |
6,020 | 8,387 | |
- | 1.9% | |
7.0 | 9.8 | |
5 days ago | 2 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-native-bottom-sheet
-
Bottom Sheet haptic feedback on drag
I'm using https://github.com/gorhom/react-native-bottom-sheet, and they provide the gestureEventsHandlersHook prop to pass a custom hook, but I haven't found any code snippet on how to actually use this prop correctly.
-
Bottom Sheet Libraries that work with Reanimated V3
We are trying to upgrade our React-Native version to 0.72+ (to comply with the Android minimum API version). Reanimated v2 is giving us an error, but Reanimated v3 works. However, the bottom sheet package we use react-native-reanimated-bottom-sheet and the alternative suggested react-native-bottom-sheet.
- What is this type of navigation called?
- What is the technical term for this kind of modal so I can google for it?
-
Bottom sheet in react navigation
https://github.com/gorhom/react-native-bottom-sheet this package can help. It has support for navigation.
-
How can I get this kind of navigation bar? (Todoist)
Looks like https://github.com/gorhom/react-native-bottom-sheet with a 95% snap point
-
How can I use a modal component and be able to touch area outside it like in video
I think thats a bottom sheet
- I need help implementing bottom navigation using the attached images
-
What is this pop-up called? It is similar to bottom drawer but it is non-persistent. Do you have any library suggestions?
It is called bottom sheet. https://github.com/gorhom/react-native-bottom-sheet
- How create bottom modal scrollable in RN
react-native-reanimated
-
Exploring the Best UI Component Libraries for React Native apps
Supports Animation: Tamagui leverages the popular open-source library β Moti as a reanimated driver for animation libraries such as react-native-reanimated and React Native Animated.
-
Expo β open-source platform for making universal apps for Android, iOS, and web
FYI react-native-reanimated (https://github.com/software-mansion/react-native-reanimated) is not the Animated API from React Native. react-native-reanimated allows JS code to run on a UI thread that is able to synchronously modify layout, providing alternative synchronous ways for you to hook into the layouting. For instance, as opposed to the asynchronous `measure()` method provided by React Native to measure layouts, react-native-reanimated allows one to call their version of `measure()` (https://docs.swmansion.com/react-native-reanimated/docs/api/...) to perform the same operation on the UI thread, synchronously.
-
React Native is Multi Threaded
By using libraries like Reanimated, React Native MMKV, and React Native Skia, you leverage the native thread. However, I know there are developers building amazing things who think outside the box. I'm always thrilled when I read engineering blogs from companies like Netflix, Meta, and Shopify. They create solutions beyond the limits.
-
Can I update my Reanimated to a different version?
Currently having issues with reanimated (expo installs 2.14.4). My app will crash randomly β possibly linked to these issues here and here.
-
How can I draw custom vector graphics in ReactNative (equivalent to Flutter CustomPaint) ?
Reanimated is probably what you're looking for. https://docs.swmansion.com/react-native-reanimated/
-
What animation libs you use and why !?
One of is: https://github.com/software-mansion/react-native-reanimated/issues/2327
- What am I doing wrong in rendering Drawer Navigator !?
- Initialise useSharedValue with the right height.
-
Is it possible to use this iOS pop-up menu with RN? Iβve tried googling but havenβt had much luck as Iβm not sure what the menu is actually called.
use third party lib that is a beast, but will require a lot of work and upfront knowledge (https://docs.swmansion.com/react-native-reanimated/)
-
Learning Animations
Catalin Miron is also good. Reanimated 2 animations are still relevant. I also would suggest reading the reanimated docs here. That's how I find my way around.
What are some alternatives?
react-native-reanimated-bottom-sheet - Highly configurable bottom sheet component made with react-native-reanimated and react-native-gesture-handler
moti - πΌ The React Native (+ Web) animation library, powered by Reanimated 3.
react-spring-bottom-sheet - Accessible βΏοΈ, Delightful β¨, & Fast π
react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native
react-native-portal - A simplified portal implementation for βοΈ React Native & Web βοΈ.
react-native-skia - High-performance React Native Graphics using Skia
react-native-webview - React Native Cross-Platform WebView
react-native-fast-image - π© FastImage, performant React Native image component.
rn-swipeable-panel - Zero dependency swipeable bottom panel for React Native π±
react-native-vision-camera - πΈ A powerful, high-performance React Native Camera library.
panes - ππ± Create dynamic modals, cards, panes for your applications in few steps. One instance β Thousands solutions. Any framework and free.
react-native-debugger - The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools