search

spicygreenbook / greenbook-app

We are Spicy Green Book – a virtual directory for Black-owned food and beverage businesses throughout the US and Canada. We help Black-owned food and drink business owners tell their story, sowing the seeds of trust, support, and positive change within local communities.
https://www.spicygreenbook.org
46 stars 60 forks source link

Map is not interactive. #242

Closed danilobatson closed 3 years ago

danilobatson commented 3 years ago

Describe the bug Clicking on the map on the home page does nothing.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'www.spicygreenbook.org'
  2. Scroll down
  3. Click on map
  4. See error

Expected behavior Map should show listings in the state separated by metro area.

Screenshots Screenshot just shows map. image

Desktop (please complete the following information):

C-Garza commented 3 years ago

This appears to be an issue with react-native-svg itself on handling onPress events with G components. It was working before because react-native-web version in package.json was below version 13 before this commit.

JeroenGoddijn commented 3 years ago

@C-Garza Should we downgrade react-native-web then to v12.3, instead of upgrading the react-native-gesture-handler and other packages? Seems the easier solution that will resolve multiple issues at once...

C-Garza commented 3 years ago

@JeroenGoddijn So I looked a bit more into it. The reason why react-native-web was updated was because the expo sdk was updated to version 40, which uses v13. I think it had some pretty significant changes, so now I don't think we should downgrade react-native-web.

I think updating react-gesture-handler could work for issue #258, but most of my time right now was trying to fix this issue. I managed to make the map work for web by not using the onPress event when on the web and simply an onClick, but now I'm trying to make it work on the mobile app. I think I got it to work on mobile simply by changing onPress to onPressIn. I'll make a pull request tomorrow if that's the case.