This article is about a fast and efficient way for building mobile apps. Also you will learn how to reuse existing react native components on a website. I want to share the experience I got while building Tech Remote Jobs. It took about 90 hours. It is very fast for a mobile development.
Expo has two workflows for building apps. Managed workflow is the best choice if you don’t use In-App purchases or some external native modules. Notice that a lot of libraries like React Navigation or Reanimated already exists in the managed workflow. You can use this link to investigate all this beautiful abilities integrated in managed workflow.
However I couldn’t use Managed workflow. I chose Expo Bare workflow because I needed In-App purchases. But I kept the app runnable in the Expo client. There are a number of benefits of doing this:
Share your progress with your team by sharing the development URL
No need to do native builds for iOS and Android in development because you use the Expo client instead
Develop the JavaScript side of your app from any computer of your choice
Easily get new contributors set up on the project, only Node.js and a phone are required
For keeping runnable in the Expo client I used an .expo extension to provide specific fallbacks. The code below will execute only on real devices.
But this function will replace the previous code in Expo client automatically.
Server side
Ruby on Rails is a framework for building web applications. Companies use it for rapid development web services. A lot of mobile apps need API for storing data and files. I will not talk about details but I will recommend to use it if you have some ruby experience.
For handling push tokens I used a self hosted app with admin panel that gives the abilities to store push credentials, send notifications and show users’ tokens. It has a simple API for using it with mobile apps.
Website
For SEO goals I prefer to use Next.js. It can generate and update static pages. Next.js uses React under the hood. It gives the capability to have webpages with a complicated business logic. However navigation in React Native and web have differences. When you submit the link in React Native you need to use navigation instance. Next.js has it’s own link component. It is not compatible with React Native. I wrote a component that can work with both environments.
The LinkComponent is very helpful when you want to use the same component that can change the navigation state in your mobile app and web.
Please like the article if it was useful. Don’t forget to install Tech Remote Jobs to check how the techniques above were used.
Thank you for reading ❤
Top comments (1)
Appreciate ur insights! Do you have any advice on setting up a navigation layer so that you can effectively render Android/iOS/Web with somewhat shared architecture?