What's Included
- TypeScript source
- Demo entry screen
- README with install
- MP4 preview
About the Project
Every bar and value label is painted on a single GPU-backed @shopify/react-native-skia Canvas, so the whole chart is one draw call instead of dozens of native views. A fixed pool of 30 Skia RoundedRects is mounted once and never remounts — react-native-reanimated v4 shared and derived values drive each bar's height, width, spacing, x position, border radius, and opacity entirely on the UI thread, letting 7 fat bars retile into 30 thin ones via interpolate. The dataset is swapped in place with values.modify inside a worklet. A react-native-gesture-handler Gesture.Pan maps touch x to a clamped bar index, dimming the unselected bars to 0.2 and pushing the active value into an AnimatedTextInput through useAnimatedProps. Requires the New Architecture (react-native-worklets) and a custom dev client since Skia is not in Expo Go. Tested on Expo SDK 56 (iOS + Android).