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

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 - https://github.com/expo/expo/pull/4554/files

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.

It seems like @bacon added native base to expo-cli default modules recently (PR)

It will probably be possible to use native-base component by a simple import after the expo-cli release

1 Like

Oh yeah, this isn’t a great solution but figured enough people ran into the issue. Might even be easier if they also published under the alias “react-native-base”. If you guys run into libraries like this in the future please try PR’n them to that same location so it gets on my radar faster :smiley:

1 Like