react-native-graph

react-native-graph is an open-source React Native component for drawing line graphs. The README describes it as a Skia-based implementation created at Margelo and used in the Pink Panda Wallet app to render many token graphs. Its documented focus is smooth mobile charting: README lists cubic bezier rendering, native path interpolation in Skia, animations (up to 120 FPS according to the README), a pan/scrubbing gesture, and compatibility with crypto wallet-style price histories. The package exports a LineGraph component. Its required props are points (an array of GraphPoint objects with a numeric value and a Date) and color. It accepts React Native ViewProps on the root view. An animated boolean switches between the animated renderer and a lightweight static renderer, which the README suggests for showing many graphs in a list. The optional range prop can override the x-axis, y-axis, or both; otherwise axes are inferred from the points. Animated mode unlocks more features. gradientFillColors adds a vertical gradient fill below the line. lineThickness controls stroke width. enablePanGesture enables press-and-scrub interaction, with callbacks onGestureStart, onPointSelected, and onGestureEnd; panGestureDelay controls how long a press must be held before scrubbing starts. SelectionDot renders the scrub position and can be replaced or hidden with null. horizontalPadding and verticalPadding adjust drawing space. enableIndicator and indicatorPulsating show an indicator at the last point. TopAxisLabel and BottomAxisLabel render custom React elements above and below the graph. enableFadeInMask fades in the start of the line. Some props are documented as animated-only, including pan gesture, labels, indicator, gradient fill, and SelectionDot. The README notes selectionDotShadowColor is currently unused and has no visual effect. The README documents two renderer backends. Skia is the default. An alternative GPU canvas backend, react-native-tgfx, can be selected at build time with EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (or RN_GRAPH_BACKEND on bare React Native with a Babel inline-environment-variables plugin). Only one renderer needs to be installed; Metro treats both as optional, and if tgfx is requested but not installed the graph warns once and falls back to Skia. A custom SelectionDot must import shapes from the active renderer. The package exports GRAPH_BACKEND to check which renderer a build resolved to ('skia' or 'tgfx'). Installation requires react-native-reanimated, react-native-gesture-handler, and @shopify/react-native-skia for the default backend, plus react-native-graph itself. The README includes an example LineGraph usage with a usePriceHistory hook and prop examples for animation, pan gestures, range, and custom SelectionDot. It also links to a custom SelectionDot example in the repository. The project is sponsored by Pink Panda and has a Margelo community Discord. The README thanks William Candillon and Christian Falch for help with React Native Skia.