zoriya/react-native-omni
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-omni.git synced 2026-08-05 21:58:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Setup react native web

Browse Source
This commit is contained in:
zoriya
2026-05-28 12:49:58 +02:00
parent 466b792878
commit 0ac36e9890
6 changed files with 755 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/index.web.js
+13
View File
@@ -0,0 +1,13 @@
/**
* @format
*/
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
rootTag: document.getElementById("root"),
});
example/metro.config.js
+18 -1
View File
@@ -2,6 +2,8 @@ const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const path = require("node:path");
const root = path.resolve(__dirname, "..");
const useWeb = process.env.USE_WEB === "true" || process.env.PLATFORM === "web";
/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
@@ -9,7 +11,22 @@ const root = path.resolve(__dirname, "..");
* @type {import('metro-config').MetroConfig}
*/
const config = {
watchFolders: [root],
watchFolders: [root],
...(useWeb && {
resolver: {
extraNodeModules: {
"react-native": path.resolve(__dirname, "node_modules", "react-native-web"),
},
},
}),
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
example/package.json
+15 -4
View File
@@ -7,15 +7,18 @@
"ios": "react-native run-ios --simulator='iPhone 16'",
"lint": "eslint .",
"start": "react-native start --reset-cache --port 8082",
"web": "webpack serve --mode development --open",
"test": "jest",
"pod": "bundle install && bundle exec pod install --project-directory=ios"
},
"dependencies": {
"react": "19.2.3",
"react-native": "0.84.1",
"@react-native/new-app-screen": "0.84.1",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-native": "0.84.1",
"react-native-nitro-modules": "0.35.3",
"react-native-safe-area-context": "^5.5.2",
"react-native-nitro-modules": "0.35.3"
"react-native-web": "^0.20.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
@@ -29,7 +32,15 @@
"@react-native/metro-config": "0.84.1",
"@react-native/typescript-config": "0.84.1",
"@types/jest": "^29.5.13",
"babel-plugin-module-resolver": "^5.0.2"
"babel-loader": "^10.1.1",
"babel-plugin-module-resolver": "^5.0.2",
"css-loader": "^7.1.4",
"html-webpack-plugin": "^5.6.7",
"style-loader": "^4.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.107.2",
"webpack-cli": "^7.0.3",
"webpack-dev-server": "^5.2.4"
},
"engines": {
"node": ">= 22.11.0"
example/public/index.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Native Omni Example</title>
<style>
html, body, #root {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
example/webpack.config.js
+69
View File
@@ -0,0 +1,69 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname);
const rootDirectory = path.resolve(__dirname, "..");
module.exports = {
mode: "development",
devtool: "eval-source-map",
entry: path.resolve(__dirname, "index.web.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.web.js",
publicPath: "/",
},
resolve: {
extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".web.js", ".js"],
alias: {
"react-native$": "react-native-web",
"react-native-omni": path.resolve(rootDirectory, "src"),
react: path.resolve(appDirectory, "node_modules", "react"),
"react-dom": path.resolve(appDirectory, "node_modules", "react-dom"),
},
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules\/(?!(react-native|@react-native|react-native-web|react-native-omni)\/).*/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
plugins: [
["@babel/plugin-transform-react-jsx", { runtime: "automatic" }],
[
"module-resolver",
{
extensions: [".js", ".ts", ".json", ".jsx", ".tsx"],
alias: {
"react-native-omni": path.resolve(rootDirectory, "src"),
},
},
],
],
},
},
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html"),
}),
],
devServer: {
port: 3000,
hot: true,
historyApiFallback: true,
},
};