Victory-native: How to hover across line chart in react native?

[jinxac]

I have a line chart in which I render information for last 30 days. On pressing each data point I get the current points using onPressIn, however what I am looking for is that when I hover across chart I get current data point without onPress event(i.e. somewhat like a mouseOver event). I tried looking at this but still it works only with onPress.

I am looking for something like this in react native where I can just hover over and get the current info.

Is this possible to do this in Victory-native?

[jinxac]

After exploring the package I was able to achieve this. Adding the code just in the case if it helps someone.

import {VictoryLine,VictoryVoronoiContainer,VictoryScatter,VictoryGroup,Point} from "victory-native";
import React from "react";
import {G,Line} from "react-native-svg";
import {View,Text} from "react-native";


class ChartPoint extends React.Component {
  state = {

  };

  render () {
    const {
      x,
      y,
      datum,
      activeX
    } = this.props;
    let size = 0;
    let lineContent = null;
    if (datum.x === activeX) {
      size = 10;
      lineContent = (
        <Line
          stroke="grey"
          strokeWidth="1"
          x1={x}
          x2={x}
          y1={y-200}
          y2={y+200}
        />
      );
    }
    return (
      <G>
        {lineContent}
        <Point
          datum={datum}
          size={size}
          symbol={"circle"}
          x={x}
          y={y}
        />
      </G>
    );
  }
}


export default class CustomDataComponent extends React.Component {
  state = {
    "x": 1
  };

  setActiveIndex = (points)  => {
    this.setState({"x": points[1].x});
  }

  render () {
    return (
      <View style={{"flex":1}}>
        <View style={{"marginVertical":20,"alignItems": "center","flex":0.2}}>
          <Text style={{"fontSize": 14}}>Date</Text>
          <Text style={{"fontSize": 16}}>{this.state.x}</Text>
        </View>
        <View style={{"flex":1}}>
          <VictoryGroup
            containerComponent={<VictoryVoronoiContainer
              onActivated={(points) => this.setActiveIndex(points)}
            />}
            data={[
              {"x": 1, "y": 2},
              {"x": 2, "y": 3},
              {"x": 3, "y": 5},
              {"x": 4, "y": 4},
              {"x": 5, "y": 7},
              {"x": 6, "y": 8}
            ]}
          >
            <VictoryLine
              style={{
                "data": {"stroke": "#c43a31"},
                "parent": {"border": "1px solid #ccc"}
              }}
            />
            <VictoryScatter
              dataComponent={<ChartPoint activeX={this.state.x} />}
            />
          </VictoryGroup>
        </View>
      </View>

    );
  }
}

ChartPoint.propTypes = {
  "activeX": React.PropTypes.number.isRequired,
  "datum": React.PropTypes.object.isRequired,
  "x": React.PropTypes.number.isRequired,
  "y": React.PropTypes.number.isRequired
};

The above gives me output like following:-

On scrolling across the chart the crosshair with marker changes based on current activeIndex.