# react-native-reanimated-graph

> Reanimated graph react-native react-native-graph

Latest version **0.0.4** (published 2021-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-reanimated-graph
pnpm add react-native-reanimated-graph
yarn add react-native-reanimated-graph
bun add react-native-reanimated-graph
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-04-01 |
| First published | 2021-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Bruce He |
| Maintainers | brucehe |

## Links

- npm: https://www.npmjs.com/package/react-native-reanimated-graph
- Repository: https://github.com/BruceSuperProgramer/react-native-reanimated-graph
- Issues: https://github.com/BruceSuperProgramer/react-native-reanimated-graph/issues
- npm.io page: https://npm.io/package/react-native-reanimated-graph

## Dependencies (6)

- [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.2
- [d3-shape](https://npm.io/package/d3-shape.md) ^2.0.0
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^12.1.0
- [react-native-redash](https://npm.io/package/react-native-redash.md) ^16.0.5
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^2.0.0
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ^1.9.0

## Recent versions

- 0.0.4 (latest) — 2021-04-01
- 0.0.3 — 2021-04-01
- 0.0.2 — 2021-04-01
- 0.0.1 — 2021-04-01

## README

# react-native-reanimated-graph

A React Native graph component that run at 60 fps, even on low-end devices.

![Screenshot of React Native Reanimated Graph](https://firebasestorage.googleapis.com/v0/b/publicimage-6ea8e.appspot.com/o/react-native-reanimated-graph.gif?alt=media&token=e0874a8b-2a42-47aa-a96b-e64071f7fbe1)

## Installation

1. Run: `$ npm install --save react-native-reanimated-graph or yarn add react-native-reanimated-graph`
2. pod install

## Usage

Avalible Props:

| Props                     | Type                                                             |
| ------------------------- | ---------------------------------------------------------------- |
| graphs                    | { axisValues: Array<{x: number, y: number}>, graphName: string } |
| tabsCustomContainerStyle? | StyleProp<ViewStyle>                                             |
| onCursorMove?             | ((point: {x: number, y: number}) => void)                        |

```js
import CurveGraph from "react-native-reanimated-graph";

const graphs = [
    {
      axisValues: [{x: 1,y: 2},{x: 2,y: 5}, {x: 8,y: 9}],
      graphName: 'GraphOne',
    }
    {
       axisValues: [{x: 1,y: 2},{x: 2,y: 5}, {x: 8,y: 9}],
       graphName: 'GraphTwo',
    }
];

const App = () => (
  <View style={styles.container}>
    <Svg
      width={SVG_XY_TEXT_CONTAINER_WIDTH}
      height={SVG_XY_TEXT_CONTAINER_HEIGHT}
      style={styles.svgXYTextContainer}
    >
      <Defs>
        <LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gradient">
          <Stop stopColor="#FEFFFF" offset="100%" />
          <Stop stopColor="#eef6fd" offset="80%" />
          <Stop stopColor="#CDE3F8" offset="0%" />
        </LinearGradient>
      </Defs>
      <Rect
        width={SVG_XY_TEXT_CONTAINER_WIDTH}
        height={SVG_XY_TEXT_CONTAINER_HEIGHT}
        fill="url(#gradient)"
        strokeWidth="0"
      />
      <View>
        <Text style={styles.xyText}>{`x:${x}`}</Text>
        <Text style={styles.xyText}>{`y:${y}`}</Text>
      </View>
    </Svg>

    <CurveGraph
      graphs={graphs}
      tabsCustomContainerStyle={{ marginTop: 100 }}
      onCursorMove={onCursorMove}
    />
  </View>
);
```

---
_Source: https://npm.io/package/react-native-reanimated-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._