After more than 2 years working (and playing) with React Native and Typescript (at the time I wrote this series), I decided to write it to make documentation for myself as well as share my experiences with you guys. I hope it can help you guys make awesome apps in the future.
What do we consider before making mobile apps with React Native?
Brainstorm first! Visualize your app features. Then research if you can make it with React Native.
Seriously! If your app mainly focuses on business and just have frequently used features such as Push Notification, In-app Purchase, you’re good to go. However, some advanced features are still not supported (yet). The first production app I made with my team is a tracking app that needs to track GPS of customers’ devices when they’re running and it must run in the background. We struggled to make it work in 2 months, although there were some 3rd party libraries, they couldn’t meet our expectation and we even had to fork and modify their code. For that case, you may have to switch to make native apps or at least, have a guy in your team who’s able to write native code when needed to write native code for the special feature and the bridge between native code & js code (read this post for more detail).
Why React Native?
If you go to Google and research about Native vs Hybrid vs Cross-Platform mobile apps, you’ll get tons of posts and debates about what to use. I don’t want to make a new debate here. My suggestion is that if you already have native apps and just want to add new features to it, keep making it using native code. Otherwise, if you want to make a brand new app or build a version 2 of your app, consider making Cross-Platform mobile apps. Frameworks for them are pretty mature now and you can save a huge amount of time for developing and maintaining (consider adding a new feature/ updating an existing feature with identical logic on bot iOS and Android), at the same time, remove code/logic duplication.
As a developer, you can get tons of production-ready libraries from the community and their supports. You can easily find a new job targetting React Native developers. As a CTO, you get easier to recruit a new team, training new members or convert a web developer to a mobile developer with the minimum effort.
Believe me, I experienced it myself and that’s why I chose it to build my team.
Before Typescript is officially included in React Native template, Facebook uses its well-known library Flow. And now we officially have Typescript. Please note that most popular libraries have their Typescript definitions or have community-supported definitions. Some even rewrote a new version based on Typescript.
What these series provide you?
To make it easy to follow, I separated this tutorial into multiple parts. By following these, you’re able to get used to React Native then gradually integrate required components into your app one by one. You’ll know how to structure your mobile solution, choose appropriate components, theme your app, use tools for development, automatically deploy your apps to production and many other things.
Not just being a tutorial to help you code mobile applications, this series is aimed at providing you with the guideline to design your apps with best practices, improve your code quality, make strategies to publish apps with automation tools.
Pro tip: please pay attention to pro tips through the series. They describe best practises and my experiences which I think useful for you.
Chapter 1: Say Hello to React Native (3 parts)
Chapter 2: Setup your development environment with VSCode (3 parts)
Chapter 3: Build your production-ready application (17 parts)
Part 1: Structure your codebase in the right way.
Part 2: Routing and navigation.
Part 3: Integrate 3rd party components and make your customized components.
Part 4: Fetch Rest APIs.
Part 5: Manage your data. Make Dark mode and theme your app.
Part 6: Internationalization.
Part 7: Animation.
Part 8: Work with forms.
Part 9: Toast notification & confirmation.
Part 10: Push notification.
Part 11: Add splash screen & update your app icon.
Part 12: Authentication with Firebase.
Part 13: Authentication with Amazon Cognito.
Part 14: Handle exceptions.
Part 15: Analyze users’ behaviors.
Part 16: Optimize performances.
Part 17: Recommended 3rd libraries.
Chapter 4: Version and publish your application (7 parts)
Part 1: Version your app in the right way.
Part 2: Prepare your app’s Private policy and Terms of Service.
Part 3: Publish to Appstore.
Part 4: Publish to Playstore.
Part 5: Test your app on stores.
Part 6: OTA updates without submitting to stores with code-push.
Part 7: Automation deployment with Fastlane.