Language Selector App

A React Native mobile app demonstrating multilingual support using i18next and react-i18next.

The app allows users to switch between English and Spanish through a custom drawer navigation interface. It demonstrates language localization, React Navigation drawer setup, reusable screen structure, and clean mobile UI flow.

---

🚀 Features

• Multi-language support
• English and Spanish translations
• Language switching through drawer navigation
• Custom drawer component
• React Navigation integration
• i18next and react-i18next setup
• Reusable screen structure
• Android and iOS support
• Clean React Native project architecture

---

🛠 Tech Stack

• React Native
• JavaScript
• React Navigation
• Drawer Navigation
• Stack Navigation
• i18next
• react-i18next
• react-native-modal
• Android
• iOS

---

📁 Project Structure

LanguageSelector/
├── assets/
│   └── images/
│       ├── UK.png
│       └── Spain.png
├── src/
│   ├── components/
│   │   ├── Common/
│   │   │   └── LanguageContext.js
│   │   └── LanguageModal/
│   ├── navigations/
│   │   ├── DrawerNavigation/
│   │   │   └── DrawerNavigation.js
│   │   └── StackNavigation/
│   │       └── StackNavigation.js
│   ├── screens/
│   │   ├── CustomDrawer/
│   │   ├── FirstScreen/
│   │   └── HomeScreen/
│   ├── translations/
│   │   ├── en.json
│   │   └── es.json
│   └── utils/
├── App.js
├── i18n.js
├── package.json
└── README.md

---

🌍 Supported Languages

Language	Code
English	en
Spanish	es

---

🔤 Translation Example

English:

{
  "welcomeMessage": "Welcome to my app!",
  "changeLang": "Change Language"
}

Spanish:

{
  "welcomeMessage": "¡Bienvenido a mi aplicación!",
  "changeLang": "Cambiar idioma"
}

---

⚙️ Installation

Clone the repository:

git clone https://github.com/Shahzadali062/LanguageSelector.git
cd LanguageSelector

Install dependencies:

npm install

For iOS, install pods:

cd ios
pod install
cd ..

---

▶️ Run the App

Start Metro:

npm start

Run on Android:

npm run android

Run on iOS:

npm run ios

---

🧭 How It Works

1. The app is wrapped with I18nextProvider.
2. Translation files are loaded from src/translations.
3. English is set as the default language.
4. Drawer navigation shows English and Spanish options.
5. When the user taps a language option, i18n.changeLanguage() updates the app language.
6. Text values are rendered using the useTranslation() hook.

---

🧩 Key Implementation

The app uses i18n.changeLanguage() to switch language dynamically:

i18n.changeLanguage('en');
i18n.changeLanguage('es');

Text is displayed using translation keys:

const { t } = useTranslation();

<Text>{t('welcomeMessage')}</Text>
<Text>{t('changeLang')}</Text>

---

📌 Use Cases

This project can be used as a starter template for:

• Multilingual React Native apps
• Language selector screens
• Drawer-based language switching
• Localization setup using i18next
• International mobile applications
• Reusable React Native UI demos

---

🔮 Future Improvements

• Add Urdu, Arabic, Thai, and French language support
• Add persistent language selection with AsyncStorage
• Improve UI design for the language selector
• Add RTL layout support for Urdu/Arabic
• Add flag-based language cards
• Add onboarding screen for first-time language selection
• Convert project to TypeScript
• Add unit tests for translation keys

---

👨‍💻 Author

Shahzad Ali
React Native Developer | Mobile App Developer | AI Researcher

• GitHub: https://github.com/Shahzadali062
• LinkedIn: https://www.linkedin.com/in/shahzad-ali-989706251
• Location: Bangkok, Thailand

---

📄 License

This project is for portfolio, learning, and demonstration purposes.