React-native-vector-icons: Remove dependency on React Native's `TabBarIOS`

Created on 7 Jul 2020 · 5Comments · Source: oblador/react-native-vector-icons

react-native-web removed TabBarIOS in their recent 0.13.0 release, citing that it is a deprecated React Native API. Most UI libraries that support both native and web are using react-native-vector-icons and react-native-web to bring support to web. Unfortunately, react-native-vector-icons still has a dependency on TabBarIOS making it incompatible with the most recent versions of react-native-web. Is it possible to break this dependency in a future version, so we can all use the latest versions of react-native-web?

(There may be workarounds to this issue that I'm not aware of, but I couldn't come up with any)

Source

brandonpearcy

👍9 ❤2

Most helpful comment

If you're stuck on this issue, and just need a short-term workaround, you can depend on a fork of react-native-vector-icons that simply removes TabBarItemIOS and TabBarItem.

yarn add @ovaeasy/react-native-vector-icons

and then add it to your webpack config aliases:

    alias: {
      'react-native$': 'react-native-web',
      'react-native-vector-icons': '@ovaeasy/react-native-vector-icons',
    },

brandonpearcy on 24 Jul 2020

👍10

All 5 comments

I just updated to the last version ("react-native-vector-icons": "^6.7.0")
And Iam getting that
Screen Shot 2020-07-08 at 14 16 33

Is something about that?!

danilo900 on 8 Jul 2020

You can install
npm install --save @react-native-community/toolbar-android

mechanizzed on 8 Jul 2020

If you're stuck on this issue, and just need a short-term workaround, you can depend on a fork of react-native-vector-icons that simply removes TabBarItemIOS and TabBarItem.

yarn add @ovaeasy/react-native-vector-icons

and then add it to your webpack config aliases:

    alias: {
      'react-native$': 'react-native-web',
      'react-native-vector-icons': '@ovaeasy/react-native-vector-icons',
    },

brandonpearcy on 24 Jul 2020

👍10

@mechanizzed not clear how your suggestion of adding @react-native-community/toolbar-android would help.
The problem OP is facing is with the import statement with react-native-vector icons source code, that cannot be satisfied
with latest releases of react-native-web.

I am also facing this problem.
React-native-web, follows react-native API and no longer exports tab bar ios.

My code is actually not using any react vector icons tab bars in this case, but this unfortunate error is still there and it is preventing from migrating the libraries up.

vladp on 17 Aug 2020

👍1

@brandonpearcy thanks for the workaround

For anyone using react-native-web and targeting both web/android, I ran into this error when compiling for android when using brandonpearcy's forked repo

Program type already present: com.oblador.vectoricons.BuildConfig

the workaround was to add a react-native.config.js:

module.exports = {
    dependencies: {
        '@ovaeasy/react-native-vector-icons': {
            platforms: {
                ios: null,
                android: null
            }
        }
    }
};

Also TabBarIOSwas removed back in [email protected] and probably shouldn't exist in newer releases