@birdwingo/react-native-reanimated-graph

Features 🌟

🚀 Supercharged Performance with React-Native-Reanimated: Our library leverages the power of react-native-reanimated to ensure fluid animations and top-tier speed, making your graphs shine even with hefty data sets.

📊 Versatile Graphing: Whether it's SVG, Cubic Bezier, or any other graph type, we've got you covered.

🎨 Customizable: Tons of optional properties to make the graph fit perfectly within your app's design.

🖌 Smooth Visuals: Leveraging the power of Cubic Bezier for that polished, professional look.

📱 React-Native Optimized: Tailored specifically for React-Native, ensuring seamless integration and performance on both iOS and Android.

🔄 Dynamic Data Friendly: Easily handle real-time data updates without any performance hiccups.

💡 Well-documented: Clear and concise documentation to get you up and running in no time.

🌍 Community-Driven: We believe in the power of open-source. Join our community, contribute, or simply enjoy the product!

🔧 Regular Updates: We're continuously improving. Stay tuned for regular updates and feature additions.

❤️ Support & Collaboration: Having issues or suggestions? Our team and community are here to help!

About

react-native-reanimated-graph is a React Native component that provides a customizable and animated graph for displaying data. It allows you to visualize data points on a graph and supports various configuration options to customize the appearance and behavior of the graph. It is used in the Birdwingo mobile app to show user portfolio graphs and market graphs.

Installation

npm install react-native-svg
npm install react-native-reanimated
npm install react-native-gesture-handler
npm install @birdwingo/react-native-reanimated-graph

Usage

To use the ReanimatedGraph component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:

import React, { useRef } from 'react';
import { View } from 'react-native';
import ReanimatedGraph, { ReanimatedGraphPublicMethods } from '@birdwingo/react-native-reanimated-graph';

const data = {
  // Your data points here
  xAxis: [0, 1, 2, 3, 4],
  yAxis: [0, 5, 2, 7, 4],
};

const YourComponent = () => {
  const graphRef = useRef<ReanimatedGraphPublicMethods>(null);

  const updateGraphData = () => {
    // Call this function to update the data displayed on the graph
    if (graphRef.current) {
      graphRef.current.updateData(data);
    }
  };

  return (
    <View>
      <ReanimatedGraph
        ref={graphRef}
        xAxis={data.xAxis}
        yAxis={data.yAxis}
        // Add any other props as needed
      />
    </View>
  );
};

export default YourComponent;

Props

Name	Type	Default value	Description
xAxis	number[]	[0, 1]	An array of numbers representing the x-axis values of the data points.
yAxis	number[]	[0, 0]	An array of numbers representing the y-axis values of the data points.
picks	PickProps[]	[0, 0]	An array of points that should be on graph highlited by dot.
color	string	'#FFFFFF'	The color of the graph line.
widthRatio	number (0 - 1)	1	The width ratio of the graph compared to available width.
selectionArea	'default'|'none'|'custom'	'default'	The selection area type. The selection area is highlighted while hovering over the graph. If custom you need to provide selectionAreaData, if default, selection area is to the left of the gesture point.
selectionAreaData	number[]	[]	An array of numbers representing the selection area data points.
height	number	200	The height of the graph component.
defaultWidth	number		If defaultWidth is not provided, width will be 100% of parent element.
animated	boolean	true	Whether the graph should be animated.
animationDuration	number	750	The duration of the animation in ms.
smoothAnimation	boolean	true	Whether the gesture animation should be smooth or not. If false, the selection dot will be only on graph points.
type	'curve'|'line'	'curve'	The type of graph line.
maxPoints	number	512	The maximum number of data points to display on the graph. If the data has more points than maxPoints, the data will be reduced so that it does not affect the shape of the graph.
showXAxisLegend	boolean	false	Whether to show the x-axis legend.
xAxisLegendQuantity	number	4	The quantity of x-axis legend values to display.
showYAxisLegend	boolean	false	Whether to show the y-axis legend.
yAxisLegendQuantity	number	4	The quantity of y-axis legend values to display.
showExtremeValues	boolean	true	Whether to show extreme values (min and max) on the graph.
showBlinkingDot	boolean	false	Whether to show a blinking dot on the graph. (Will be placed at the last point of the graph)
showSelectionDot	boolean	true	Whether to show the selection dot on the graph while hovering.
selectionLines	'horizontal'|'vertical'|'both'|'none'	'both'	The type of selection lines to display.
selectionLineColor	string	'#D4D4D4'	The color of the selection lines.
gestureEnabled	boolean	true	Whether to enable gestures on the graph.
containerStyle	ViewProps['style']		The style object to customize the container of the graph.
graphStyle	ViewProps['style']		The style object to customize the graph.
textStyle	TextProps['style']		The style object to customize the text elements in the graph.
renderXAxisLegend	(value: number, index: number) => void		A function to render custom x-axis legend values. It takes two arguments, value - the x-axis value for which the legend is being rendered & index - the index of the x-axis value on legend.
renderYAxisLegend	(value: number, index: number) => void		A function to render custom y-axis legend values. It takes two arguments, value - the y-axis value for which the legend is being rendered & index - the index of the y-axis value on legend.
renderExtremeValue	(value: number, type: 'min'|'max') => void		A function to render custom extreme values. It takes two arguments, value - the extreme value to be rendered, type - the type of extreme value, either minimum or maximum.
onGestureStart	() => void		A callback function invoked when a gesture is started on the graph.
onGestureEnd	() => void		A callback function invoked when a gesture is ended on the graph.
onGestureUpdate	(x: number, y: number, index: number) => void		A callback function invoked when a gesture is updated on the graph. It takes three arguments, x - the x-axis value at the position of the gesture, y - the y-axis value at the position of the gesture, index - the index of the nearest data point to the gesture position.

Public Methods

Name	Type	Description
updateData	({xAxis, yAxis, color, widthRatio, selectionArea, selectionAreaData, showBlinkingDot, pickProps}) => void	Use this method to update the data displayed on the graph dynamically. Types for data argument are the same as mentioned above.

Types

PickProps

Parameter	Type	Required
x	number	true
y	number	true
color	string	true
renderLabel	() => JSX.Element	false

Sponsor

react-native-reanimated-graph is sponsored by Birdwingo.
Download Birdwingo mobile app to see react-native-reanimated-graph in action!