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.