Implementing Multi‑Platform Development with React‑Native‑Web: Setup, Configuration, and Code Sharing

1. Background – Growing user‑experience expectations require consistent experiences across iOS, Android, and Web, prompting the need for a solution that allows one codebase to serve all three platforms. The team evaluated options and chose react-native-web as the bridge.

2. Problems – High UX standards push RN and Flutter to replace H5, RN code is isolated in separate apps, limited familiarity with Vue/HTML, and integrating RN‑generated assets into existing Vue pages is unclear.

3. Solution – Adopt react-native-web , an open‑source library from Facebook that enables React‑Native components to run on the web.

4. Practical Steps

a. Set up the RN‑Web environment:

npx react-native init rnweb064 --version 0.64.2

Install dependencies:

yarn add react-native-web

yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack

Update package.json scripts:

"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
"build1": "rm -rf dist/ && webpack --mode=development --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js --port 8090 --open"

Adjust webpack.config.js to include the src folder so RN‑Web can be compiled.

b. Platform‑specific handling – Use Platform.OS checks to separate web and native logic. Example:

if (Platform.OS == 'web') {
  let json = JSON.stringify(mData);
  window.che168_map_addressData_example.addOverlayFromAddress(json);
  this.closeThisView();
} else {
  this._closeNativeView(mData);
}

c. Business code sharing – Organize shared components (e.g., input, listview, image, keyboard handling, network requests, notifications, back button, utilities) under a common HomeW module, using the same API names with empty implementations for unsupported platforms.

d. Code management – Use Git submodules to keep shared libraries (e.g., reactnative‑lib , usedcar‑web‑lib ) separate yet version‑controlled.

5. Summary – The article demonstrates a workable workflow for writing one React‑Native codebase that can be compiled to native apps and a web bundle, handling platform differences through conditional code, and managing shared assets with standard tooling.