Experience building first react native app — from hello world to app store
This article was written in association with Keerthi Jayadevan , who wrote majority of the code while building the app 💻 . This is more of a list of resources, and tools that we used for development.
Trixie: A personal assistant for meditation and mindfulness 😇
First of all a little bit about Trixie❤️. Trixie is your personal meditation assistant. You can chat with Trixie, and she will suggest you meditation sessions according to your needs, mood, habits etc.( We are still a really long way from what we envision, but this is a starting point ). You can also directly pick up a session and meditate from the Trixie library handcrafted by mindfulness experts. We want to make meditation fun through gamification and personal assistance.
Available in both App store and Play store 📱.
Challenges 💪🏼
- We wanted to build the first version of the app quickly to validate the idea of a personal assistant for mediation.
- We had no experience building a mobile app before.
- We were javascript fanatics.
Why React-Native? 🤔
- Well documented
- There was a rich ecosystem built around, with lots of fellow developers willing to offer help.
- Plenty of plug and use packages available.
- Last but not the least, it was Javascript.
Learning and getting started
and the following video helped.
Writing hello world in react-native was pretty easy. If you have Javascript background things will become easier.
If you are new to the Javascript eco-system spend some time on it, and you will get through.
Tech stack and other important packages 📚
We decided in the beginning itself that we will not use any technologies just because it exists.
We haven’t used Redux yet 😮 . I did a lot of research on Redux, Repatch, MobX, Flux etc and made sample apps to learn them, but did not find it a necessity in our app. Maybe I’m wrong. But the app is up and running for now.
Break things, Move fast.
API server is written in Ruby on Rails.
Hosted in AWS.
We have a Python server ( Django ) set up to take care of the little ML we do, but skipping that for now as that will be out of scope for a react-native article.
React Navigation — We started with react navigation to build the app. The second choice was Wix navigation. But we chose to stick with react-navigation for no particular reason. 😆
I will quickly run through the main packages that have been used in the app.
- react-native-audio-toolkit — To stream audios. Usually selecting packages were easy. But this one was not since there was performance associated with it. react-native-audio-toolkit came out as the best option after trying react-native-sound and react-native-streamer performance wise. Audios were initially streamed from Amazon S3. Later slight improvement was made when files were served from Amazon Cloudfront.
Initially, we downloaded the file to local file system and played it locally. But compared to current waiting time, the download time was huge. This forced us to switch to streaming. It’s still not at the best, but decent.
- react-native-app-intro — For app onboarding. There are few other packages too. Ended up using this because of the customisable view and ease of use.
- react-native-fbsdk — For Facebook login and share.
- react-native-aws3 — for AWS — s3 related operations, mainly for asset storage and retrieval.
- react-native-billing — Implement subscription billing and in-app purchases.
- react-native-fs — Manipulation of local file system.
- react-native-keep-awake — To keep the phone awake during inactivity.
- react-native-push-notification — To send push notifications ( user engagement 😉) . We have a set reminder feature that reminds the user to meditate every day. The package is used for the same.
- react-native-cacheable-image — To cache images. Since each category and audio has an image associated (stored in CDN) the best option would be to cache it.
- react-native-mixpanel — For analytics inside the app. Gives you valuable feedback about how the user uses the app.
There are few other packages with obvious uses like linear-gradient, calendar, image picker etc.
Also, take your time to read the official documentation, we took time to find out easy and straightforward concepts like DeviceEventEmitter, ActivityIndicatorIOS, KeyboardAvoidingView etc because we skipped reading the docs.
Other helpful resources
- Follow this article to set up custom fonts in your app.
- Take debugging to next level with this article.
- These are my findings when we started out — a cheat sheet. 🤓
- You can write platform-specific code using this. More than 90% of the code is same, but there can be slight differences in some areas of CSS and a few npm packages.
- If you install any plugins that need to access any native functionality, for example using a custom font, you will need to do a bit of work separately (on each platform) to get them working for each platform and it will not work cross-platform.
Tools used 🛠
- Fastlane 😍— This was the best find among all the tools. Fastlane makes deployment process 10x easier than normal. This article helped us in setting up Fastlane.
- Yarn — Dependency management
- Prettier — Code formatting. Write beautiful code, if you are new to JSX getting started might be a little messy. Prettier helps.
- Eslint — Linting javascript
And several other tools used during normal development.
We also tried using Jest and Detox for testing, but skipped it for now since it was time consuming process. I would highly recommend using it though.
Newrelic is used to keep track of errors in our server.
Sentry for error tracking inside the react-native app.
Into the app stores
Once development is done, Fastlane can be used to generate signed apk or deploy the build directly into the store. Fastlane can be used for doing many other things like taking screenshots etc.
And once you get past the app review process ( iOS review process can be irritating at times) , your app is ready for sale. 😍
Appure.io is a good free tool that can be used to generate screenshots with different device mockups.
Conclusion 👍🏼
React-native is here to stay. Its still a relatively younger technology, but with the buzzing eco-system and developer groups around it the development process becomes a lot easier.
Special mention to the React- native Facebook community that has helped me with a lot of solutions while developing this app.
Don’t forget to try Trixie and give your feedbacks. ✨
