Make the ui package work for expo and next

front/apps/mobile/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "native",
+	"name": "mobile",
 	"version": "1.0.0",
 	"main": "src/app.tsx",
 	"scripts": {
@@ -9,7 +9,7 @@
 		"web": "expo start --web"
 	},
 	"dependencies": {
-		"app": "^0.1.0",
+		"@kyoo/ui": "workspace:^",
 		"expo": "~46.0.16",
 		"expo-status-bar": "~1.4.0",
 		"react": "18.0.0",
@@ -18,7 +18,7 @@
 		"react-native-web": "~0.18.7"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.12.9",
+		"@babel/core": "^7.19.6",
 		"@types/react": "~18.0.14",
 		"@types/react-native": "~0.69.1",
 		"typescript": "~4.3.5"

front/apps/mobile/src/app.tsx

@@ -1,7 +1,7 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 import { registerRootComponent } from "expo";
-import { Toto } from "app";
+import { Toto } from "@kyoo/ui";
 
 function App() {
 	return (

front/apps/web/next.config.js

@@ -18,11 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-const path = require("path")
+const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const withTM = require("next-transpile-modules")(["@kyoo/ui"]);
 
-
 const suboctopus = path.dirname(require.resolve("@jellyfin/libass-wasm"));
 
 /**
@@ -45,6 +44,14 @@ const nextConfig = {
 				],
 			}),
 		];
+		config.resolve = {
+			...config.resolve,
+			alias: {
+				...config.resolve.alias,
+				"react-native$": "react-native-web",
+			},
+			extensions: [".web.tsx", ".tsx", ...config.resolve.extensions],
+		};
 		return config;
 	},
 	async redirects() {

front/apps/web/package.json

@@ -29,6 +29,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-infinite-scroll-component": "^6.1.0",
+		"react-native-web": "^0.18.9",
 		"superjson": "^1.9.1",
 		"zod": "^3.18.0"
 	},

front/apps/web/src/pages/_document.tsx

@@ -19,6 +19,48 @@
  */
 
 import { Html, Main, Head, NextScript } from "next/document";
+import { Children } from "react";
+import { AppRegistry } from "react-native";
+
+export const style = `
+/**
+ * Building on the RNWeb reset:
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+ */
+html, body, #__next {
+  width: 100%;
+  /* To smooth any scrolling behavior */
+  -webkit-overflow-scrolling: touch;
+  margin: 0px;
+  padding: 0px;
+  /* Allows content to fill the viewport and go beyond the bottom */
+  min-height: 100%;
+}
+#__next {
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  flex: 1;
+}
+html {
+  scroll-behavior: smooth;
+  /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+  -webkit-text-size-adjust: 100%;
+  height: 100%;
+}
+body {
+  display: flex;
+  /* Allows you to scroll below the viewport; default value is visible */
+  overflow-y: auto;
+  overscroll-behavior-y: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-overflow-style: scrollbar;
+}
+`;
 
 const Document = () => {
 	return (
@@ -38,4 +80,14 @@ const Document = () => {
 	);
 };
 
+// Enables SSR for react-native-web styles.
+Document.getInitialProps = async ({ renderPage }: any) => {
+	AppRegistry.registerComponent("Main", () => Main);
+	// @ts-ignore
+	const { getStyleElement } = AppRegistry.getApplication("Main");
+	const page = await renderPage();
+	const styles = [<style dangerouslySetInnerHTML={{ __html: style }} />, getStyleElement()];
+	return { ...page, styles: Children.toArray(styles) };
+};
+
 export default Document;

front/package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"scripts": {
 		"web": "yarn workspace web dev",
-		"native": "yarn workspace native start",
+		"mobile": "yarn workspace mobile start",
 		"build:web": "yarn workspace web build",
 		"lint": "eslint ."
 	},

front/packages/ui/package.json

@@ -8,7 +8,17 @@
 		"typescript": "^4.8.4"
 	},
 	"peerDependencies": {
-		"react": "*"
+		"react": "*",
+		"react-native": "*",
+		"react-native-web": "*"
+	},
+	"peerDependenciesMeta": {
+		"react-native": {
+			"optional": true
+		},
+		"react-native-web": {
+			"optional": true
+		}
 	},
 	"dependencies": {
 		"@emotion/react": "^11.10.5"

front/packages/ui/src/toto.tsx

@@ -1,3 +1,5 @@
+import { Button } from "react-native";
+
 export const Toto = () => {
-	return <button>tata</button>;
+	return <Button title="tato"></Button>;
 }