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

Vaishali - Oct 25 - - Dev Community

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.

FlagPro Home Screen

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
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the Folder
    • Change your working directory to the newly created folder.
   cd flag-quiz-app
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  1. Set Up Dependencies

  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.

.