chore: use metro transformer in react native example (#2000)

Author: vonovak

examples/react-native/App.tsx

@@ -1,6 +1,6 @@
-import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-locale/polyfill-force";
 
-import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-pluralrules/polyfill-force";
 import "@formatjs/intl-pluralrules/locale-data/en"; // locale-data for en
 import "@formatjs/intl-pluralrules/locale-data/cs"; // locale-data for cs
 
@@ -9,7 +9,8 @@ import { Text } from "react-native";
 import { i18n } from "@lingui/core";
 import { I18nProvider, TransRenderProps } from "@lingui/react";
 
-import { messages } from "./src/locales/en/messages.js";
+import { messages } from "./src/locales/en/messages.po";
+
 import { Body } from "./src/MainScreen";
 
 i18n.loadAndActivate({ locale: "en", messages });

examples/react-native/metro.config.js

@@ -1,4 +1,16 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require("expo/metro-config");
 
-module.exports = getDefaultConfig(__dirname);
+const config = getDefaultConfig(__dirname);
+const { transformer, resolver } = config;
+
+config.transformer = {
+  ...transformer,
+  babelTransformerPath: require.resolve("@lingui/metro-transformer/expo"),
+};
+config.resolver = {
+  ...resolver,
+  sourceExts: [...resolver.sourceExts, "po", "pot"],
+};
+
+module.exports = config;

examples/react-native/package.json

@@ -9,35 +9,36 @@
     "web": "expo start --web",
     "extract": "lingui extract",
     "compile": "lingui compile",
-    "no-dev": "npx expo start --no-dev --minify",
+    "no-dev": "npx expo start -c --no-dev --minify",
     "inspectBundle": "npx react-native-bundle-visualizer",
     "fix-deps": "npx expo install --check"
   },
   "dependencies": {
-    "@formatjs/intl-locale": "^3.1.1",
-    "@formatjs/intl-pluralrules": "^5.1.10",
-    "@lingui/core": "^4.1.2",
-    "@lingui/react": "^4.1.2",
-    "expo": "49.0.0-beta.5",
-    "expo-status-bar": "~1.6.0",
-    "expo-updates": "~0.18.7",
+    "@formatjs/intl-locale": "^4.0.2",
+    "@formatjs/intl-pluralrules": "^5.2.16",
+    "@lingui/core": "^4.12.0",
+    "@lingui/react": "^4.12.0",
+    "expo": "~51.0.37",
+    "expo-status-bar": "~1.12.1",
+    "expo-updates": "~0.25.27",
     "react": "18.2.0",
-    "react-native": "0.72.0",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.5",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@lingui/cli": "^4.1.2",
-    "@lingui/macro": "^4.1.2",
+    "@babel/core": "^7.24.0",
+    "@lingui/cli": "^4.12.0",
+    "@lingui/macro": "^4.12.0",
+    "@lingui/metro-transformer": "^4.12.0",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@types/react": "~18.0.14",
+    "@types/react": "~18.2.79",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "babel-plugin-macros": "^3.1.0",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-ft-flow": "^2.0.3",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.4"
+    "typescript": "~5.3.3"
   },
   "private": true
 }

examples/react-native/src/MainScreen.tsx

@@ -31,8 +31,8 @@ export const Body = React.memo(() => {
     const newActiveLanguage = activeLanguage === "en" ? "cs" : "en";
     const catalog =
       newActiveLanguage === "en"
-        ? require("./locales/en/messages.js")
-        : require("./locales/cs/messages.js");
+        ? require("./locales/en/messages.po")
+        : require("./locales/cs/messages.po");
     i18n.load(newActiveLanguage, catalog.messages);
     i18n.activate(newActiveLanguage);
   };

examples/react-native/src/locales/cs/messages.js

@@ -18,15 +18,15 @@ msgstr ""
 "X-Crowdin-File: messages.po\n"
 "X-Crowdin-File-ID: 25\n"
 
-#: src/MainScreen.tsx:102
+#: src/MainScreen.tsx:91
 msgid "{messageIndex, selectordinal, one {#st message} two {#nd message} few {#rd message} other {#th message}}"
 msgstr "{messageIndex, selectordinal, other {#. zpráva}}"
 
-#: src/MainScreen.tsx:89
+#: src/MainScreen.tsx:78
 msgid "{messagesCount, plural, =0 {You have no unread messages} one {There's # message in your inbox} few {There're # messages in your inbox} other {There're # messages in your inbox}}"
 msgstr "{messagesCount, plural, =0 {Nemáte žádné nepřečtené zprávy} one {Ve vaší schránce je # zpráva} few {Ve vaší schránce jsou # zprávy} many {Ve vaší schránce je # zpráv} other {Ve vaší schránce je # zpráv}}"
 
-#: src/MainScreen.tsx:87
+#: src/MainScreen.tsx:76
 msgid "Add a message to your inbox"
 msgstr "Přidat zprávu do doručené pošty"
 
@@ -38,23 +38,22 @@ msgstr "Zrušit"
 msgid "Do you want to set all your messages as read?"
 msgstr "Chcete označit všechny vaše zprávy jako přečtené?"
 
-#: src/MainScreen.tsx:86
+#: src/MainScreen.tsx:75
 msgid "Mark messages as read"
 msgstr "Označit zprávy jako přečtené"
 
-#: src/MainScreen.tsx:83
+#: src/MainScreen.tsx:73
 msgid "Message Inbox"
 msgstr "Doručená pošta"
 
-#: src/MainScreen.tsx:101
+#: src/MainScreen.tsx:90
 msgid "order:"
 msgstr "pořadí:"
 
-#: src/MainScreen.tsx:43
+#: src/MainScreen.tsx:44
 msgid "Toggle language to {0}"
 msgstr "Přepnout jazyk na {0}"
 
 #: src/MainScreen.tsx:17
 msgid "Yes"
 msgstr "Ano"
-

examples/react-native/src/locales/cs/messages.po

@@ -13,15 +13,15 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/MainScreen.tsx:102
+#: src/MainScreen.tsx:91
 msgid "{messageIndex, selectordinal, one {#st message} two {#nd message} few {#rd message} other {#th message}}"
 msgstr "{messageIndex, selectordinal, one {#st message} two {#nd message} few {#rd message} other {#th message}}"
 
-#: src/MainScreen.tsx:89
+#: src/MainScreen.tsx:78
 msgid "{messagesCount, plural, =0 {You have no unread messages} one {There's # message in your inbox} few {There're # messages in your inbox} other {There're # messages in your inbox}}"
 msgstr "{messagesCount, plural, =0 {You have no unread messages} one {There's # message in your inbox} few {There're # messages in your inbox} other {There're # messages in your inbox}}"
 
-#: src/MainScreen.tsx:87
+#: src/MainScreen.tsx:76
 msgid "Add a message to your inbox"
 msgstr "Add a message to your inbox"
 
@@ -33,19 +33,19 @@ msgstr "Cancel"
 msgid "Do you want to set all your messages as read?"
 msgstr "Do you want to set all your messages as read?"
 
-#: src/MainScreen.tsx:86
+#: src/MainScreen.tsx:75
 msgid "Mark messages as read"
 msgstr "Mark messages as read"
 
-#: src/MainScreen.tsx:83
+#: src/MainScreen.tsx:73
 msgid "Message Inbox"
 msgstr "Message Inbox"
 
-#: src/MainScreen.tsx:101
+#: src/MainScreen.tsx:90
 msgid "order:"
 msgstr "order:"
 
-#: src/MainScreen.tsx:43
+#: src/MainScreen.tsx:44
 msgid "Toggle language to {0}"
 msgstr "Toggle language to {0}"
 

examples/react-native/src/locales/en/messages.js

@@ -0,0 +1,4 @@
+declare module "*.po" {
+  import type { Messages } from "@lingui/core";
+  export const messages: Messages;
+}