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"