Nativebase: Avoid ejecting CRA if using react-app-rewired

[axhamre]

I have a cross platform, using the same code on iOS and web. To use NativeBase on web I'm instructed to eject my CRA.

As ejecting comes with some negatives, I wonder if anyone knows how/has experience to include the webpack configurations below without ejecting the app, e.g. by using react-app-rewired?

alias: { "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry", "react-native": "react-native-web" },

{ test: /\.(js|jsx|mjs)$/, include: [ paths.appSrc, path.resolve(paths.appNodeModules, "native-base-shoutem-theme"), path.resolve(paths.appNodeModules, "react-navigation"), path.resolve(paths.appNodeModules, "react-native-easy-grid"), path.resolve(paths.appNodeModules, "react-native-drawer"), path.resolve(paths.appNodeModules, "react-native-safe-area-view"), path.resolve(paths.appNodeModules, "react-native-vector-icons"), path.resolve( paths.appNodeModules, "react-native-keyboard-aware-scroll-view" ), path.resolve(paths.appNodeModules, "react-native-web"), path.resolve(paths.appNodeModules, "react-native-tab-view"), path.resolve(paths.appNodeModules, "static-container") ], loader: require.resolve("babel-loader"), options: { cacheDirectory: true } },

[SupriyaKalghatgi]

You can check something similar with NativeBase KitchenSink web-support
https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/web-support#to-create-new-react-app

[axhamre]

Exactly, that's where my code dumps above are from.

Do you have any suggestion on how to use react-app-rewired to integrate these resolvers without ejecting the app?

[SupriyaKalghatgi]

As ejecting comes with some negatives

What is the negativity

[axhamre]

The docs on CRA states it quite clearly:

"You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. "

In other words - I will have to maintain all Webpack configurations myself if I eject and that's a unnecessary burden for most developers.

[SupriyaKalghatgi]

As ejecting comes with some negatives

I assumed this to be NativeBase eject process (theme eject)

[SupriyaKalghatgi]

We have not tried NativeBase with CRA without ejecting
We found ejecting process way far better and simple process of setting up the project

[axhamre]

If you'd accomplish avoiding the eject successfully, please share the knowledge as I think that would benefit a lot of people.

[SupriyaKalghatgi]

I stated this above that,

We found ejecting process way far better and simple process of setting up the project

And this process has been accepted by many of NativeBase users. So far we haven't received any request for this approach. So we would stick to this, unless we have many requests coming in for this.

[axhamre]

I see.

1. I'm really sorry to insist, but in what way is it "far better"?

2. I understand that it's "simple" - it's just a command and you're done. But a week later when React has a crucial update and you need hours of updating all the webpack configs that CRA are curating for all other people - then it's not simple anymore.

So to sum it up, if it possible to avoid ejecting CRA - I cannot see any reasonable argument why to not avoid it?

[SupriyaKalghatgi]

We can consider this, but then not at higher priority

[axhamre]

I totally understand that, thank you 🙂

[Timer]

I'd really like to see NativeBase compatibility with a non-ejected copy of Create React App. Let me know if there's anything we can do to help.

[platypusrex]

@Timer @axhamre @SupriyaKalghatgi The below should work if you're using CRA v2.

1. yarn add --dev react-app-rewired customize-cra @babel/plugin-proposal-class-properties

2. update scripts in your package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

1. Create config-overrides.js in your project root

const path = require('path');
const {
  override,
  addWebpackAlias,
  babelInclude
} = require('customize-cra');

module.exports = override(
  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"
  ),
);

I'm using typescript, so @babel/plugin-proposal-class-properties might not be necessary for you.
Hope this helps!

[SupriyaKalghatgi]

@platypusrex Not success though

[SupriyaKalghatgi]

Working procedure here
https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/web-support/README.md

[platypusrex]

@SupriyaKalghatgi Hmm - looks like it pretty much got you where you needed to go, though! You're welcome! 😜

[SupriyaKalghatgi]

@platypusrex Though there is compatibility issue with latest react and react navigation