Redirection fails : react-native-svg : React.createElement: type is invalid

Question

I'm trying to understand an error. When I redirect my first screen on another one I get on the bundler :

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object,"

I guess the problem is with the package svg - It's when I click on :

      <TouchableOpacity onPress={() => this.props.navigation.navigate("Distance")}>
        <View style={styles.statContainer}>
          <ImageBackground
            source={require("../../assets/images/stats-background-1.png")}
            style={styles.statImage}
          >
            <View style={styles.row}>
              <Text style={styles.statText}>
                {i18n.t("stats.action.dist")}
                {"\n"}
                <AnimateNumber
                  value={this.state.stats.total_distance}
                  countBy={(this.state.stats.total_distance / 50).toFixed(0)}
                  style={styles.statTextData}
                />{" "}
                {i18n.t("stats.unit.kilometre")}
              </Text>
            </View>
          </ImageBackground>
        </View>
      </TouchableOpacity>

The code of the second screen is :

export default class Stats extends React.Component {
  constructor(props) {
    super(props);
    };

  render() {
    return (
    <ScrollView style={styles.containerScrollNoMargins}>
      <Header
        backgroundImage={require("../../assets/images/bg-header.png")}
        centerComponent={{
          text: i18n.t("stats.title"),
          style: styles.headerComponentStyle,
        }}
        containerStyle={styles.headerContainerStyle}
        statusBarProps={{ barStyle: "light-content" }}
      />
      <ImageBackground
        source={require("../../assets/images/background-stats.jpg")}
        style={{flex : 1 }}
        imageStyle={{ resizeMode: 'stretch' }}
      >
         <Svg height="50%" width="50%">
             <Image href={require('../../assets/images/Interface_Stat_1.svg')} />
        </Svg>
      </ImageBackground>
    </ScrollView>
    );
  }
}

I don't get what is the error, can you please give me any tips, any help ? Thanks a lot for your time and explanations.

Answer 1

It seems to fail cause you use the Image component of RN inside the SVG tag.

It only supports for children in list, and Image only supports those some formats like png, jpg, jpeg, bmp, gif, webp, psd as mentioned here. To fix this, you can take a look at react-native-svg-transformer, it will help you easily importing local svg file.