How I Built a Language Learning App With React Native
By: Antonio Cosentino
Tags: Sqlite, UI Design, App Development, React Native, Education App Development

Step 3: technical challenges

The learning curve for React Native was rather smooth. Once you get used to have the View component instead of div and Text instead of p the rest is basically like good old regular React. If you are familiar with CSS Flex, then the styling and layouting system are quite straightforward as well.

I structured my project in order to use Typescript and ESlint for code linting. All my components were created by using Functional Components and I entirely relied on React Hooks for state management.

The most complex part was about data storing. I had 2 main needs:

Wallet : the wallet data needs to be persisted on the device. It needs to be safely stored when then App is force-quitted and even when the App receives an update. Therefore I obviously could not rely on the React State for this, otherwise a user would lose all the data just by simply quitting the app.

: the wallet data needs to be persisted on the device. It needs to be safely stored when then App is force-quitted and even when the App receives an update. Therefore I obviously could not rely on the React State for this, otherwise a user would lose all the data just by simply quitting the app. Dictionary: as I mentioned, the App has offline capabilities which means that the entire German dictionary is available on the device. I need to be able to query it with a good performance, which is quite challenging considering that the dictionary is ~200.000 words. The good part is that the user will not have write access in this DB.

I decided therefore to go with 2 different solutions. For the wallet I used React Native Async Storage which is a key-value storage system. This allowed me to easily setup the CRUD operations for the wallet. However this solution was not viable for the dictionary: there are no indexing capabilities, and this made the autocomplete basically impossible to implement. Also, all data needs to be deserialized after being retrieved and doing so with hundreds of thousands of lines would be simply crazy.

Therefore for the dictionary I decided to rely on an SQLite database and use an excellent library called react-native-sqlite-storage which allowed me to import a pre-populated database that I would ship together with the app. This is compatible with both iOS and Android. However, some extra magic was needed in order to have the full functionality on Android as well. In fact, the queries that I execute for the auto-complete functionality rely on the use of Full Text Search (FTS5) which allows me to do some things like:

Have an accent insensitive collation (for example I can type “traumen” and get back the word “träumen”).

Execute the search not only on the German word, but on the English translation as well (for example I can search for “Guitar” and get back “die Gitarre”).

I can rank these results and then sort the results based on the ranking.

However I’ve find out that, while on iOS you can use the device’s SQLite and rely on the built-in FTS5 support, this is not the case for Android. Therefore for Android I had to use the SQLite bundled with the library. Luckily this is well documented on the library, so after some configuration adjustments I was able to run this smoothly on Android as well.

The Add to Wallet view, with autocomplete

Some extra challenges came as well from the fact that I wanted to take full advantage of the device display cutout (which is called Notch in iOS devices) but at the same time avoid breaking the layout on devices that don’t have this hardware element. I managed to solve this problem by using a library called react-native-safe-area.

Wallet and Cards views

Step 4: branding

I didn’t really have to think too much about the name. The codename for the app was FlipCards and this would have probably been the final name if it wasn’t for an already existing App with that name. Therefore I just changed it to Flipping Cards.

Regarding the logo, I had a few ideas that I quickly sketched and then put on the SpringBoard of my iPhone, in order to see how they looked on the real device.

Some of the early logo experiments

The idea was basically to show a stylized version of the cards view.

After a few brainstorming sessions with my friends, a friend of mine came up with the idea of making it look more 3D, similar to a revolving door.

This was finger-drawn on the table of our favorite bar in Berlin 🙂

The day after I opened Sketch and started designing it with this new idea in mind. This is the final result: