microsoft / microsoft/react-native-test-app

react-native-web support

Open
#812 18 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
674
Forks
97
Avg merge
21h 43m
Merged PRs (30d)
20

Description

Proposal

Hi 👋

I'm currently targetting the web for some react-native libraries (ex: react-native-localize).
It could be nice to add support for react-native-web, as it's well used.

Alternatives

Using react-native-test-app + keeping a package.json with a bundler (vite? webpack?)

Implementation Details
  • Add vite to the project
// vite.config.js

/** @type {import("vite").UserConfig} */
const config = {
  resolve: {
    alias: {
      "react-native": "react-native-web",
    },
    extensions: [
      "web.mjs",
      "mjs",
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.jsx",
      "jsx",
      "web.tsx",
      "tsx",
      "json",
    ],
  },
};

export default config;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>react-native-test-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../../example/index.web.js"></script>
  </body>
</html>
Additional Context

No response

Code of Conduct
  • I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the project package.json, the proposed vite.config.js, and the HTML entry point that loads ../../example/index.web.js. Check how the existing react-native-test-app examples are wired, then verify that a Vite web target resolves react-native to react-native-web and runs successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native, vite
Domain
build-system, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.