Add with-i18next example

with-i18next/.gitignore

@@ -0,0 +1,36 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

with-i18next/App.js

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  FlatList,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { LanguageList, resources } from "./modules/i18next";
+import { changeLanguage } from "i18next";
+
+export default function App() {
+  const { t } = useTranslation();
+  const [isLngSwitchActive, setIsSwitchActive] = useState(false);
+  return (
+    <SafeAreaView style={styles.container}>
+      <Modal
+        visible={isLngSwitchActive}
+        onRequestClose={() => setIsSwitchActive(false)}
+      >
+        <View style={styles.languagesList}>
+          <FlatList
+            data={Object.keys(resources)}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.languageButton}
+                onPress={() => {
+                  changeLanguage(item);
+                  setIsSwitchActive(false);
+                }}
+              >
+                <Text style={styles.lngName}>
+                  {LanguageList[item].nativeName}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      </Modal>
+      <Text style={styles.text}>{t("fact")}</Text>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => setIsSwitchActive(true)}
+      >
+        <Text style={styles.buttonText}>{t("change-language")}</Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#191266",
+  },
+  button: {
+    backgroundColor: "#6258e8",
+    padding: 10,
+    borderRadius: 3,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+  },
+  text: {
+    marginBottom: 100,
+    fontSize: 18,
+    color: "white",
+  },
+  languagesList: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 10,
+    backgroundColor: "#6258e8",
+  },
+
+  languageButton: {
+    padding: 10,
+    borderBottomColor: "#dddddd",
+    borderBottomWidth: 1,
+  },
+  lngName: {
+    fontSize: 16,
+    color: "white",
+  },
+});

with-i18next/README.md

@@ -0,0 +1,29 @@
+# With-i18next
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+## 📚 Description
+This exmaple add a localisation feature to template which enables support for multi-lingual react-native apps.
+
+## 🚀 How to use
+
+### 🛠️ Adding new language
+if `examples/with-i18next/constants/languages.json` has your desired language already then
+
+    1. Create a [langauge_code].json file in `constants` folder. e.g. sk.json
+    2. Add required keys and its values(translation) to above json.file.
+    3. Make sure to add an english fallback key:value in `en.json`
+### 🔨 Adding a new key/translation to existing language
+    1. If you need to add a new translation in any language, make sure you use a unique key and assign the value to it.
+    2. Make sure you add a english translation for same key in `en.json`
+
+## 📝 Notes
+
+Follow instructions at https://www.i18next.com/

with-i18next/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "with-i18next",
+    "slug": "with-i18next",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}