Trying to create a body structure on my React Native app using images as buttons.

I get hit with an error "Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number." at this particular segment.

PointsHistory.tsx:

import Buttonicon from "../assets/buttonicon.svg";

<Buttonicon
  style={[styles.buttonicon, styles.icon25Layout]}
  width={24}
  height={24}
>

What am I doing wrong here?

Trying to create a body structure on my React Native app using images as buttons.

I get hit with an error "Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number." at this particular segment.

PointsHistory.tsx:

import Buttonicon from "../assets/buttonicon.svg";

<Buttonicon
  style={[styles.buttonicon, styles.icon25Layout]}
  width={24}
  height={24}
>

What am I doing wrong here?

• react-native

Share Improve this question Follow asked Mar 6 at 7:31 Udhayan NairUdhayan Nair 47022 gold badges88 silver badges2525 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can use image component for svg image display , but it will only work for iOS .

    import { Image } from 'react-native';

  const App = () => {
  return (
    <Image source={require('./assets/image.svg')} style={{ width: 100, height: 100 }} />
  );
};

If you want to support both platform react-native-svg is the best choice