Skip to content

Can I use react-native-web with Vite instead of WebPack? #2201

Answered by hxse
hxse asked this question in Q&A
Discussion options

You must be logged in to vote

I found a way:

  • npx react-native init demo
  • cd demo
  • Add following code in metro.config.js -> module.exports = {}
    This is to compatibility with JSX files.
    Maybe you need to reinstall the APP will take effect.
resolver: {
sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'mjs'],
  }
  • yarn create vite web --template react
  • cd web && yarn
  • Add following code in vite.config.js -> export default defineConfig({})
resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
  },
  • mkdir share && touch share/test.jsx
    Add following code in share/test.jsx
import React from 'react';
import {Text} from 'react-native';

const Test = ({title}) => {
  return <Text>hello world { title}</Text>;
}…

Replies: 4 comments 8 replies

Comment options

You must be logged in to vote
1 reply
@sagarkudutata
Comment options

Comment options

You must be logged in to vote
6 replies
@Marknjo
Comment options

@Rossella-Mascia-Neosyn
Comment options

@Marknjo
Comment options

@Marknjo
Comment options

@stereobooster
Comment options

Answer selected by hxse
Comment options

You must be logged in to vote
1 reply
@sagarkudutata
Comment options

Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
8 participants
Converted from issue

This discussion was converted from issue #2200 on January 15, 2022 17:28.