Make professional mobile apps with React Native and Typescript — Introduction (last updated 2019/04/27)
Tutorial to make professional React Native apps from scratch.
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.
Even on Cross-Platform, we still have multiple options to consider: React Native vs NativeScripts vs Xamarin vs Flutter. All of those works well and have great contributions from the community. Then why React Native? React Native is not the first player (it’s Xamarin!!!) as well as the newest one (Flutter). However, it’s the most popular one. The reason is that it’s made from Facebook (you know that company, right?) and written in Javascript(Typescript as well) and based on the (also) most popular js library React for web development. See what you get from it?
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.
Why Typescript?
The next question is why Typescript? I also have many debates with my friends and my colleagues. Why not just using Javascript? Why adding complexity to the code?
The reason is also simple. I (also you guys) want to make high quality and maintainable code. Using Typescript (with static types) is likes you document your code at the same time you make it. Javascript while being easy to develop with its dynamic type but when coming to maintenance, sometimes, is troublesome.
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.
Prerequisites: You should have basic knowledge of Javascript and Typescript. If not, please take time to learn about them first in the following links:
Chapter 1: Say Hello to React Native (3 parts)
Part 1: Make Hello world app.
Part 2: Understand React Natives’s architecture.
Part 3: Understand Hooks.
Chapter 2: Setup your development environment with VSCode (3 parts)
Part 1: Setup VSCode and extensions.
Part 2: Debug your application with VSCode and Flipper.
Part 3: Improve your code quality with linting tools.
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.
