[Layout]: Android: mini-chart range-selector drag window jumps/resets mid-gesture when the chart is wrapped in an external GestureDetector (react-native-gesture-handler)

[wdcs-jeelbhad]

Chart type

LineChart

Package version

^7.0.2

Platform

Android

Renderer

Unknown

Data sample

// Sample data — 10 years of monthly points, enough for the
// range-selector drag to have a meaningful range to zoom into.
const generateSampleData = () => {
  const data = [];
  const start = new Date(2015, 0, 1);
  for (let i = 0; i < 120; i++) {
    const date = new Date(start.getFullYear(), start.getMonth() + i, 1);
    const value = 5 + Math.sin(i / 6) * 3 + (Math.random() - 0.5) * 1.5;
    data.push({ date, value: Number(value.toFixed(2)) });
  }
  return data;
};

const data = generateSampleData();

<LineChart
  data={data}
  xKey="date"
  yKey="value"
  width={360}
  height={280}
  rangeSelector={{ visible: true, interactive: true }}
  viewport={viewport}
  onViewportChange={(e) => setViewport({ startIndex: e.startIndex, endIndex: e.endIndex })}
/>

Chart props

<LineChart
  data={data}
  xKey="date"
  yKey="value"
  width={360}
  height={280}
  viewport={viewport}
  onViewportChange={(event) =>
    setViewport({ startIndex: event.startIndex, endIndex: event.endIndex })
  }
  rangeSelector={{
    visible: true,
    interactive: true,
    height: 54,
    gap: 10,
  }}
/>
<GestureDetector
  gesture={Gesture.Pinch()
    .runOnJS(true)
    .cancelsTouchesInView(true)
    .onUpdate((e) => {
      // pinch-to-zoom handling on the main plot
    })}
>
  <LineChart {...propsAbove} />
</GestureDetector>

Screenshot

Expected layout

The range-selector window tracks the finger smoothly and monotonically for the duration of the drag, matching iOS behavior with the same code.

Actual layout

Steps to reproduce :

1. Render a LineChart with rangeSelector={{ visible: true, interactive: true, ... }} and a real onViewportChange handler wired to viewport state, following the standard range-selector pattern from the docs.
2. Wrap the chart (or an ancestor View) in an app-level — for example to add pinch-to-zoom on the main plot area, restricting the pinch handler's touch region by Y-coordinate so it's only meant to activate above the range-selector strip.
3. On an Android device (not emulator, to get real touch timing), drag the range-selector window quickly from left to right.
4. Observe the drag window position over the gesture (screen recording + Android Developer Options → "Show taps" makes this easiest to see).

The window periodically:

jumps forward/backward by a large amount in a single frame (not proportional to the finger's actual movement that frame), then
a handful of frames later, snaps back close to its pre-jump position,

while the touch is still down and moving. This repeats through the length of the drag. Both the "jump" and the "snap back" are visible as position discontinuities, not just visual lag.