Could you introduce your app in a few sentences? What does it do, who is it for? Which platforms? Personal app or for company?
Lexi is an open source iOS app for displaying and dictating a random Greek Word of the Day, with history and favourite features.
It was developed as a learning project (primarily) and for my parents who would find a random word of the day interesting in their efforts to learn the language.
What made you decide to use/switch to React Native? If you started the app from scratch, what made you decide to use to React Native if you migrated from a pre-existing app what made you choose React Native instead of whatever you used before? Why did you chose React Native over native or other cross-platform tools?
I was keen to make the app pretty slick looking and chose React Native / Expo over Ionic / Cordova which I'd used before. Mainly since I wanted to use React this time around over Angular which I had used with Cordova (although I dare say you'll be able to use React now with that toolkit now).
What has your experience been working with React Native in terms of app performance, have you noticed any impacts? If you can, name some specific instances. How did you solve those problems?
I didn't run into any performance issues when adding screens to my app via react navigation. React-swiper was used to allow views to be swiped between and everything worked smooth and without issue.
Expo's built in speech API also performs without a hitch, which is used to dictate the words back to the user using the iOS text to speech API set to the Greek language.
How has adopting React Native affected developer productivity? Also, developer happiness?
It'd say it definitely made me more productive, a simple exp publish generated me the binaries I needed for App Store submission, handling the generation of “distribution certificates” and “provisioning profiles” which I'd otherwise had no experience with in one fell swoop. Expo additionally offers a web UI for viewing your build and features for downloading your binaries.
The fact that you can quickly build and layout components, without the need to re-build the project is fantastic, especially using Expo which abstracts this process away from you simply by scanning a QR code.
Which tools, libraries and frameworks are part of your development process with React Native? IDE?, Build tools? Debugging? Special libraries?
The steps building Lexi involved translating the built in Greek word list with the Google Translate API and another API, "WordsAPI", for fetching the words definitions. The final feature of Lexi was to then speak the word back to the user using iOS’s speech synthesis functions.
Expo provides APIs for most common use cases and the abstraction behind them is where it really shines. For example, finding a text-to-speech library for React Native yields differing (many unmaintained) libraries for both iOS and Android platforms — with no authority on the “correct” one to use. With Expo, this is simply just the Speech SDK through a consistent interface.
Despite being a heavy Neovim user, VSCode is my go-to text editor primarily due to its ever growing marketplace of extensions and plugins, especially for debugging, which ease and simplify development so that you can focus on coding.
- Navigation: react-navigation
- Framework: React-Native and Expo
- Other utility components: moment, lodash
- UI Components: react-native-ui-kitten, react-native-swiper
- Linting: ESLint
Anything else you would like to mention? Anything that you think is worth mentioning.
To wrap it up, I was very happy using Expo and found the experience very smooth. The developer community is especially helpful, and there are plenty of resources on getting started. I’d recommend to anybody starting out with React Native development.
For the post I will need the following resources:
- Tag-line: Lexi: Greek Word of the Day
- App Store Url: https://itunes.apple.com/us/app/lexi-greek-word-of-the-day/id1299483660?ls=1&mt=8
- Google Play Url: none
- Github Url: https://github.com/gaving/lexi
- App Icon (square): https://raw.githubusercontent.com/gaving/lexi/master/assets/icons/app-icon.png
- 4 App screenshots
- 1 main screenshot for the main page
- 3 more screenshots for the actual article
Available on twitter as @_gavingilmour or github as @gaving.
