diff options
Diffstat (limited to 'examples/with-react-native-web/apps')
25 files changed, 307 insertions, 0 deletions
diff --git a/examples/with-react-native-web/apps/native/.expo-shared/assets.json b/examples/with-react-native-web/apps/native/.expo-shared/assets.json new file mode 100644 index 0000000..1e6decf --- /dev/null +++ b/examples/with-react-native-web/apps/native/.expo-shared/assets.json @@ -0,0 +1,4 @@ +{ + "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, + "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true +} diff --git a/examples/with-react-native-web/apps/native/.gitignore b/examples/with-react-native-web/apps/native/.gitignore new file mode 100644 index 0000000..ec8a36a --- /dev/null +++ b/examples/with-react-native-web/apps/native/.gitignore @@ -0,0 +1,14 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ + +# macOS +.DS_Store diff --git a/examples/with-react-native-web/apps/native/App.tsx b/examples/with-react-native-web/apps/native/App.tsx new file mode 100644 index 0000000..e6fbd5b --- /dev/null +++ b/examples/with-react-native-web/apps/native/App.tsx @@ -0,0 +1,33 @@ +import { StyleSheet, Text, View } from "react-native"; +import { StatusBar } from "expo-status-bar"; +import { Button } from "ui"; + +export default function Native() { + return ( + <View style={styles.container}> + <Text style={styles.header}>Native</Text> + <Button + onClick={() => { + console.log("Pressed!"); + alert("Pressed!"); + }} + text="Boop" + /> + <StatusBar style="auto" /> + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#fff", + alignItems: "center", + justifyContent: "center", + }, + header: { + fontWeight: "bold", + marginBottom: 20, + fontSize: 36, + }, +}); diff --git a/examples/with-react-native-web/apps/native/README.md b/examples/with-react-native-web/apps/native/README.md new file mode 100644 index 0000000..be1fea0 --- /dev/null +++ b/examples/with-react-native-web/apps/native/README.md @@ -0,0 +1,3 @@ +# Native + +A [react-native](https://reactnative.dev/) app built using [expo](https://docs.expo.dev/) diff --git a/examples/with-react-native-web/apps/native/app.json b/examples/with-react-native-web/apps/native/app.json new file mode 100644 index 0000000..9262f58 --- /dev/null +++ b/examples/with-react-native-web/apps/native/app.json @@ -0,0 +1,31 @@ +{ + "expo": { + "name": "native", + "slug": "native", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "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" + } + } +} diff --git a/examples/with-react-native-web/apps/native/assets/adaptive-icon.png b/examples/with-react-native-web/apps/native/assets/adaptive-icon.png Binary files differnew file mode 100644 index 0000000..03d6f6b --- /dev/null +++ b/examples/with-react-native-web/apps/native/assets/adaptive-icon.png diff --git a/examples/with-react-native-web/apps/native/assets/favicon.png b/examples/with-react-native-web/apps/native/assets/favicon.png Binary files differnew file mode 100644 index 0000000..e75f697 --- /dev/null +++ b/examples/with-react-native-web/apps/native/assets/favicon.png diff --git a/examples/with-react-native-web/apps/native/assets/icon.png b/examples/with-react-native-web/apps/native/assets/icon.png Binary files differnew file mode 100644 index 0000000..a0b1526 --- /dev/null +++ b/examples/with-react-native-web/apps/native/assets/icon.png diff --git a/examples/with-react-native-web/apps/native/assets/splash.png b/examples/with-react-native-web/apps/native/assets/splash.png Binary files differnew file mode 100644 index 0000000..0e89705 --- /dev/null +++ b/examples/with-react-native-web/apps/native/assets/splash.png diff --git a/examples/with-react-native-web/apps/native/babel.config.js b/examples/with-react-native-web/apps/native/babel.config.js new file mode 100644 index 0000000..73ebf58 --- /dev/null +++ b/examples/with-react-native-web/apps/native/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ["babel-preset-expo"], + }; +}; diff --git a/examples/with-react-native-web/apps/native/index.js b/examples/with-react-native-web/apps/native/index.js new file mode 100644 index 0000000..828b356 --- /dev/null +++ b/examples/with-react-native-web/apps/native/index.js @@ -0,0 +1,8 @@ +import { registerRootComponent } from "expo"; + +import App from "./App"; + +// registerRootComponent calls AppRegistry.registerComponent('main', () => App); +// It also ensures that whether you load the app in Expo Go or in a native build, +// the environment is set up appropriately +registerRootComponent(App); diff --git a/examples/with-react-native-web/apps/native/metro.config.js b/examples/with-react-native-web/apps/native/metro.config.js new file mode 100644 index 0000000..21f6371 --- /dev/null +++ b/examples/with-react-native-web/apps/native/metro.config.js @@ -0,0 +1,21 @@ +// Learn more https://docs.expo.io/guides/customizing-metro +const { getDefaultConfig } = require("expo/metro-config"); +const path = require("path"); + +// Find the workspace root, this can be replaced with `find-yarn-workspace-root` +const workspaceRoot = path.resolve(__dirname, "../.."); +const projectRoot = __dirname; + +const config = getDefaultConfig(projectRoot); + +// 1. Watch all files within the monorepo +config.watchFolders = [workspaceRoot]; +// 2. Let Metro know where to resolve packages, and in what order +config.resolver.nodeModulesPaths = [ + path.resolve(projectRoot, "node_modules"), + path.resolve(workspaceRoot, "node_modules"), +]; +// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths` +config.resolver.disableHierarchicalLookup = true; + +module.exports = config; diff --git a/examples/with-react-native-web/apps/native/package.json b/examples/with-react-native-web/apps/native/package.json new file mode 100644 index 0000000..68bcb71 --- /dev/null +++ b/examples/with-react-native-web/apps/native/package.json @@ -0,0 +1,29 @@ +{ + "name": "native", + "version": "1.0.0", + "main": "index.js", + "scripts": { + "start": "expo start", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web", + "eject": "expo eject", + "dev": "yarn start" + }, + "dependencies": { + "expo": "^45.0.6", + "expo-status-bar": "~1.3.0", + "react": "18.2", + "react-dom": "18.1", + "react-native": "0.68.2", + "react-native-web": "^0.18.9", + "ui": "*" + }, + "devDependencies": { + "@babel/core": "^7.12.9", + "@types/react": "^18.0.22", + "@types/react-native": "^0.69.15", + "typescript": "^4.7.4" + }, + "private": true +} diff --git a/examples/with-react-native-web/apps/native/tsconfig.json b/examples/with-react-native-web/apps/native/tsconfig.json new file mode 100644 index 0000000..b9567f6 --- /dev/null +++ b/examples/with-react-native-web/apps/native/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "expo/tsconfig.base", + "compilerOptions": { + "strict": true + } +} diff --git a/examples/with-react-native-web/apps/web/.babel.config.js b/examples/with-react-native-web/apps/web/.babel.config.js new file mode 100644 index 0000000..07be324 --- /dev/null +++ b/examples/with-react-native-web/apps/web/.babel.config.js @@ -0,0 +1,4 @@ +module.exports = { + presets: ["next/babel"], + plugins: [["react-native-web"]], +}; diff --git a/examples/with-react-native-web/apps/web/.gitignore b/examples/with-react-native-web/apps/web/.gitignore new file mode 100644 index 0000000..1437c53 --- /dev/null +++ b/examples/with-react-native-web/apps/web/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/with-react-native-web/apps/web/README.md b/examples/with-react-native-web/apps/web/README.md new file mode 100644 index 0000000..4fae62a --- /dev/null +++ b/examples/with-react-native-web/apps/web/README.md @@ -0,0 +1,30 @@ +## Getting Started + +First, run the development server: + +```bash +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/with-react-native-web/apps/web/next-env.d.ts b/examples/with-react-native-web/apps/web/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/examples/with-react-native-web/apps/web/next-env.d.ts @@ -0,0 +1,5 @@ +/// <reference types="next" /> +/// <reference types="next/image-types/global" /> + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-react-native-web/apps/web/next.config.js b/examples/with-react-native-web/apps/web/next.config.js new file mode 100644 index 0000000..71ca107 --- /dev/null +++ b/examples/with-react-native-web/apps/web/next.config.js @@ -0,0 +1,18 @@ +module.exports = { + reactStrictMode: true, + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + "react-native$": "react-native-web", + }; + config.resolve.extensions = [ + ".web.js", + ".web.jsx", + ".web.ts", + ".web.tsx", + ...config.resolve.extensions, + ]; + return config; + }, +}; diff --git a/examples/with-react-native-web/apps/web/package.json b/examples/with-react-native-web/apps/web/package.json new file mode 100644 index 0000000..95b51d3 --- /dev/null +++ b/examples/with-react-native-web/apps/web/package.json @@ -0,0 +1,27 @@ +{ + "name": "web", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "next": "latest", + "react": "18.2", + "react-dom": "18.1", + "react-native-web": "^0.18.4", + "ui": "*" + }, + "devDependencies": { + "@types/node": "^18.11.5", + "@types/react": "^18.0.22", + "@types/react-dom": "^18.0.7", + "babel-plugin-react-native-web": "^0.18.4", + "eslint": "^8.19.0", + "tsconfig": "*", + "typescript": "^4.7.4" + } +} diff --git a/examples/with-react-native-web/apps/web/pages/_app.tsx b/examples/with-react-native-web/apps/web/pages/_app.tsx new file mode 100644 index 0000000..c5a0ea0 --- /dev/null +++ b/examples/with-react-native-web/apps/web/pages/_app.tsx @@ -0,0 +1,6 @@ +import type { AppProps } from "next/app"; +import "../styles/global.css"; + +export default function MyApp({ Component, pageProps }: AppProps) { + return <Component {...pageProps} />; +} diff --git a/examples/with-react-native-web/apps/web/pages/index.tsx b/examples/with-react-native-web/apps/web/pages/index.tsx new file mode 100644 index 0000000..ab2ba8d --- /dev/null +++ b/examples/with-react-native-web/apps/web/pages/index.tsx @@ -0,0 +1,12 @@ +import { Button } from "ui"; + +import styles from "../styles/index.module.css"; + +export default function Web() { + return ( + <div className={styles.container}> + <h1>Web</h1> + <Button onClick={() => console.log("Pressed!")} text="Boop" /> + </div> + ); +} diff --git a/examples/with-react-native-web/apps/web/styles/global.css b/examples/with-react-native-web/apps/web/styles/global.css new file mode 100644 index 0000000..3c73c6c --- /dev/null +++ b/examples/with-react-native-web/apps/web/styles/global.css @@ -0,0 +1,8 @@ +body { + font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", + "Arial", sans-serif; + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} diff --git a/examples/with-react-native-web/apps/web/styles/index.module.css b/examples/with-react-native-web/apps/web/styles/index.module.css new file mode 100644 index 0000000..d2a4fa1 --- /dev/null +++ b/examples/with-react-native-web/apps/web/styles/index.module.css @@ -0,0 +1,3 @@ +.container { + text-align: center; +} diff --git a/examples/with-react-native-web/apps/web/tsconfig.json b/examples/with-react-native-web/apps/web/tsconfig.json new file mode 100644 index 0000000..a355365 --- /dev/null +++ b/examples/with-react-native-web/apps/web/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "tsconfig/nextjs.json", + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} |
