lottie
react-native-modal
lottie | react-native-modal | |
---|---|---|
5 | 8 | |
4,367 | 5,390 | |
1.4% | 0.4% | |
6.1 | 0.0 | |
about 2 months ago | about 2 months ago | |
HTML | 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.
lottie
-
Lottie under the hood
Actually, that's not entirely accurate. The lottie-web library itself doesn't support rendering to WebGL. However, there is a package called canvaskit-wasm that wraps Skia (a graphics engine) with WebAssembly (wasm). This package includes a module called skottie which supports rendering animations into a WebGL surface. However, there is a drawback with this approach: using wasm requires loading a relatively large package, and it's uncertain whether all features are supported correctly, as the official compatibility table that tracks lottie support on different platforms does not include skottie.
-
Mistakes I made while maintaining an open-source React Native library for five years
Time has passed, though. React Native Animatable is still a good solution today, but itβs not as performant nor configurable as the more modern options. Nowadays, there are several new ways to animate views more efficiently in React Native. Between the good-old React Native animated API, Reanimated/Reanimated 2, Moti (which can almost be a drop-in replacement for React Native Animatable), and Lottie, adding silk-smooth native animations to a React Native app has never been easier.
-
Bodymovin effect export to .json
According to the supported features and the forums, it's not supported. You might want to ask the creators via GitHub.
-
After Effects animations for a website?
HereHere you can find the supported AE features by the Lottie library. The only other variants would be as GIF, which is technically outdated and needs a large file size for a good resolution, or as video, e.g. as webm or h.265 if transparency is needed, but this is not supported by all browsers and may also need a rather large file size. My advice is to optimise/modify the AE animation for Lottie.
- Me thinking of of becoming a contributor to the Linux kernel after my "Hello World" program compiles successfully
react-native-modal
-
Top 10+ Best React Native UI Components for Mobile App Development
GitHub Stars: 5k
- Looking for example to zoom in a profile picture like on whatsapp
-
swipe down to close Modal
Nor Expo Modal (https://reactnative.dev/docs/modal) or react-native-modal (https://github.com/react-native-modal/react-native-modal) let's you close the modal on swipe down on IOS, if presentationStyle=="formSheet" & presentationStyle=="pageSheet". I am on react-native version "0.64.3". Is there any fixes for this? Thanks in advance.
-
Mistakes I made while maintaining an open-source React Native library for five years
In this post, Iβll share some details around design decisions and mistakes I made while working on React Native Modal, a Modal component library for React Native. I hope that sharing my thoughts may help other new open-source maintainers to avoid such errors.
Author here π. In this blog post, I'm discussing the design decisions and mistakes I made while maintaining React Native Modal β a modal component library for React Native.
-
Update: Hey Reddit - My first app is ready for a beta test. Read comments if you're interested.
Tailwind Styles: https://github.com/vadimdemedes/tailwind-rn Storage: https://react-native-async-storage.github.io/async-storage/docs/api Navigation: https://reactnavigation.org/ Audio: https://docs.expo.io/versions/v41.0.0/sdk/audio/ Animations: https://github.com/oblador/react-native-animatable Modal: https://github.com/react-native-modal/react-native-modal Confetti: https://github.com/cdvntr/react-native-confetti Debounce: https://github.com/xnimorz/use-debounce Toast: https://github.com/calintamas/react-native-toast-message
Modal: https://github.com/react-native-modal/react-native-modal
-
Developing Geonotes β Animations and interactions β Ep. 3
I used React Native Modal to achieve the modal effect, and Reanimated 2 for the flip effect.
What are some alternatives?
react-native-reanimated - React Native's Animated library reimplemented
react-native-reanimated-carousel - π React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native
react-native-toast-message - Animated toast message component for React Native
react-native - A framework for building native applications using React
react-spring-bottom-sheet - Accessible βΏοΈ, Delightful β¨, & Fast π
lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
linux - XanMod: Linux kernel source code tree
react-native-safe-area-context - A flexible way to handle safe area insets in JS. Also works on Android and Web!
react-native-scroll-bottom-sheet - Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land :fire:
moti - πΌ The React Native (+ Web) animation library, powered by Reanimated 3.