react-native-graphview
v0.0.1
Published
React Native Graph View
Downloads
4
Maintainers
Readme
Note
This version is only for the android
Installation
npm install --save react-native-graphview
react-native link react-native-graphview
Android
- Add the following in android/settings.gradle:
include ':react-native-graphview'
project(':react-native-graphview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-graphview/android/app')
- Update MainApplication.java
import com.reactnativegraphview.GraphPackage;
public class MainApplication extends Application implements ReactApplication {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new GraphPackage()
);
}
}
- Update build.gradle.java
dependencies {
implementation project(':react-native-graphview')
}
Properties
Example
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LineGraph, BarGraph, PointsGraph } from 'react-native-graphview';
const data = [{x: 0, y: 1}, {x: 1, y: 5}, {x: 2, y: 9}, {x: 3, y: 2}, {x: 4, y: 6}];
export default class App extends Component{
render() {
return (
<View style={styles.container}>
<LineGraph
style={{
height: 400,
width: 400
}}
data={[{x: 0, y: 1}, {x: 1, y: 5}, {x: 2, y: 9}, {x: 3, y: 2}, {x: 4, y: 6}]} />
<BarGraph
style={{
height: 400,
width: 400
}}
data={[{x: 0, y: 1}, {x: 1, y: 5}, {x: 2, y: 9}, {x: 3, y: 2}, {x: 4, y: 6}]} />
<PointsGraph
style={{
height: 400,
width: 400
}}
data={[{x: 0, y: 1}, {x: 1, y: 5}, {x: 2, y: 9}, {x: 3, y: 2}, {x: 4, y: 6}]} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});