How I replaced react-native-chart-kit with 1,355 lines of react-native-svg

Description and use

The author replaced react‑native‑chart‑kit with a custom react‑native‑svg chart, fixing geometry, scaling, and interaction issues.

Problem

The charting library owned the geometry, causing flat strokes, overshooting bezier curves, slot-indexed x‑axis, and lack of scrubbing, leading to user complaints.

Outcome

The custom chart resolves all four defects, improves user experience, and aligns with the app’s theming. It reduces external dependencies and provides full control over geometry and interaction.

Workflow

• 1. Identify chart defects and user complaints.
• 2. Remove react‑native‑chart‑kit dependency.
• 3. Create pure geometry functions in a transforms/ folder (e.g., resolveDomain).
• 4. Build SVG components for axes, gridlines, line path, and interaction layer.
• 5. Integrate the SVG chart into the Statistics tab, passing data and theming props.
• 6. Test rendering and interaction on various screen sizes.
• 7. Deploy and monitor user feedback.

Evidence

Four separate complaints about my mood tracker's chart had one root cause: the charting library owned the geometry, and the geometry was the thing users were complaining about.

Source

The replacement is 1,355 lines of TypeScript across five files, 750 of them pure functions with no React imports at all.

Source

The library also sized itself from Dimensions.get('window') instead of measuring its own container, so it never quite fit its card.

Source