How to use native-base components with expo-sdk 33 for web

How do I modify webpack configuration to make native-base work with expo project.

I want to follow NativeBase-KitchenSink/README.md at web-support · GeekyAnts/NativeBase-KitchenSink · GitHub guide, to make native-base work with expo web.

Please help me out with this.

3 Likes

Hi @shubhamdeol, I’ll ask about this internally- but what have you tried so far to get this working, and what errors are you running into?

2 Likes

I’m using the standard expo start -w but I wonder where to set native-base and native-base-web override?

1 Like

We need the ability to edit webpack settings, eg. alias and include features.
Or the web project can only run outside expo since we cannot edit the overide feature

Here are some codes that native-base-web need to override and include in order to work.

addWebpackAlias({
    "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    "react-native": "react-native-web"
  }),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid'),
    path.resolve('node_modules/react-native-drawer'),
    path.resolve('node_modules/react-native-safe-area-view'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
    path.resolve('node_modules/react-native-web'),
    path.resolve('node_modules/react-native-tab-view'),
    path.resolve('node_modules/static-container'),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties"
  ),
1 Like

@txs If you want to over-ride webpack configuration in expo web. You can create a webpack.config.js file. But, I am not sure what things to override and how to do it. I am not good with webpack. I couldn’t find any way. here is the guide to override webpack config in expo web:

1 Like

Thanks for helping out finding this doc. This sure helps!

1 Like

@txs if you are able to modify webpack configuration correctly to make nativebase work with expo-web.
Please share your webpack config file with me as well.

Not sure if this is definitely related but I’m also having issues getting my existing project to work with expo-web after updating to sdk33. It seems to be an error caused by native-base, output:

ProjectDir/node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
|  */
| export default class StyleProvider extends React.Component {
>   static propTypes = {
|     children: PropTypes.element.isRequired,
|     style: PropTypes.object,
2 Likes

I spoke with our expert on all things Expo-web, he updated the process/ corresponding doc, and as long you have the latest expo-CLI (npm i -g expo-cli) and run expo customize:web in your project then it should work.

Here’s the PR with the changes - Added web guides retroactively by EvanBacon · Pull Request #4554 · expo/expo · GitHub

Same error for Me

I don’t have so much experience so can you tell me how to fix this

ProjectDir/node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
|  */
| export default class StyleProvider extends React.Component {
>   static propTypes = {
|     children: PropTypes.element.isRequired,
|     style: PropTypes.object,

Having the same issue, albeit with a different module.

Same error with native-base package after running expo customize:web then expo start -w

Ive been working on this today too - I think you just need to merge the above config for babel

in webpack.config.js:

const createExpoWebpackConfig = require("@expo/webpack-config");
const path = require("path");
const merge = require("webpack-merge");

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfig(env, argv);

  return merge(config, {
    resolve: {
      alias: {
        "react-native/Libraries/Renderer/shims/ReactNativePropRegistry":
          "react-native-web/dist/modules/ReactNativePropRegistry",
        "react-native": "react-native-web"
      }
    },
    module: {
      rules: [
        {
          test: /\.[jt]sx?$/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["babel-preset-expo"],
              plugins: ["@babel/plugin-proposal-class-properties"],
              cacheDirectory: true
            }
          },
          include: [
            path.resolve("node_modules/native-base-shoutem-theme"),
            path.resolve("node_modules/react-navigation"),
            path.resolve("node_modules/react-native-easy-grid"),
            path.resolve("node_modules/react-native-drawer"),
            path.resolve("node_modules/react-native-safe-area-view"),
            path.resolve("node_modules/react-native-vector-icons"),
            path.resolve(
              "node_modules/react-native-keyboard-aware-scroll-view"
            ),
            path.resolve("node_modules/react-native-web"),
            path.resolve("node_modules/react-native-tab-view"),
            path.resolve("node_modules/static-container")
          ]
        }
      ]
    }
  });
};

So far, this has be with no errors and a native-base button… cant say much more than that yet tho

1 Like

add “@babel/plugin-transform-modules-commonjs” to babel plugins, or you will get

react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
Attempted import error: ‘react-native-web/dist/index’ does not contain a default export (imported as ‘ReactNative’).

plugins: [“@babel/plugin-proposal-class-properties”, “@babel/plugin-transform-modules-commonjs”],

1 Like

You need to let babel know which libraries it should compile. It’ll automatically target anything starting with react-native, expo, @expo, @react-navigation, react-navigation.
Add the following to your app.json:

{
  "expo": {
    "web": {
      "build": {
        "babel": {
          "include": ["native-base", "static-container"]
        }
      }
    }
  }
}
1 Like

@bacon Thanks. I am gonna try this now. :slight_smile:

I will try this

Did this work for you?

Didn’t work for me.