Start localization without auto detecting

App.js

@@ -16,7 +16,7 @@ import SinglePost from './Views/SinglePost.js'
 import * as Device from 'expo-device';
 import * as Notifications from 'expo-notifications';
 import API from './API.js';
-
+import i18n from "./i18nMessages.js";
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -118,7 +118,7 @@ const MainNavigation = () => {
                 name="Feed"
                 component={Feed}
                 options={{
-                    tabBarLabel: 'Home',
+                    tabBarLabel: i18n.t("message.feed"),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="home" color={color} size={26} />
                     ),
@@ -135,7 +135,7 @@ const MainNavigation = () => {
                 name="Notifications"
                 component={NotificationsView}
                 options={{
-                    tabBarLabel: 'Notifications',
+                    tabBarLabel: i18n.t('message.notifications'),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="notifications" color={color} size={26} />
                     ),
@@ -146,7 +146,7 @@ const MainNavigation = () => {
                 name="Search"
                 component={Search}
                 options={{
-                    tabBarLabel: 'Search',
+                    tabBarLabel: i18n.t('message.search'),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="search" color={color} size={26} />
                     ),
@@ -157,7 +157,7 @@ const MainNavigation = () => {
                 name="Groups"
                 component={Groups}
                 options={{
-                    tabBarLabel: 'Groups',
+                    tabBarLabel: i18n.t('message.groups'),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="groups" color={color} size={26} />
                     ),
@@ -168,7 +168,7 @@ const MainNavigation = () => {
                 name="Courses"
                 component={Courses}
                 options={{
-                    tabBarLabel: 'Courses',
+                    tabBarLabel: i18n.t('message.courses'),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="subscriptions" color={color} size={26} />
                     ),
@@ -180,7 +180,7 @@ const MainNavigation = () => {
                 name="Logout"
                 component={Login}
                 options={{
-                    tabBarLabel: 'Logout',
+                    tabBarLabel: i18n.t('message.logout'),
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="logout" color={color} size={26} />
                     ),
@@ -212,7 +212,7 @@ export default function App() {
                         name="Profile"
                         component={Profile}
                         options={{
-                            tabBarLabel: 'Profile'
+                            tabBarLabel: i18n.t('message.profile')
                         }}
                     />
                     <Stack.Screen name="SinglePost" component={SinglePost} />

Views/Courses.js

@@ -6,7 +6,7 @@ import API from "../API";
 import CourseCard from "../components/CourseCard";
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
-
+import i18n from "../i18nMessages.js";
 
 const getCourses = async (profileObj) => {
     let courses;
@@ -126,13 +126,16 @@ const Courses = () => {
     return (
         <SafeAreaView style={styles.container}>
             <Searchbar
-                placeholder="Search Users"
+                placeholder = {i18n.t("message.searchCourses")}
                 onChangeText={onChangeSearch}
                 value={searchQuery}
             />
             {groups.length ? <></> : <ActivityIndicator />}
             <ScrollView>
-                <Title>Continue Watching:</Title>
+                {
+                    watching.length ?
+                    <>
+                        <Title>{i18n.t("message.continueWatching")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={watching}
@@ -140,7 +143,12 @@ const Courses = () => {
                             keyExtractor={item => item.profile._id}
                             initialNumToRender={2}
                         />
-                <Title>Recently Added:</Title>
+                    </> : <></>
+                }
+                {
+                    groups.length ?
+                    <>
+                        <Title>{i18n.t("message.recentlyAdded")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={groups}
@@ -148,7 +156,12 @@ const Courses = () => {
                             keyExtractor={item => item._id}
                             initialNumToRender={2}
                         />
-                <Title>Popular:</Title>
+                    </> : <></>
+                }
+                {
+                    popular.length ?
+                    <>
+                        <Title>{i18n.t("message.popularCourses")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={popular}
@@ -156,6 +169,8 @@ const Courses = () => {
                             keyExtractor={item => item._id}
                             initialNumToRender={2}
                         />
+                    </> : <></>
+                }
             </ScrollView>
         </SafeAreaView>
     )

components/NewPost.js

@@ -5,6 +5,7 @@ import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import Media from './Media.js';
+import i18n from "../i18nMessages.js";
 
 
 let NewPost = ({ profileid, newPostCB }) => {

components/Post.js

@@ -10,6 +10,7 @@ import NewComment from './NewComment.js';
 import Moment from 'moment';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
+import i18n from "../i18nMessages.js";
 
 let Post = (props) => {
     const gState = useSnapshot(GlobalState);
@@ -72,7 +73,7 @@ let Post = (props) => {
                             <Media content={post.content} postId={post._id} />
                         </View> :
                         <View>
-                            <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>
+                            <Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>
                             <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
                             <Media content={post.content} />
                         </View>

components/basics/FollowButton.js

@@ -3,6 +3,7 @@ import { Button } from 'react-native-paper';
 import API from './../../API.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../../contexts/GlobalState.js';
+import i18n from "../../i18nMessages.js";
 
 const followProfile = async (profileid, me, setFollowing, setPending) => {
     // Simulates the changes on the DB to speed up the UI
@@ -55,8 +56,8 @@ let FollowButton = ({ profile }) => {
 
 
     const type = profile._id ? (!profile.isGroup ? "User" : (profile.isCourse ? "Course" : "Group")) : "User";
-    const action = type === 'User' ? (following ? "Unfollow" : "Follow") :
+    const action = type === 'User' ? (following ? i18n.t("message.unfollow") : i18n.t("message.follow")) :
-        (following ? "Unsubscribe" : (pending ? "Pending" : "Subscribe"));
+        (following ? i18n.t("message.unsubscribe") : (pending ? i18n.t("message.pending") : i18n.t("message.subscribe")));
 
 
     const toggleFollowThisProfile = () => {

i18nMessages.js

@@ -0,0 +1,130 @@
+//import { getLocales } from 'expo-localization';
+import { I18n } from 'i18n-js';
+import Moment from 'moment';
+import 'moment/min/locales.min';
+
+const messages = {
+    en: {
+        message: {
+            feed: 'Feed',
+            events: "Events",
+            livestream: "Livestrem",
+            search: 'Search',
+            invite: 'Invite',
+            groups: 'Groups',
+            courses: "Courses",
+            giving: "Giving",
+            profile: "Profile",
+            settings: 'Settings',
+            logout: "Logout",
+            statusUpdate: "New Post",
+            newsPost: "News Post",
+            post: "Post",
+            add: 'Add',
+            whatIsNew: "What is new?",
+            saySomethingTo: "Say something to ",
+            follow: "Follow",
+            unfollow: "Unfollow",
+            subscribe: "Subscribe",
+            unsubscribe: 'Unsubscribe',
+            pending: "Pending",
+            subscribers: "Subscribers",
+            loading: "Loading",
+            login: 'Login',
+            email: "Email",
+            password: "Password",
+            rpassword: "Repeat Password",
+            register: "Register",
+            name: "Nombre",
+            lastName: "Last Name",
+            describeYourself: 'Describe Yourself',
+            continueWatching: "Continues Watching",
+            createCourse: "Create a your own new course!",
+            createGroup: "Create a your own new group!",
+            title: "Title",
+            subtitle: "Subtitle",
+            recentlyAdded: "Recently added",
+            popularCourses: "Popular Courses",
+            privateGroup: "Private Group",
+            tithesAndOfferings: "Tithes and Offerings",
+            type: "Type",
+            description: "Description",
+            amount: "Amount",
+            tithes: "Tithes",
+            offerings: "Offerings",
+            event: "Event",
+            proceedToPayment: "Proceed to Payment",
+            minimumAmount: "The minimum amount is ",
+            notifications: "Notifications",
+            searchUsers: "Search Users",
+            searchCourses: "Search Courses",
+            news: "News",
+        },
+    },
+    es: {
+        message: {
+            feed: 'Mural',
+            events: "Eventos",
+            livestream: "En Vivo",
+            search: 'Busqueda',
+            invite: "Invitaciones",
+            groups: 'Grupos',
+            courses: 'Cursos',
+            giving: "Ofrendas",
+            profile: "Perfil",
+            settings: 'Configuraciones',
+            logout: "Cerrar Sesión",
+            statusUpdate: "Publicación Nueva",
+            newsPost: "Noticias?",
+            post: "Publica",
+            add: 'Añade',
+            whatIsNew: "Que hay de nuevo?",
+            saySomethingTo: "Publica algo para ",
+            follow: "Seguir",
+            unfollow: "Dejar",
+            subscribe: "Subscribirse",
+            unsubscribe: 'Abandonar',
+            pending: "Pendiente",
+            subscribers: "Subscriptores",
+            loading: "Cargando",
+            login: 'Inicia Sesión',
+            email: "Correo Electronico",
+            password: "Contraseña",
+            rpassword: "Confirma tu Contraseña",
+            register: "Registrate",
+            name: 'Nombre',
+            lastName: "Apeido",
+            describeYourself: 'Describete en unas cuantas palabras',
+            continueWatching: "Continua viendo",
+            createCourse: "Crea tu propio curso!",
+            createGroup: "Crea un grupo nuevo!",
+            title: "Titulo",
+            subtitle: "Subtitulo",
+            recentlyAdded: "Recientemente añadido",
+            popularCourses: "Cursos populares",
+            privateGroup: "Grupo privado",
+            tithesAndOfferings: "Diezmos y Ofrendas",
+            type: "Tipo",
+            description: "Descripción",
+            amount: "Cantidad",
+            tithes: "Diezmos",
+            offerings: "Ofrendas",
+            event: "Evento",
+            proceedToPayment: "Continuar con el pago",
+            minimumAmount: "La cantidad mínima es de ",
+            notifications: "Notificaciones",
+            searchUsers: "Busca Usuarios",
+            searchCourses: "Busca Cursos",
+            news: "Noticias",
+        },
+    }
+}
+
+// Set the key-value pairs for the different languages you want to support.
+const i18n = new I18n(messages);
+
+// Set the locale once at the beginning of your app.
+i18n.locale = 'es';//getLocales()[0].languageCode;
+Moment.updateLocale(i18n.locale);
+
+export default i18n;

package-lock.json

@@ -18,10 +18,11 @@
         "expo-dev-client": "~2.0.1",
         "expo-device": "~5.0.0",
         "expo-image-picker": "~14.0.2",
+        "expo-localization": "~14.0.0",
         "expo-notifications": "~0.17.0",
         "expo-status-bar": "~1.4.2",
-        "expo-task-manager": "~11.0.1",
         "expo-updates": "~0.15.6",
+        "i18n-js": "^4.2.2",
         "moment": "^2.29.1",
         "react": "18.1.0",
         "react-dom": "18.1.0",
@@ -5050,6 +5051,14 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
+      "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -6689,6 +6698,17 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-localization": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-14.0.0.tgz",
+      "integrity": "sha512-Rx4ZAANTTVuY6EnM3WXjNWn+CSpDUOaJziHPB4Az+lb4r3JMQ1H+go9s8KY9DYP0IiRM3sQhiyFQqSWzsUgvHA==",
+      "dependencies": {
+        "rtl-detect": "^1.0.2"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-manifests": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.4.0.tgz",
@@ -6880,17 +6900,6 @@
       "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz",
       "integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ=="
     },
-    "node_modules/expo-task-manager": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
-      "integrity": "sha512-9KXWkQyzldiTBz0+wRe7ypQQ0m02j838f8j0pDRrDbW2X5hBUJWzDGq7OItJ5F9vDjJ3oRZikOAhFGj+wxh3EA==",
-      "dependencies": {
-        "unimodules-app-loader": "~4.0.0"
-      },
-      "peerDependencies": {
-        "expo": "*"
-      }
-    },
     "node_modules/expo-updates": {
       "version": "0.15.6",
       "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.15.6.tgz",
@@ -7649,6 +7658,15 @@
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
+    "node_modules/i18n-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.2.2.tgz",
+      "integrity": "sha512-Mpr6g9T3uB7xHD4LpuyeCEKVRKxedeTFduT+ft0Xu+i0qqWRJ3T+bIcb73bd0/qH2u2IHnCTRMfAKtjf6NsjJg==",
+      "dependencies": {
+        "bignumber.js": "*",
+        "lodash": "*"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -11329,6 +11347,11 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12721,11 +12744,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/unimodules-app-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-app-loader/-/unimodules-app-loader-4.0.0.tgz",
-      "integrity": "sha512-YlV0rOM9pjdeTMEGR0rr/u+F7f1ygINUsTEiRIPvBewTk3Si/Sm8Ur5f92n+f0Sy1EIuOTGgyGaUdjJBfAd0YA=="
-    },
     "node_modules/union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -17002,6 +17020,11 @@
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
     },
+    "bignumber.js": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
+      "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig=="
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -18271,6 +18294,14 @@
       "integrity": "sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==",
       "requires": {}
     },
+    "expo-localization": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-14.0.0.tgz",
+      "integrity": "sha512-Rx4ZAANTTVuY6EnM3WXjNWn+CSpDUOaJziHPB4Az+lb4r3JMQ1H+go9s8KY9DYP0IiRM3sQhiyFQqSWzsUgvHA==",
+      "requires": {
+        "rtl-detect": "^1.0.2"
+      }
+    },
     "expo-manifests": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.4.0.tgz",
@@ -18423,14 +18454,6 @@
       "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz",
       "integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ=="
     },
-    "expo-task-manager": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
-      "integrity": "sha512-9KXWkQyzldiTBz0+wRe7ypQQ0m02j838f8j0pDRrDbW2X5hBUJWzDGq7OItJ5F9vDjJ3oRZikOAhFGj+wxh3EA==",
-      "requires": {
-        "unimodules-app-loader": "~4.0.0"
-      }
-    },
     "expo-updates": {
       "version": "0.15.6",
       "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.15.6.tgz",
@@ -19017,6 +19040,15 @@
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
+    "i18n-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.2.2.tgz",
+      "integrity": "sha512-Mpr6g9T3uB7xHD4LpuyeCEKVRKxedeTFduT+ft0Xu+i0qqWRJ3T+bIcb73bd0/qH2u2IHnCTRMfAKtjf6NsjJg==",
+      "requires": {
+        "bignumber.js": "*",
+        "lodash": "*"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -21816,6 +21848,11 @@
         "glob": "^7.1.3"
       }
     },
+    "rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -22886,11 +22923,6 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
-    "unimodules-app-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-app-loader/-/unimodules-app-loader-4.0.0.tgz",
-      "integrity": "sha512-YlV0rOM9pjdeTMEGR0rr/u+F7f1ygINUsTEiRIPvBewTk3Si/Sm8Ur5f92n+f0Sy1EIuOTGgyGaUdjJBfAd0YA=="
-    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

package.json

@@ -21,9 +21,11 @@
     "expo-dev-client": "~2.0.1",
     "expo-device": "~5.0.0",
     "expo-image-picker": "~14.0.2",
+    "expo-localization": "~14.0.0",
     "expo-notifications": "~0.17.0",
     "expo-status-bar": "~1.4.2",
     "expo-updates": "~0.15.6",
+    "i18n-js": "^4.2.2",
     "moment": "^2.29.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",