Mistakes I made while maintaining an open-source React Native library for five years

1. react-native-modal

   1 8 5,553 7.3 TypeScript

   An enhanced, animated, customizable Modal for React Native.

   

   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.

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. react-native-animatable

   2 8 9,876 5.1 JavaScript

   Standard set of easy to use animations and declarative transitions for React Native

   

   The last mistake I wanted to mention is relying too much on third-party libraries. Specifically, in my case, react-native-animatable. React Native Animatable is a great library that allows defining transitions and animations in a declarative fashion by abstracting the React Native animated API. In 2015/2016, react-native-animatable was the way to sprinkle animations on top of React Native apps. Mad props to @oblador for building it. react-native-animatable powers all react-native-modal’s animation. Users can pick any animation exposed by react-native-animatable and apply it to the enter/exit state of the modal with a single line of code.

4. react-native-reanimated

   3 68 9,526 9.9 TypeScript

   React Native's Animated library reimplemented

   

   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.

5. moti

   4 21 4,281 5.3 TypeScript

   🐼 The React Native (+ Web) animation library, powered by Reanimated 3.

   

   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.

6. lottie

   5 5 4,721 5.0 HTML

   Lottie documentation for http://airbnb.io/lottie.

   

   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.

7. react-native

   6 561 121,568 10.0 C++

   A framework for building native applications using React

   

   This post focuses on a React Native library, but it’s not strictly related to React Native. It’s more about generic design and maintainability decisions. This should be a beginner-friendly post. Seasoned open source maintainers are probably already familiar with the topics explored here.

Suggest a related project