wuba / wuba/react-native-echarts
Issue: Tooltip interaction conflicts with parent ScrollView (touch handling)
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
ScrollViewintercepts gestures - Tooltip works and parent scroll is disabled, but chart scrolling is blocked
Steps to reproduce
- Render the chart as a child of a React Native
ScrollView - Enable tooltip interaction (axis tooltip / long press)
- Try to long press or move finger on the chart
→ ParentScrollViewstarts scrolling - Add
onTouchStart/onTouchEndto 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
ScrollViewwithout 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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