Lexi

Lexi: Greek Word of the Day

Could you introduce your app in a few sentences?

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?

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).

Have your tried other cross platform technologies before using React Native?

Yes, Ionic/Cordova. Ultimately the big difference with hybrid apps using Ionic is the rendering using HTML and CSS, whereas React Native will render using "native components". This means that (in theory) that the user experience will generally be closer to other native apps as they will follow the styles and mandated restrictions imposed by the operating system.

This for me meant that things generally performed better and gave smoother
animations.

I also found a significant difference in the ways views were provided over
Ionic and React Native which is really a fundamental design difference in the
frameworks. React uses JSX to build user interfaces vs Ionic's classic HTML
and CSS views.

This didn't cause me problems but I can see situations where you might want
separate people working on different areas of the app without integrating the
business logic in JSX and might feel more at home with template views (e.g.
designers).

What has your experience been working with React Native in terms of app performance, have you noticed any impacts?

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?

It'd say it definitely made me more productive, a simple expo 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?

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?

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.