Make react-native-vector-icons optional

[pradel]

Current Behavior

I want to use @react-navigation/material-bottom-tabs without react-native-vector-icons, but the following error is popping up.

error: bundling failed: Error: Unable to resolve module `react-native-vector-icons/MaterialCommunityIcons` from `node_modules/@react-navigation/material-bottom-tabs/src/views/MaterialBottomTabView.tsx`: react-native-vector-icons/MaterialCommunityIcons could not be found within the project.

Currently you can use react-native-paper without react-native-vector-icons by using the babel-plugin-optional-require babel plugin. https://callstack.github.io/react-native-paper/getting-started.html

Expected Behavior

I should be able to use this package without react-native-vector-icons as I do not render any icon.

This is the way react-native-paper is using to allow this behavior https://github.com/callstack/react-native-paper/blob/212aa73715f157e1a77f8738859a608a543ba04c/src/components/MaterialCommunityIcon.tsx#L14.

How to reproduce

Create a new react-native project (without expo) and just add and use @react-navigation/material-bottom-tabs without an icon.

Your Environment

software	version
iOS or Android	both
@react-navigation/native	5.3.0
@react-navigation/material-bottom-tabs	5.2.2
react-native-paper	2.16.0
react-native	0.61.2
expo	none
node	12.16.2
npm or yarn	yarn

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 5.3.0, latest: 5.7.3)
• @react-navigation/material-bottom-tabs (found: 5.2.2, latest: 5.2.16)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[pradel]

The issue is still happening in the latest version of the package see https://github.com/react-navigation/react-navigation/blob/main/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx#L4

[rusakovic]

Confirm the issue.

software	version
iOS or Android	iOS
@react-navigation/native	^5.7.3
@react-navigation/material-top-tabs	^5.2.16
react-native	https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz
expo	^38.0.9
node	12.16.2
npm or yarn	npm

Error: Unable to resolve module `./node_modules/@react-navigation/stack/src/views/assets/back-icon-mask` from ``:

None of these files exist:
  * node_modules\@react-navigation\stack\src\views\assets\back-icon-mask(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * node_modules\@react-navigation\stack\src\views\assets\back-icon-mask\index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
    at ModuleResolver.resolveDependency (...\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (...\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (...\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at ...\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (...\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (...\node_modules\metro\src\Server.js:99:24)
    at _next (...\node_modules\metro\src\Server.js:119:9)