rmdort/App.web.tsx

## App.web.tsx
import React, {useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from {'\n'}React Native Web!</Text>
      <TouchableOpacity
        onPress={() => setCount(count + 1)}
        style={styles.button}>
        <Text>Click me!</Text>
      </TouchableOpacity>

      <Text>You clicked {count} times!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#C3E8BD',
    paddingTop: 40,
    paddingHorizontal: 10,
  },
  button: {
    backgroundColor: '#ADBDFF',
    padding: 5,
    marginVertical: 20,
    alignSelf: 'flex-start',
  },
  title: {
    fontSize: 40,
  },
});

export default App;

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>RN Web</title>
    <style>
      #app-root {
        display: flex;
        flex: 1 1 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app-root"></div>
  </body>
</html>

## index.web.js
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from './App';
if (module.hot) {
  module.hot.accept();
}
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  initialProps: {},
  rootTag: document.getElementById('app-root'),
});

## webpack.config.js
const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname);
const {presets} = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
  // Add every react-native package that needs compiling
  // 'react-native-gesture-handler',
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.js$|tsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'App.web.tsx'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'],
    },
  },
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
    },
  ],
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  entry: {
    app: path.join(__dirname, 'index.web.js'),
  },
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'rnw_blogpost.bundle.js',
  },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      // See: https://github.com/necolas/react-native-web/issues/349
      __DEV__: JSON.stringify(true),
    }),
  ],
};
	import React, {useState} from 'react';
	import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

	const App = () => {
	const [count, setCount] = useState(0);
	return (
	<View style={styles.container}>
	<Text style={styles.title}>Hello from {'\n'}React Native Web!</Text>
	<TouchableOpacity
	onPress={() => setCount(count + 1)}
	style={styles.button}>
	<Text>Click me!</Text>
	</TouchableOpacity>

	<Text>You clicked {count} times!</Text>
	</View>
	);
	};

	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#C3E8BD',
	paddingTop: 40,
	paddingHorizontal: 10,
	},
	button: {
	backgroundColor: '#ADBDFF',
	padding: 5,
	marginVertical: 20,
	alignSelf: 'flex-start',
	},
	title: {
	fontSize: 40,
	},
	});

	export default App;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>RN Web</title>
	<style>
	#app-root {
	display: flex;
	flex: 1 1 100%;
	height: 100vh;
	}
	</style>
	</head>
	<body>
	<div id="app-root"></div>
	</body>
	</html>
	import {AppRegistry} from 'react-native';
	import {name as appName} from './app.json';
	import App from './App';
	if (module.hot) {
	module.hot.accept();
	}
	AppRegistry.registerComponent(appName, () => App);
	AppRegistry.runApplication(appName, {
	initialProps: {},
	rootTag: document.getElementById('app-root'),
	});
	const path = require('path');

	const webpack = require('webpack');
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	const appDirectory = path.resolve(__dirname);
	const {presets} = require(`${appDirectory}/babel.config.js`);

	const compileNodeModules = [
	// Add every react-native package that needs compiling
	// 'react-native-gesture-handler',
	].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

	const babelLoaderConfiguration = {
	test: /\.js$\|tsx?$/,
	// Add every directory that needs to be compiled by Babel during the build.
	include: [
	path.resolve(__dirname, 'index.web.js'), // Entry to your application
	path.resolve(__dirname, 'App.web.tsx'), // Change this to your main App file
	path.resolve(__dirname, 'src'),
	...compileNodeModules,
	],
	use: {
	loader: 'babel-loader',
	options: {
	cacheDirectory: true,
	presets,
	plugins: ['react-native-web'],
	},
	},
	};

	const svgLoaderConfiguration = {
	test: /\.svg$/,
	use: [
	{
	loader: '@svgr/webpack',
	},
	],
	};

	const imageLoaderConfiguration = {
	test: /\.(gif\|jpe?g\|png)$/,
	use: {
	loader: 'url-loader',
	options: {
	name: '[name].[ext]',
	},
	},
	};

	module.exports = {
	entry: {
	app: path.join(__dirname, 'index.web.js'),
	},
	output: {
	path: path.resolve(appDirectory, 'dist'),
	publicPath: '/',
	filename: 'rnw_blogpost.bundle.js',
	},
	resolve: {
	extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
	alias: {
	'react-native$': 'react-native-web',
	},
	},
	module: {
	rules: [
	babelLoaderConfiguration,
	imageLoaderConfiguration,
	svgLoaderConfiguration,
	],
	},
	plugins: [
	new HtmlWebpackPlugin({
	template: path.join(__dirname, 'index.html'),
	}),
	new webpack.HotModuleReplacementPlugin(),
	new webpack.DefinePlugin({
	// See: https://github.com/necolas/react-native-web/issues/349
	__DEV__: JSON.stringify(true),
	}),
	],
	};