Invariant Violation

[ftKnox]

Hi, I am getting this error. I am not sure what I am missing. This was tested in the default react native template.

versions used: react-native@0.61.5 @mdi/react@1.2.1 @mdi/js@4.8.95

import React from 'react';
import {SafeAreaView, StyleSheet, StatusBar} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import Icon from '@mdi/react';
import {mdiAccount} from '@mdi/js';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Icon
          path={mdiAccount}
          size={1}
          horizontal
          vertical
          rotate={90}
          color="red"
        />
      </SafeAreaView>
    </>
  );
};

[Templarian]

Not really sure as I've never used react native myself (but I'm assuming others have used this in React Native). All of the component names are capital, so error doesn't quite make sense.

Unfortunately I don't have an answer. Try googling around and seeing if it's something configured wrong maybe?

[ftKnox]

Yeah I am messing with the casing right now. I will update if it yields anything.

[ftKnox]

Sorry, I for some reason thought this as a react native module. Your Icon.js exports html, thats why this doesn't work in react native.

[Templarian]

Perfect. Yeah, there is probably a react native version of this component floating around by now. Probably should look into making a first party adaption eventually. Just not something I've worked with yet.

Do let me know what solution you go with.

[ftKnox]

Looks like this is the goto for react native: https://github.com/oblador/react-native-vector-icons

[Templarian]

@ftKnox Oh yeah, I think they use the font. Which isn't really a good idea as our font is large and growing every day. Hopefully there is a nice vector solution out there somewhere that uses @mdi/js.

[Templarian]

It actually looks like it would be fairly easy to convert this to a @mdi/react-native package if I used:

https://www.npmjs.com/package/react-native-svg

I'll create an issue in the main repo to track this.

[Templarian]

https://github.com/Templarian/MaterialDesign/issues/4837