graph.jsx

import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
import Sizer from "react-native-size";
import {
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryAxis,
  VictoryContainer,
  VictoryCursorContainer,
  Line,
} from "victory-native";

// other imports

const CursorComp = props => {
  return <Line {...props} />;
};
const EmptyCursor = props => {
  return null;
};

class PerformanceGraph extends PureComponent {
  static defaultProps = {
    data: [],
    closePrice: 0,
  };
  state = {
    touched: false,
  };
  
  render() {
    const { data, closePrice } = this.props;
    
    const transformed = data
      .slice(0)
      .reverse()
      .map(({ close }, i) => ({ x: i, y: close }));

    if (transformed.length === 0) {
      return (
        <View style={styles.centerContainer}>
          <ActivityIndicator animating size="large" />
        </View>
      );
    }

    const lastPrice = (last(transformed) || {}).y
    const color = lastPrice > closePrice ? blue : "#F45E43";

    return (
      <Sizer style={styles.container}>
        {({ measured, x, y, width, height }) => {
          if (!measured) return <View />;

          return (
            <VictoryChart
              theme={VictoryTheme.material}
              width={width}
              height={height}
              domainPadding={{ x: 5, y: 5 }}
              padding={{
                top: 10,
                bottom: 10,
                left: 20,
                right: 20,
              }}
              containerComponent={
                <VictoryCursorContainer
                  cursorDimension="x"
                  onTouchStart={() => {
                    this.timeout = setTimeout(() => {
                      this.props.onScrollControl(false);
                      this.setState({ touched: true });
                    }, 500);
                  }}
                  onCursorChange={(value, props) => {
                    if (!this.state.touched) return;
                    this.props.onValueChange(transformed[Math.floor(value)].y);
                  }}
                  onTouchEnd={() => {
                    clearTimeout(this.timeout);
                    this.props.onScrollControl(true);
                    this.setState({ touched: false, pinching: false });
                  }}
                  cursorComponent={this.state.touched ? <CursorComp /> : <EmptyCursor />}
                />
              }
            >
              <VictoryLine
                style={{
                  data: { stroke: color, strokeWidth: 2 },
                }}
                data={transformed}
              />
              <VictoryLine
                y={() => closePrice}
                style={{
                  data: {
                    strokeDasharray: [2, 2],
                    stroke: "#000",
                    strokeWidth: 1,
                  },
                }}
              />
              <VictoryAxis
                tickFormat={() => ""}
                style={{
                  axis: { stroke: "none" },
                  grid: {
                    stroke: "transparent",
                  },
                  ticks: {
                    stroke: "transparent",
                  },
                  tickLabels: {
                    stroke: "transparent",
                  },
                }}
              />
            </VictoryChart>
          );
        }}
      </Sizer>
    );
  }
}