Blank screen react-native-paper web

[ricardosoaresl]

Blank screen react-native-paper web

I followed all the documentation to try to configure react-native-paper to run in the browser too. Unsuccessfully.

At the beginning I was facing a lot of compilation errors, I adjusted the modules to resolve these errors and got to the point where I no longer had any errors. The site loads, you can see all the index.html code, just as it is in the documentation. And the app.bundle.js file is also loaded, I can see it in the resources tab.

However, there is only a white screen. I've tried everything to solve this problem, has anyone experienced this? Do you have any idea how to solve it?

Here are my codes that can help:

App.tsx

import React from 'react';
import { Platform, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { PaperProvider } from 'react-native-paper';

function App(): React.JSX.Element {
  return (
    <PaperProvider>
      <SafeAreaView style={styles.safeAreaView}>
        {Platform.OS === 'web' ? (
          <style type="text/css">{
        @font-face {
          font-family: 'MaterialCommunityIcons';
          src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
        }
      }</style>
        ) : null}
        {/* <AppStack /> */}
        <View
          style={{
            display: 'flex',
            flex: 1,
            backgroundColor: '#f0f',
            width: '100%',
            height: '100%',
          }}
        >
          <Text>Just a test</Text>
        </View>
      </SafeAreaView>
    </PaperProvider>
    // <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
    //   <Text>Just a test</Text>
    // </View>
  );
}

export default App;

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
  },
});

webpack.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

module.exports = {
  mode: 'development',

  // Path to the entry file, change it according to the path you have
  entry: path.join(__dirname, 'App.tsx'),

  // Path for the output files
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.bundle.js',
  },

  // Enable source map support
  devtool: 'source-map',

  // Loaders and resolver config
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              'module:metro-react-native-babel-preset',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-object-rest-spread',
              'react-native-web',
            ],
          },
        },
      },
      {
        test: /\.(ts|tsx|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['module:metro-react-native-babel-preset'],
            plugins: [['react-native-web', { commonjs: true }]],
          },
        },
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        type: 'asset/resource',
      },
    ],
  },

  resolve: {
    extensions: ['.web.js', '.js', '.jsx', '.ts', '.tsx'],
    alias: {
      'react-native$': 'react-native-web',
      '../Utilities/Platform': 'react-native-web/dist/exports/Platform',
      '../../Utilities/Platform': 'react-native-web/dist/exports/Platform',
      './Platform': 'react-native-web/dist/exports/Platform',
      '@': path.resolve(__dirname, './src/'),
    },
  },

  // Development server config
  devServer: {
    static: path.join(__dirname, 'public'),
    compress: true,
    // historyApiFallback: true,
  },
};

babel.config.js

module.exports = (api) => {
  const babelEnv = api.env();
  const plugins = [
    ['react-native-web'],
    ['module:react-native-dotenv'],
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '^@/(.+)': './src/\\1',
          '^react-native$': 'react-native-web',
        },
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
          '.jsx',
          '.json',
          '.tsx',
          '.ts',
          '.native.js',
        ],
      },
    ],
  ];

  if (babelEnv === 'production') {
    plugins.push('transform-remove-console');
  }

  return {
    presets: [
      'module:metro-react-native-babel-preset',
      '@babel/preset-typescript',
    ],
    plugins,
  };
};

[gedu]

Hey, I'm seeing you are trying to "inject" some CSS, did you try remove it? React-Native doesn't support CSS you have to do it using StyleSheet, something like

const styles = Platform.OS === 'web'
  ? StyleSheet.create({
      fontFace: {
          fontFamily: 'MaterialCommunityIcons',
      },
    })
  : StyleSheet.create({
      fontFace: {}
      });

<Text style={styles.fontFace}>Just a Test</Text>

You can add some CSS directly in the index.html but for this cases I would recommend handle all in the react-native side

[ricardosoaresl]

I tried to configure react-native-web, as I said in the question. And yes, react-native-web will understand this CSS.
I'll keep this question open to see if anyone can solve this problem, in my case I decided to migrate to the web expo. Now I can run react-native on both app and web sides. I highly recommend the same to anyone thinking of using react-native-paper with react-native-web.

[gedu]

React-native-web understand but it uses Stylesheet anyway you can see it here: https://necolas.github.io/react-native-web/docs/styling/
I tried your code and get compiling errors, that's why I suggest to use StyleSheet.
Anyway, this is not a bug or issue from react-native-paper, probably you can ask in the paper discord channel: https://discord.gg/BCxSWSK5

[ricardosoaresl]

I think it's a bug in the integration of react-native-paper with react-native-web. At the very least the documentation is wrong, you can create a project from scratch by installing it with all the updated libs and you will see that it doesn't work.

Regarding the css part, the react-native-paper doc itself suggests the css code as I sent it, as you can see here: https://callstack.github.io/react-native-paper/docs/guides/react-native-web
In the session: Load the Material Community Icons.

Anyway, for me this no longer makes sense, as I said above I decided to use expo web since the react-native-web documentation itself recommends its use, as you can see in this section: https://necolas.github.io/react-native-web/docs/multi-platform/
"If you are interested in making a multi-platform app it is strongly recommended that you use Expo"

[MorganTrudeau]

Works for me

"react-native-paper": "^5.13.1",
"react-native-web": "^0.19.13",
"react": "18.3.1",
"react-dom": "^18.0.0",
"react-hook-form": "^7.54.2",
"react-native": "0.77.1"
"webpack": "^5.98.0",

// webpack.config.js

const path = require('path');

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

const appDirectory = path.resolve(__dirname);

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

const iconsLoader = {
  test: /\.(ttf)$/,
  type: 'asset/resource',
};

const babelLoader = {
  test: /\.(js|ts|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, 'src'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: [['@babel/preset-typescript', {allowDeclareFields: true}]],
      plugins: ['react-native-web'],
      sourceType: 'unambiguous',
    },
  },
};

const svgrLoader = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'removeViewBox',
              active: false,
            },
          ],
        },
      },
    },
  ],
};

const imageLoader = {
  test: /\.(png|jpe?g|gif)$/,
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
    esModule: false,
    scalings: {'@2x': 2, '@3x': 3},
  },
  loader: 'react-native-web-image-loader',
};

const javascriptLoader = {
  test: /\.(js|jsx)$/,
  resolve: {
    fullySpecified: false,
  },
};

const javascriptModuleLoader = {
  test: /\.mjs$/,
  resolve: {
    fullySpecified: false,
  },
  include: /node_modules/,
  type: 'javascript/auto',
};

module.exports = {
  target: ['web', 'es5'],
  devServer: {historyApiFallback: true},
  entry: ['babel-polyfill', path.join(__dirname, 'index.web.js')],
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'chunk.[name].[contenthash].js',
    chunkFilename: 'chunk.[name].[contenthash].js',
  },
  resolve: {
    extensions: [
      '.web.tsx',
      '.web.ts',
      '.tsx',
      '.ts',
      '.web.js',
      '.js',
      '.jsx',
      '.json',
      '.png',
    ],
    alias: {
      'react-native$': 'react-native-web',
      'react-native-vector-icons/MaterialCommunityIcons':
        '@react-native-vector-icons/material-design-icons',
      '@gorhom/bottom-sheet': path.join(
        __dirname,
        'src/modules/@gorhom/bottom-sheet',
      ),
      '@invertase/react-native-apple-authentication': path.join(
        __dirname,
        'src/modules/react-native-apple-authentication',
      ),
      '@react-native-google-signin/google-signin': path.join(
        __dirname,
        'src/modules/@react-native-google-signin',
      ),
      'react-native-config': path.join(
        __dirname,
        'src/modules/react-native-config',
      ),
      '@react-native-firebase/auth': path.join(
        __dirname,
        'src/modules/firebase/auth',
      ),
      '@react-native-firebase/firestore': path.join(
        __dirname,
        'src/modules/firebase/firestore',
      ),
      '@react-native-firebase/functions': path.join(
        __dirname,
        'src/modules/firebase/functions',
      ),
    },
  },
  module: {
    rules: [
      babelLoader,
      imageLoader,
      svgrLoader,
      iconsLoader,
      javascriptLoader,
      javascriptModuleLoader,
    ],
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
        },
      ],
    }),
    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),
    }),
    new webpack.EnvironmentPlugin({JEST_WORKER_ID: null}),
  ],
};