feat: add basic i18n support

fix #7

App.tsx

@@ -9,6 +9,7 @@ import {
  Dimensions,
  StatusBarStyle,
 } from 'react-native';
+import {withTranslation} from 'react-i18next';
 import {ErrorBoundary} from 'react-error-boundary';
 import SideMenuBase from '@chakrahq/react-native-side-menu';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -351,6 +352,7 @@ class MainView extends React.Component {
  }
 
  render() {
+ const {t} = this.props;
  return (
  <>
  {this.state.status === 'loggedIn' ? (
@@ -692,6 +694,8 @@ class MainView extends React.Component {
  }
 }
 
+const MainViewi18n = withTranslation()(MainView);
+
 function ErrorMessage({
  error,
  resetErrorBoundary,
@@ -738,7 +742,7 @@ export const App = () => {
  barStyle={(currentTheme.contentType + '-content') as StatusBarStyle}
  />
  <ErrorBoundary fallbackRender={ErrorMessage}>
- <MainView />
+ <MainViewi18n />
  </ErrorBoundary>
  </GestureHandlerRootView>
  );

i18n/getLanguage.ts

@@ -0,0 +1,30 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type {ModuleType} from 'i18next';
+
+const STORE_LANGUAGE_KEY = 'app.language';
+
+export const languageDetectorPlugin = {
+ type: 'languageDetector' as ModuleType,
+ async: true,
+ init: () => {},
+ detect: async function (callback: (lang: string) => void) {
+ try {
+ await AsyncStorage.getItem(STORE_LANGUAGE_KEY).then(language => {
+ if (language) {
+ return callback(language);
+ } else {
+ // TODO: use the device's locale
+ return 'en';
+ }
+ });
+ } catch (error) {
+ console.warn(`[APP] Error reading language: ${error}`);
+ }
+ },
+ cacheUserLanguage: async function (language: string) {
+ try {
+ //save a user's language choice in Async storage
+ await AsyncStorage.setItem(STORE_LANGUAGE_KEY, language);
+ } catch (error) {}
+ },
+};

i18n/i18n.ts

@@ -0,0 +1,29 @@
+import i18n from 'i18next';
+import {initReactI18next} from 'react-i18next';
+import 'intl-pluralrules';
+
+import {resources} from './languages';
+import {languageDetectorPlugin} from './getLanguage';
+
+i18n
+ .use(initReactI18next) // passes i18n down to react-i18next
+ .use(languageDetectorPlugin) // get the user's language if it's stored
+ .init({
+ fallbackLng: 'en',
+
+ resources: resources,
+
+ interpolation: {
+ escapeValue: false,
+ },
+
+ react: {
+ useSuspense: false,
+ },
+ });
+
+export default i18n;
+
+export function setLanguage(l: string) {
+ i18n.changeLanguage(l);
+}

i18n/languages.ts

@@ -0,0 +1,16 @@
+import {Language} from '../src/lib/types';
+
+// string files
+import {default as en} from './strings/en.json';
+
+// resources object passed to i18next
+export const resources = {
+ en: {translation: en},
+};
+
+// languages object, used for settings
+export const languages = {
+ en: {name: 'English (Traditional)', emoji: '🇬🇧'} as Language,
+ de: {name: 'Deutsch (Deutschland)', emoji: '🇩🇪'} as Language,
+ it: {name: 'Italiano', emoji: '🇮🇹'} as Language,
+};

i18n/strings/en.json

@@ -0,0 +1,12 @@
+{
+ "app": {
+ "home": {
+ "description": "Swipe from the left of the screen or tap the three lines icon to see your servers and messages!",
+ "join_lounge": "Join the Revolt Lounge",
+ "open_lounge": "Open the Revolt Lounge",
+ "join_rvmob": "Join the RVMob server",
+ "open_rvmob": "Open the RVMob server",
+ "open_settings": "Open settings"
+ }
+ }
+}

index.js

@@ -3,7 +3,10 @@
  */
 
 import {AppRegistry} from 'react-native';
+
 import {App} from './App';
+import './i18n/i18n';
+
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

package.json

@@ -32,6 +32,8 @@
  "domain-browser": "^4.22.0",
  "events": "^3.3.0",
  "https-browserify": "^1.0.0",
+ "i18next": "^23.6.0",
+ "intl-pluralrules": "^2.0.1",
  "markdown-it-regexp": "^0.4.0",
  "mobx": "^6.10.2",
  "mobx-react-lite": "^4.0.5",
@@ -43,6 +45,7 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-error-boundary": "^4.0.11",
+ "react-i18next": "^13.3.1",
  "react-native": "^0.72.6",
  "react-native-crypto": "^2.2.0",
  "react-native-device-info": "^10.11.0",

src/Generic.tsx

@@ -8,6 +8,8 @@ import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIc
 
 import {API, Channel, Client, Message, Server} from 'revolt.js';
 
+import {setLanguage} from '../i18n/i18n';
+import {languages} from '../i18n/languages';
 import {currentTheme, setTheme, themes} from './Theme';
 import {
  DEFAULT_API_URL,
@@ -115,6 +117,20 @@ export const app = {
  }
  },
  list: [
+ {
+ key: 'app.language',
+ name: 'Language',
+ category: 'functionality',
+ default: 'en',
+ type: 'string',
+ options: Object.keys(languages),
+ onChange: (v: string) => {
+ setLanguage(v);
+ },
+ onInitialize: (v: string) => {
+ setLanguage(v);
+ },
+ },
  {
  key: 'ui.theme',
  name: 'Theme',

src/components/common/settings/atoms/StringNumberSetting.tsx

@@ -3,6 +3,7 @@ import {TextInput, TouchableOpacity, View} from 'react-native';
 
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
+import {languages} from '../../../../../i18n/languages';
 import {app} from '../../../../Generic';
 import {currentTheme, styles} from '../../../../Theme';
 import {Setting} from '../../../../lib/types';
@@ -58,7 +59,12 @@ export const StringNumberSetting = ({
  rerender(renderCount + 1);
  }
  }}>
- <Text style={{flex: 1}}>{o}</Text>
+ <Text style={{flex: 1}}>
+ {sRaw.key === 'app.language'
+ ? // @ts-expect-error this will always exist
+ `${languages[o].emoji} ${languages[o].name}`
+ : o}
+ </Text>
  <View style={{...styles.iconContainer, marginRight: 0}}>
  <MaterialIcon
  name={`radio-button-${value === o ? 'on' : 'off'}`}

src/components/pages/HomePage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {useTranslation} from 'react-i18next';
 import {TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
@@ -14,6 +15,8 @@ import {ChannelHeader} from '../navigation/ChannelHeader';
 import {Button, Text, Username} from '../common/atoms';
 
 export const HomePage = observer(() => {
+ const {t} = useTranslation();
+
  // holiday emoji
  const rawDate = new Date();
  const rawMonth = rawDate.getMonth() + 1;
@@ -90,16 +93,16 @@ export const HomePage = observer(() => {
  <Text
  key={'no-channel-selected'}
  style={{textAlign: 'center', marginBottom: 10}}>
- Swipe from the left of the screen or press the three lines icon to see
- your servers and messages!
+ {t('app.home.description')}
  </Text>
  <Button
  style={{width: '65%'}}
  key={'home-revolt-lounge'}
  onPress={() => app.openInvite(SPECIAL_SERVERS.lounge.invite)}>
  <Text style={styles.buttonText}>
- {client.servers.get(SPECIAL_SERVERS.lounge.id) ? 'Open' : 'Join'}{' '}
- the Revolt Lounge
+ {client.servers.get(SPECIAL_SERVERS.lounge.id)
+ ? t('app.home.open_lounge')
+ : t('app.home.join_lounge')}
  </Text>
  </Button>
  <Button
@@ -108,16 +111,15 @@ export const HomePage = observer(() => {
  onPress={() => app.openInvite(SPECIAL_SERVERS.supportServer.invite)}>
  <Text style={styles.buttonText}>
  {client.servers.get(SPECIAL_SERVERS.supportServer.id)
- ? 'Open'
- : 'Join'}{' '}
- the RVMob server
+ ? t('app.home.open_rvmob')
+ : t('app.home.join_rvmob')}
  </Text>
  </Button>
  <Button
- style={{width: '30%'}}
+ style={{width: '65%'}}
  key={'home-settings-button'}
  onPress={() => app.openSettings(true)}>
- <Text style={styles.buttonText}>Settings</Text>
+ <Text style={styles.buttonText}>{t('app.home.open_settings')}</Text>
  </Button>
  {app.settings.get('ui.home.holidays') ? holidayEmoji : null}
  </View>

src/lib/types.ts

@@ -49,3 +49,8 @@ interface TypedUser {
 export type ReportedObject = TypedMessage | TypedServer | TypedUser;
 
 export type DeletableObject = TypedMessage | TypedServer;
+
+export type Language = {
+ name: string;
+ emoji: string;
+};

yarn.lock

@@ -1130,7 +1130,7 @@
  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4":
  version "7.23.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -5226,6 +5226,13 @@ html-escaper@^2.0.0:
  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-parse-stringify@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+ integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+ dependencies:
+ void-elements "3.1.0"
+
 http-cache-semantics@^4.0.0:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
@@ -5260,6 +5267,13 @@ human-signals@^2.1.0:
  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+i18next@^23.6.0:
+ version "23.6.0"
+ resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.6.0.tgz#c6e996cfd3fef0bf60be3b7c581c35338dba5a71"
+ integrity sha512-z0Cxr0MGkt+kli306WS4nNNM++9cgt2b2VCMprY92j+AIab/oclgPxdwtTZVLP1zn5t5uo8M6uLsZmYrcjr3HA==
+ dependencies:
+ "@babel/runtime" "^7.22.5"
+
 ieee754@^1.1.13, ieee754@^1.1.4, ieee754@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -5343,6 +5357,11 @@ internal-slot@^1.0.5:
  hasown "^2.0.0"
  side-channel "^1.0.4"
 
+intl-pluralrules@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/intl-pluralrules/-/intl-pluralrules-2.0.1.tgz#de16c3df1e09437635829725e88ea70c9ad79569"
+ integrity sha512-astxTLzIdXPeN0K9Rumi6LfMpm3rvNO0iJE+h/k8Kr/is+wPbRe4ikyDjlLr6VTh/mEfNv8RjN+gu3KwDiuhqg==
+
 invariant@*, invariant@^2.2.4:
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -8394,6 +8413,14 @@ react-error-boundary@^4.0.11:
  dependencies:
  "@babel/runtime" "^7.12.5"
 
+react-i18next@^13.3.1:
+ version "13.3.1"
+ resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.3.1.tgz#9b072bf4dd4cafb028e92315a8a1415f8034bdca"
+ integrity sha512-JAtYREK879JXaN9GdzfBI4yJeo/XyLeXWUsRABvYXiFUakhZJ40l+kaTo+i+A/3cKIED41kS/HAbZ5BzFtq/Og==
+ dependencies:
+ "@babel/runtime" "^7.22.5"
+ html-parse-stringify "^3.0.1"
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -10093,6 +10120,11 @@ vm-browserify@^1.1.2:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+[email protected]:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+ integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 walker@^1.0.7, walker@^1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"