chore: add Expo react-native and react-native-web example

packages/adapter-react/README.md

@@ -4,6 +4,8 @@
 
 **You can find a demo Next.js implementation [here](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-react/examples/nextjs).**
 
+**You can find a demo Expo react-native implementation [here](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-react/examples/expo).**
+
 ## Setup
 
 See [here](https://github.com/ivanhofer/typesafe-i18n#get-started) on more information how to set up `typesafe-i18n`.

packages/adapter-react/examples/expo/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

packages/adapter-react/examples/expo/.typesafe-i18n.json

@@ -0,0 +1,4 @@
+{
+   "$schema": "https://unpkg.com/typesafe-i18n@5.17.1/schema/typesafe-i18n.json",
+   "adapter": "react"
+}

packages/adapter-react/examples/expo/App.tsx

@@ -0,0 +1,30 @@
+import * as Localization from 'expo-localization'
+import React, { useEffect, useState } from 'react'
+import Child from './src/Child'
+import TypesafeI18n from './src/i18n/i18n-react'
+import { Locales } from './src/i18n/i18n-types'
+import { isLocale } from './src/i18n/i18n-util'
+import { loadLocaleAsync } from './src/i18n/i18n-util.async'
+import { getUserLocale } from './src/locale-storage'
+import './src/polyfill/Intl'
+
+// Get default locale from device settings.
+const DEFAULT_LOCALE = Localization.getLocales().map(it => it.languageTag).find(isLocale) ?? 'en';
+
+export default function App() {
+	const [localeLoaded, setLocaleLoaded] = useState<Locales | null>(null)
+
+	useEffect(() => {
+		getUserLocale(DEFAULT_LOCALE)
+			.then(async locale => { await loadLocaleAsync(locale); return locale })
+			.then(setLocaleLoaded)
+	}, [])
+
+	if (localeLoaded === null) return null
+
+	return (
+		<TypesafeI18n locale={localeLoaded}>
+			<Child />
+		</TypesafeI18n>
+	)
+}

packages/adapter-react/examples/expo/README.md

@@ -0,0 +1,21 @@
+# `typesafe-i18n` react-native Example
+
+**This example shows how you could use `typesafe-i18n` in an Expo react-native application.**
+
+_There are many ways you could integrate the library and its i18n process into your applications. As  probably all applications and workflows are different, the solution shown here might not fit your needs. Luckily `typesafe-i18n` is really flexible and you can tweak it accordingly. You can ask specific questions by joining the [`Discord` server](https://discord.gg/T27AHfaADK)_
+
+> This repository was set up using `npx create-expo-app --template` and choosing the blank typescript app.
+
+
+## Get started
+
+Start the project in expo:
+
+```bash
+npx expo start
+```
+
+You can now open the app in Expo Go on a native device, a simulator, or the web, by following the prompts. (If you
+want to use a simulator, you will need to install that first. See the Expo docs:
+[Android](https://docs.expo.dev/workflow/android-studio-emulator/),
+[iOS](https://docs.expo.dev/workflow/ios-simulator/).

packages/adapter-react/examples/expo/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "typesafe-i18n_expo-demo",
+    "slug": "typesafe-i18n_expo-demo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "jsEngine": "hermes",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

packages/adapter-react/examples/expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

packages/adapter-react/examples/expo/metro.config.js

@@ -0,0 +1,15 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = (() => {
+	const config = getDefaultConfig(__dirname);
+
+	const { resolver } = config;
+
+	config.resolver = {
+		...resolver,
+		// .cjs needed for typesafe-i18n
+		sourceExts: [...resolver.sourceExts, 'cjs'],
+	};
+
+	return config;
+})();