https://github.com/hugohow/react-native-touchable-graph
React Native component for simply creating a graph :iphone: , without any iOS or Android issue of touch.
https://github.com/hugohow/react-native-touchable-graph
graph react-native victory-native
Last synced: 2 months ago
JSON representation
React Native component for simply creating a graph :iphone: , without any iOS or Android issue of touch.
- Host: GitHub
- URL: https://github.com/hugohow/react-native-touchable-graph
- Owner: hugohow
- License: mit
- Created: 2018-05-13T16:22:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-14T08:27:03.000Z (over 6 years ago)
- Last Synced: 2024-10-17T06:08:45.013Z (8 months ago)
- Topics: graph, react-native, victory-native
- Language: JavaScript
- Homepage:
- Size: 4.26 MB
- Stars: 30
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[]()
[](https://www.npmjs.com/package/react-native-touchable-graph)
# 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 [email protected]
2. Link native code for SVG
```
react-native link react-native-svg
```
## Usage
Use as follows:
```jsx
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 }
];
{ console.log(data) }}
onPressTickAxis={(data) => { console.log(data) }}
>
```
## 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