Translate & Guess: Build a Flag Quiz with Expo and Tolgee

Introduction

In today’s globalized world, apps that support multiple languages enhance user experience and accessibility. In this tutorial, I’ll guide you through the development of a simple yet engaging quiz app built with Expo, where users guess the country name based on a displayed flag. We’ll integrate Tolgee, an open-source localization library, to provide seamless translations in English, Italian, Japanese, and Korean. Whether you're a beginner or an intermediate developer, this tutorial will help you learn how to set up multilingual support in a React Native app.

Steps to Create and Set Up Your Flag Quiz App

1. Create a New Folder
   • Start by creating a new folder for your project.

   mkdir flag-quiz-app

1. Navigate to the Folder
   • Change your working directory to the newly created folder.

   cd flag-quiz-app

1. Install Dependencies
   • Install the major libraries you'll need for your app. In this case, you'll be using Expo, Tailwind CSS (or NativeWind), and Tolgee for localization.

   npx create-expo-app .
   npm install nativewind tolgee

1. Set Up Dependencies

   • Follow the documentation for each library to set them up correctly in your project:
     • Expo Documentation: Expo Docs
     • Tailwind CSS Setup: NativeWind Documentation
     • Tolgee Setup: Tolgee Docs

2. Integrating Tolgee for Localization

• Tolgee is an open-source library that provides easy-to-implement localization.

  • Setting Up Tolgee: Sign up at Tolgee.io and create a new project. Note down your API key for the project.
  • Integrate Tolgee into Your App: In App.js, set up Tolgee and wrap your app in the TolgeeProvider:

  import React from 'react';
  import { TolgeeProvider, Tolgee } from '@tolgee/react';
  import { NavigationContainer } from '@react-navigation/native';
  import QuizScreen from './screens/Quiz';
  const tolgee = Tolgee()
   .use({ apiKey: 'YOUR_API_KEY', apiUrl: 'https://app.tolgee.io' })
   .init();
  export default function App() {
   return (
     <TolgeeProvider tolgee={tolgee}>
       <NavigationContainer>
         <QuizScreen />
       </NavigationContainer>
     </TolgeeProvider>
   );
  }
  

  • Translate Text in the Quiz App:
    • Wrap translatable strings with T from Tolgee to make them dynamic.
    • For example, replace button titles with Tolgee keys:

   import { T } from '@tolgee/react';
   <Button title={<T keyName="countryA" />} onPress={() => checkAnswer('Country A')} />
  

  • Add Translations on Tolgee.io:
    • Head to your project in Tolgee.io, where you can add translations for each key. For example:
    • Key: countryA
    • Translations: Country A in English, Paese A in Italian, etc.

Conclusion

Congratulations! You’ve built a multilingual flag quiz app using Expo and Tolgee. By following this guide, you’ve learned the basics of setting up a quiz app, integrating translations, and adding language-switching support with Tolgee. This framework and localization setup can now serve as a foundation for adding even more features, languages, and levels.

For the complete source code, visit my GitHub and don't forget to star my repo: GitHub Repo Link.