React-native-paper: How to install new modules after setup?

[ianaz]

First of all thank you for your work! I followed your "getting started" guide and worked perfectly, but now I'm having quite a big issue on almost all new libraries I want to add...
I'm writing the application in React Native and having it transformed for web too and it works well until I install a library (For example the Bottom sheet you recommend).

I install the new library, launch my application using react-app-rewired start and then, even if flow plugin, preset-env etc. are there I get errors like this one:

.../workspace/Name/node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'flow' isn't currently enabled (30:8):

which suggests webpack isn't setup correctly; I then noticed in the config-overrides.js that you want babel presets/plugins only to be ran on react-native-vector-icons and react-native-safe-area-view modules.
To be clear (as described here):

....
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
...

Whenever I add my new library there, I then get another compilation error:

./node_modules/react-native-gesture-handler/GestureButtons.js 244:65
Module parse failed: Unexpected token (244:65)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           rest = _objectWithoutProperties(_this$props2, ["children", "style"]);
| 
>     const resolvedStyle = _reactNative.StyleSheet.flatten(style ?? {});
| 
|     return /*#__PURE__*/_react.default.createElement(BaseButton, _extends({}, rest, {

react: 16.13.1
react-native: 0.63.2
react-native-paper: 4.0.1
react-native-vector-icons: 7.0.0

Any suggestion? Thank you very much and sorry if it's a noob question

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[arafatzahan]

Have you figured out how to solve this?

[arafatzahan]

@ianaz I've found the solution. '@babel/plugin-proposal-nullish-coalescing-operator' is needed.

[RichardLindhout]

You are trying to run react-native libraries on the web. Some of the react-native modules won't work on the web but only on Android and iOS.

In my opinion it's better to make an abstraction on top of react-router-dom and react-navigation and use react-router-dom on the web.

[kuasha420]

@RichardLindhout React Navigation Works SURPRISINGLY well on react native web, animation, url and everything. I was very surprised on how well it works.

[RichardLindhout]

Nice <3! I've tried react-navigation a few times in the past which is already 2/3 years ago I think and it did not work well enough back then performance wise on native.

I still use react-native-navigation, but I should try react-navigation since a lot of things have improved!

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.