wuba / wuba/react-native-echarts

Issue: Tooltip interaction conflicts with parent ScrollView (touch handling)

Open
#279 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
967
Forks
35
PR merge metrics
No merged PRs in 30d

Description

I’m using this chart inside a parent ScrollView in a React Native screen. When tooltip interaction is enabled (long press or touch move), the parent ScrollView starts scrolling, which prevents proper tooltip interaction on the chart.

To work around this, I tried disabling the parent scroll using onTouchStart and onTouchEnd on the chart container. This allows the tooltip to work correctly, but it introduces a new issue: once this is added, the chart view itself can no longer scroll vertically or handle pan gestures properly.

So the behavior is currently one of the following, but not both:

  • Tooltip works, but parent ScrollView intercepts gestures
  • Tooltip works and parent scroll is disabled, but chart scrolling is blocked

Steps to reproduce

  1. Render the chart as a child of a React Native ScrollView
  2. Enable tooltip interaction (axis tooltip / long press)
  3. Try to long press or move finger on the chart
    → Parent ScrollView starts scrolling
  4. Add onTouchStart / onTouchEnd to disable parent scrolling
    → Tooltip works, but chart scrolling no longer works as expected

Expected behavior

The chart should be able to:

  • Handle touch interactions for tooltip (long press or move)
  • Scroll or pan normally
  • Coexist inside a parent ScrollView without gesture conflicts

Actual behavior

Touch handling is fully captured either by the parent ScrollView or blocked entirely when manually disabling scroll.

Question / Request

Is there a recommended or built-in way to handle gesture priority when the chart is nested inside a ScrollView?
For example:

  • Using react-native-gesture-handler
  • A prop to control gesture handling or pointer events
  • Any guidance on integrating tooltips inside scrollable parents

Any suggestion or example would be very helpful.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by reproducing the chart inside a React Native ScrollView with tooltip interaction enabled, then inspect the chart’s touch handling and gesture integration; done means tooltip gestures, chart pan or scrolling, and parent scrolling coexist without manual touch handlers.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.