javascript – React Native and webpack

it has been some time since I did some net coding. I attempted to construct a easy app utilizing React Native. As soon as I began I puzzled how I might view the app within the browser. Some LLMing introduced me to a mixture of webpack and react-native-web.

So I basically have a base folder the place I’ve my ios, android and net folder. Within the net folder I’ve a index.html and a index.js file.

Right here is their content material:

index.html

index.js

// net/index.js
import { AppRegistry } from 'react-native';
import App from '../App';
import {identify as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  rootTag: doc.getElementById("root")
});

My webpack.config.js seems to be like this:

const path = require('path');

module.exports = {
  entry: './net/index.js',
  output: {
    publicPath: path.resolve(__dirname, 'net'),
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    guidelines: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        take a look at: /.(jpe?g|png|gif|svg)$/i, 
        loader: 'file-loader',
        choices: {
          identify: '/public/icons/[name].[ext]'
        }
      }
    ],
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js', '.jsx'],
  },
  devServer: {
    static: {
      listing: path.be a part of(__dirname, 'net'),
    },
    compress: true,
    port: 9000,
  },
};

Here is my App.js

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import CreatePostScreen from './screens/CreatePostScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

perform App() {
  return (
    
      
        
        
        
      
    
  );
}

export default App;

Once I begin webpack utilizing webpack serve --mode improvement --open I get a clean HTML web page. So it appears my precise App isn’t initialized. The one error I see within the console for webpack is:

WARNING in ./node_modules/react-native-screens/lib/module/parts/ScreenStackItem.js 36:183-198
export 'FooterComponent' (imported as 'FooterComponent') was not present in './ScreenFooter' (doable exports: default)
 @ ./node_modules/react-native-screens/lib/module/index.js 19:0-74 19:0-74
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Screens.js 14:12-43
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardStack.js 15:15-39
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/StackView.js 15:17-42
 @ ./node_modules/@react-navigation/stack/lib/commonjs/index.js 61:17-54
 @ ./App.js 1:274-308
 @ ./net/index.js 1:156-173

However that is solely a warning is not it?