Customise the dataComponent of Victory Scatter to use the icon instead of default circle in React Native

Question

I want to show icon on Victory Scatter instead of default circle in React Native. I tried using the below code, but the icon is being placed at the top left corner irrespective of any given x and y point. The icon is not getting placed based on the given x and y points. Need help to find the issue with my code to fix the bug.

Below is the code and screenshot.

import {Svg, Image} from 'react-native-svg'
class DataPoint extends React.Component {
  render() {
    const {x, y} = this.props
    return (
      <Svg x={x} y={y} width="20" height="20">
        <Image
          width="20"
          height="20"
          // eslint-disable-next-line max-len
          xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
        />
      </Svg>
    )
  }
}

 <VictoryScatter
        data={[
          {
            x: 100,
            y: 100
          }
        ]}
        dataComponent={<DataPoint />}
      />

Answer 1

here is a demo: https://snack.expo.io/@nomi9995/victory-native

remove SVG wrapper around Image then it will work good.

import React from "react";
import { StyleSheet, View } from "react-native";
import {
  VictoryChart,
  VictoryScatter,
} from "victory-native";
import {Image } from "react-native-svg";

class DataPoint extends React.Component {
  render() {
    console.log(this.props, "nominomithis.props");
    const { x, y } = this.props;
    return (
      <Image
        x={x}
        y={y}
        width="20"
        height="20"
        // eslint-disable-next-line max-len
        xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
      />
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <VictoryChart width={350}>
          <VictoryScatter
            data={[
              {
                x: 100,
                y: 100,
              }
            ]}
            dataComponent={<DataPoint />}
          />
        </VictoryChart>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});