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
-
Create a New Folder
- Start by creating a new folder for your project.
mkdir flag-quiz-app
-
Navigate to the Folder
- Change your working directory to the newly created folder.
cd flag-quiz-app
-
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
-
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
- Follow the documentation for each library to set them up correctly in your project:
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:
- Wrap translatable strings with
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.
Top comments (1)
Nice article! Thanks a lot for your contribution to Tolgee! 🙌 Happy Hacktoberfest