Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React-carousel causes touch issues with GOOGLE-MAPS

See original GitHub issue

Describe the bug When using the library with google maps API, google map touch behavior becomes broken. For example, it doesn’t matter what options you supply to google maps (like gestureHandling), it won’t work as expected on touch devices if <Carousel /> is present somewhere inside the code.

To Reproduce

  1. Use simple https://github.com/adrianmcli/nano-react-app
  2. Install the library and add google maps API
  3. Insert <Carousel /> component and init google map
  4. See the problem on touch devices (also with chrome dev tools)

Repo to reproduce: https://github.com/shelooks16/react-carousel-touch-issue replace const api = "API-KEY"; with a google-api key

Expected behavior To not broke google map touch behavior?

Screenshots broken-map

I deployed 2 web-pages: carousel imported: https://with-imported-carousel-issue.surge.sh/ carousel is not imported: https://without-imported-carousel-issue.surge.sh/

Additional context Tried with carousel v1.10.27 and v1.10.20. React v16.9.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
pierzchalatomaszcommented, Feb 11, 2020

@pierzchalatomasz does it work for you (google maps with carousel imported) on mobile devices?

It seems to be working

1reaction
shelooks16commented, Feb 8, 2020

@shelooks16

Can I ask you to fill in this form https://docs.google.com/forms/d/1tfRs1Io49tJBwz-06aDnz8hrJ3WySJTi45y4k6hHGaQ ?

Just filled the form

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why my react `Carousel` does not render properly?
First thing to note about your weird behaviour is that you are giving the wrong elements the key prop. Your Link (Outer most...
Read more >
How to Use Google Maps in React Native - Part 2 - YouTube
This is part 2 of my React Native Map series. In this video I'll show how to create a carousel with items that...
Read more >
#2 Sliding Items on MapView with Animation React Native ...
In this second part of react native maps tutorial, you'll learn how to add custom complex elements on mapview along with animation.
Read more >
Performant Custom Map Markers for React-Native-Maps
Every time the map updates all of the custom markers are rendered which is quite inefficient as marker pins typically don't change (image...
Read more >
Creating responsive, touch-friendly carousels with Flickity
I've created Flickity to resolve both these issues. For your users, Flickity's carousels are fun to flick. Flickity uses physics based ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Wrong active dots calculation

Next page

Breakpoints missing in TypeScript definitions