Skip to content
React Native component for simply creating a graph 📱 , without any iOS or Android issue of touch.
JavaScript
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore Initial commit May 13, 2018
AndroidGraph.gif Initial commit May 13, 2018
LICENSE Initial commit May 13, 2018
README.md Update README.md Jul 27, 2018
iosGraph.gif
package-lock.json Initial commit May 13, 2018
package.json

README.md

license Version

react-native-touchable-graph

React Native component for simply creating a graph, without any iOS or Android issue of touch.

Motivation

Victory Native is a great library, but there are tons of problems with the touch behaviour, because it is based on react-native-svg. The idea is to make a wrapper which replace the touchable svg element with react native Touchable component, so you are sure that it will work great both on Android and iOS.

Example app

Android example Ios example

Installation

  1. Install library and react-native-svg

    npm i --save victory-native react-native-svg
    

    Then, if victory-native version >= 0.16.6

     npm i --save react-native-touchable-graph
    

    else

     npm i --save react-native-touchable-graph@0.0.138
    
  2. Link native code for SVG

    react-native link react-native-svg
    

Usage

Use as follows:

import { VictoryAxis, VictoryBar, VictoryChart, VictoryArea } from 'victory-native'
import TouchableGraph from 'react-native-touchable-graph';

const data = [
  { x: 1, y: 13000 },
  { x: 2, y: 16500 },
  { x: 3, y: 14250 },
  { x: 4, y: 19000 }
];


<TouchableGraph
  onPressBar={(data) => { console.log(data) }}
  onPressTickAxis={(data) => { console.log(data) }}
  >
  <VictoryChart>
    <VictoryAxis
      crossAxis
      orientation="left"
    />
    <VictoryAxis 
      dependentAxis
      crossAxis
      orientation="bottom"
    />
    <VictoryBar
      data={data}
    />
    <VictoryArea
      data={data}
    />
  </VictoryChart>
</TouchableGraph>

Props

Bar props :

  • barStyle (Object) or (Function(barData, index)) - Bar style
  • onPressBar (Function(barData, index)) - Callback when a bar is tapped
  • renderBar (Function(barData, index)) - Custom bar
  • getBarDatum (Function(bars)) - Get Bars datum

Tick axis props :

  • tickAxisStyle (Object) or (Function(tickData, index)) - Tick axis style
  • tickAxisTextStyle (Object) or (Function(tickData, index)) - Tick axis text style
  • onPressTickAxis (Function(tickData, index)) - Callback when a tick axis is tapped
  • renderTickAxis (Function(tickData, index)) - Custom tickAxis
  • getTickAxisDatum (Function(ticks)) - Get Ticks axis datum

Other props :

  • renderLoading (Function()) - Render a loading view when initializing

Roadmap

Improve for :

  • VictoryAxis
  • VictoryBar
  • VictoryChart

Adapt it for :

  • VictoryArea
  • VictoryBoxPlot
  • VictoryCandlestick
  • VictoryErrorBar
  • VictoryPie
  • VictoryPolarAxis
  • VictoryScatter
  • VictoryStack
  • VictoryVoronoi

Others :

  • Example
  • Expo Example
  • Performance
  • Tests

Author

Hugo How-Choong

License

MIT

You can’t perform that action at this time.