Incompatibility issue with react-native-elements

[tgehrs]

When I attempt to add react-native-elements to my expo project (specifically working with the List component), it gives an error that fontFamily 'Material Icons' is not a system font:

It can easily be resolved by switching the imports within react-native-elements to point to this package, for example:

change this
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
to
import MaterialIcon from '@expo/vector-icons/MaterialIcons'

Is there an official (or better) way to do this? I am new to expo/RN and was unable to find any documentation

[Monte9]

@tgehrs I am the maintainer of React Native Elements.

I think this issue would be more relevant on our repo. This is because in a few of our components, we are defaulting to MaterialIcons at the root and that's the import statement you are seeing above. I think the fix for this would be to just import from 'react-native-vector-icons` and handle the type dynamically like we are doing for our other components.

If you wanna open an issue on our repo, I can make sure we push a fix for it asap.

[binoy14]

@tgehrs I tried using the SearchBar and Button which do what you are saying but I am not seeing any issue can you maybe provide some code snippet to help us debug it?

[anp]

@tgehrs @binoy14 are you following this guide? https://github.com/react-native-training/react-native-elements/blob/master/using-with-crna-or-expo.md

[tgehrs]

Thanks so much for taking the time to look into this. I went ahead and made a new CRNA app and was unable to reproduce this issue, even when matching the same dependencies and sdkVersion in my project that was having this issue it persists.

@dikaiosune yes I did follow those steps

@binoy14 if you want to take a look i've added you as a collaborator on the repo that is giving me issues

app.json

{
  "expo": {
    "sdkVersion": "14.0.0",
    "packagerOpts": {
      "assetExts": [
        "ttf"
      ]
    }
  }
}

package.json dependencies

  "dependencies": {
    "@expo/ex-navigation": "^2.9.2",
    "@expo/vector-icons": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "es6-promise": "^4.1.0",
    "expo": "14.0.2",
    "isomorphic-fetch": "^2.2.1",
    "react": "~15.4.0",
    "react-native": "0.41.2",
    "react-native-elements": "^0.9.7",
    "react-native-svg": "^5.1.6",
    "react-navigation": "^1.0.0-beta.7",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  }

[anp]

@tgehrs one thing that jumps out to me is that your package.json includes react-native-svg, when I believe you want to be using the vendored copy that comes with the SDK: https://docs.expo.io/versions/v14.0.0/sdk/svg.html

[tgehrs]

@dikaiosune thanks for pointing that out (i am very much a novice in this space) uninstalling react-native-svg did not affect the error

[anp]

@tgehrs can you paste the contents of your .babelrc file from your project?

[tgehrs]

@dikaiosune here you go, thanks again for taking time to help with this. I manually changed it to match the project without the exception, then re-installed the node modules but the exception still remains. I will give you access to the repo this is happening in as well. Also I understand if this looks to you like a personal problem issue needs to be closed

project with exception:

{
  "presets": ["react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

project w/o exception:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

[anp]

Yeah, that'll do it! babel-preset-expo is necessary for things like vector-icons and svg support to work in RN UI libraries. Is there a reason you can't include the decorator preset after the Expo one? I admit I'm not as familiar as I should be with the interactions between multiple babel presets.

[brentvatne]

@dikaiosune - react-native-stage-0/decorator-support is used in babel-preset-expo, but you can also use multiple presets, yeah

[tgehrs]

@dikaiosune @brentvatne woohoo!

so is it just the old version of CRNA that I used did not include that?

[brentvatne]

@tgehrs - that should have been in the old version too!

the source of babel-preset-expo is:

module.exports = {
  presets: ['babel-preset-react-native-stage-0/decorator-support'],
  plugins: [
    [
      'babel-plugin-module-resolver',
      {
        alias: {
          'react-native-vector-icons': '@expo/vector-icons',
          '@expo/vector-icons/lib/create-icon-set': 'react-native-vector-icons/lib/create-icon-set',
          '@expo/vector-icons/lib/icon-button': 'react-native-vector-icons/lib/icon-button',
          '@expo/vector-icons/lib/create-icon-set-from-fontello': 'react-native-vector-icons/lib/create-icon-set-from-fontello',
          '@expo/vector-icons/lib/create-icon-set-from-icomoon': 'react-native-vector-icons/lib/create-icon-set-from-icomoon',
          '@expo/vector-icons/lib/icon-button': 'react-native-vector-icons/lib/icon-button',
          '@expo/vector-icons/glyphmaps': 'react-native-vector-icons/glyphmaps',
        },
      },
    ],
  ],
};

[tgehrs]

@brentvatne Thanks for getting to the bottom of this!