Our great sponsors
-
react-native-debugger
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
-
react-native-firebase
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
react-native-ui-kitten
:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
There are many ways to debug your app by reaching for tools like React Dev Tools, a simple element inspector or a network tab that you're used to. Tools such as React Native Debugger are also quite popular, but they require turning on the 'Remote debugging' mode on your simulator, which I found sometimes interferes with the app and throws weird errors.
Further, mobile devices can lose connectivity easily; for that, you can count on the NetInfo library to offer a user experience while offline. Finally, notifications are an essential part of mobile apps and Firebase offers great React Native integrations.
Forget CSS pseudo-elements and selectors; in React Native, we inline the styles. The recommended approach is to use a StyleSheet object, but I enjoy using Styled Components in a similar way as on the web. If you are a fan of styled systems, Restyle from Shopify is gaining popularity.
The Redux library is quite a common choice thanks to its broad ecosystem. Luckily, there is now a very useful Redux Toolkit that mitigates the amount of boilerplate you have to usually write. RTK Query is a very new Redux solution for data fetching and caching, hopefully making our lives even easier. Though the web seems to slowly be moving away from Redux to React Query, SWR or other solutions, mobile is a different story; Redux is holding on to its popularity, as it integrates well with libraries that persist and rehydrate the global state for users when they relaunch the app.
You cannot use .svg files as a source for RN's Image component. You will probably end up using pngs, ideally 3x the size to account for iPhones' scale factor—so don't forget to compress it! If you want to use svgs, use React-Native-SVG library and SVGR playground for quick conversion to an RN component.
You can also choose from several UI kits to get started on your hobby project. Popular ones are, for example, React Native Paper and UI Kitten.
You can use the built-in Animated API, which performs well especially when using useNativeDriver: true prop. However, you get the best performance with the React-Native-Reanimated library, which is currently being upgraded to version 2 and expectations are high! Note that this only works with Hermes enabled (see the next section). More sophisticated animations used to, for example, wow users with an eye-catching splash screen, are commonly achieved with Lottie.
One important note for Android: As you add more libraries, you may encounter an error that limits you to a certain number of allowed methods. To deal with this, enable Multidex. Another error may come if you enable Hermes, an optimized Javascript engine for running Android apps and, soon, also iOS. While some libraries—like the above-mentioned Reanimated—require it, others are not yet compatible with it (Realm - see below).
To navigate between screens, you will probably end up using the very popular React Navigation library. There is a great, purely native alternative, React Native Navigation (the names get confused easily), from Wix. It is super performant but not that flexible. Therefore, again: If your design asks you for something custom, you have no choice but to go with React Navigation; luckily, it is a great, well-documented option.
The Redux library is quite a common choice thanks to its broad ecosystem. Luckily, there is now a very useful Redux Toolkit that mitigates the amount of boilerplate you have to usually write. RTK Query is a very new Redux solution for data fetching and caching, hopefully making our lives even easier. Though the web seems to slowly be moving away from Redux to React Query, SWR or other solutions, mobile is a different story; Redux is holding on to its popularity, as it integrates well with libraries that persist and rehydrate the global state for users when they relaunch the app.
The Redux library is quite a common choice thanks to its broad ecosystem. Luckily, there is now a very useful Redux Toolkit that mitigates the amount of boilerplate you have to usually write. RTK Query is a very new Redux solution for data fetching and caching, hopefully making our lives even easier. Though the web seems to slowly be moving away from Redux to React Query, SWR or other solutions, mobile is a different story; Redux is holding on to its popularity, as it integrates well with libraries that persist and rehydrate the global state for users when they relaunch the app.
To persist data on the device, it is common to use AsyncStorage, which is an asynchronous alternative to web's LocalStorage. Another interesting option (though a bit more complex) is to use the Realm database.
Sooner or later, you will encounter a situation where you need to add permissions to your app; for example, to access the camera and photos library during a file upload. Though not always required, it is common to use the React Native Permissions library to offer a consistent experience across platforms.
Further, mobile devices can lose connectivity easily; for that, you can count on the NetInfo library to offer a user experience while offline. Finally, notifications are an essential part of mobile apps and Firebase offers great React Native integrations.