I'm new to React Native and I'm having problems in both platforms with react-native-maps Callout. I'm using Apple maps on iOS and Google ones on Android. Callout shows title and image.
On iOS when I have several markers in the map, and some of them are very near each other, when clicking the marker the callout shows for a second but then it hides and shows the one from the nearest marker. I have searched for a solution and found people using some workarounds like setting pointerEvents="auto" but nothing worked for me.
On Android when clicking the marker the callout shows correctly but the image is not shown. I also searched and found a workaround including the image inside a but this didn't work for me at all, it works better, because the image is shown most of the times, but not always. So for now I'm only showing the title on Android.
I have tried using last react-native-maps version 0.28.0 and same behavior. I haven't tried Google Maps on iOS, I think that will be the following step if I can't find a solution.
I also tried react-native-mapbox-gl and works fine on iOS, the Callout shows correctly with title and image, but on Android I install the app and it opens for a second and then closes throwing MainActivity not found error. If I go back to the previous commit without react-native-mapbox-gl then it installs and opens correctly. I have thought also about using react-native-mapbox-gl on iOS and react-native-maps on Android. But, is it really so hard this to work with maps in React Native?
Thanks in advance.
I had the same issue and solved it adding this to the Marker
anchor={{x: 1, y: 1}}
pointerEvents="auto"
Related
I was trying to implement a WhatsApp like cancelling recording button.
Everything was working fine, all animations lauching correctly, start and stop recording too.
But after a few seconds (could be 10 seconds or 1 minute) pressing the gesture handler, the app freeze, all animations start to lags and FPS drop to 0.
After trying many things, I found out that it is linked with a Flatlist I have in my view. When this Flatlist is inverted, that is when everything crash.
Here is the link of the Snack https://snack.expo.dev/#mikelh997/animationtest
Just try to move the mic for at least 30 seconds on a physical device and you will see the app freeze
I am doing my tests on Android emulator and on Samsung S21 Ultra. On iOS everything seems to work fine
Thinking it was may be my packages version, I started a new project and put inside my view only a Flatlist with text items and my PanGestureHandler. All packages are up to date, even though the behavior is the same. If I remove "inverted" from my Flatlist, everything work fine.
I also tried to use Animated.Flatlist but no change (actually it's worse because inverted in Animated.Flatlist is not working correctly)
I also tried to reproduce it on Snack Expo, on my phone it crashes.
I noticed also that it is not linked to PanGestureHandler or Reanimated, because if I just create an animation with React Animated (with Animated.timing), and loop it, it does the same.
Edit : it seems like it is happening only on Android 13
After research, it is linked to Android 13, more and more people are facing this issue.
Only solution I found on Github was here, it is the only way to make it worked while waiting for a fix
style={{transform: [{rotate: '180deg'}]}} seems to be the best workaround for the time being.
Im trying to add some simple animations to my app. Decided to try it with react-native-reanimated v2. I did the bare minimum and followed the installation guide/tutorial on respective expo and reanimated pages (Basically set hermes as engine and included the correct plugin last in babel plugins). The animations work great, added some entering/exiting animations on when items change in a list. Here is basically all my animation code, I wrapped my listItem in the following view.
<Animated.View
entering={LightSpeedInLeft.duration(500)}
exiting={LightSpeedInRight.duration(500)}
layout={Layout.springify()}
>
However, I am getting my Loading component displayed ontop of my other components. See error at bottom(On my phone its displayed as a black bar, but on emulator its the loading text). This behaviour is also occuring on screens where I havent implemented any animations :/
This is how my simple Loading logic is. While no data, I return Loading. Otherwise i return my normal JSX. This works flawlessly without reanimated.
if (!data) {
return <Loading />;
}
The packages relevant to this I am using are.
react-native: "0.64.3.
react-native-reanimated": "~2.3.1.
expo": "^44.0.0.
Any idea's why this happens and what I can do to fix it?
Thanks in advance
A lot of iOS users (mainly iOS 15, but iOS 14 also) started to report a strange behaviour: while they're typing in the login screen or signup screen, the app became blank.
Watching the videos provided, it seems that a white "something" (like a modal, but not a modal) comes from the bottom at any time they are writing inside text input and cover the full app, so the only thing the user can do it's to kill the app.
It's impossible for us to recreate this behaviour (both on simulator than real devices).
Any idea or any known issue?
react-native version: 0.63.4
Found:
It's a well-known bug of KeyboardAvoidingView on iOS when user enables "Prefer Cross-Fade Transitions". They just forgot to solve it or, at least, add a warn on KeyboardAvoidingView documentation.
https://github.com/facebook/react-native/issues/29974
(thank you Wilson!)
I followed this code here: https://github.com/ochanje210/react-native-cube to get a 3D cube that rotates on gesture. However, it doesn't work on Android devices. Any idea how to get it to work?
I also followed this YouTube tutorial on creating the required cube: https://www.youtube.com/watch?v=ukL12rEV0Sw. However, after making the necessary changes from typescript to Javascript, I am unable to run it as a JavaScript React native project without errors. The GitHub for this is https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Transformation3D
Any help in getting this cube working?
I used react-native-camera on my iOS app and now trying to add Focus, Brightness and Zoom controls to it. So far I was unable to come up with a solution. Any idea how to do this?
I tried to find an option in different react native camera packages. Also posted in their git repos for help. Finally tried this post: https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14 Where they take a photo from the camera every 5 milliseconds and adjust its brightness which seems to be very unstable and it makes the app crash.
It is not possible to use the focus and zoom functionalities with react-native-camera.
Unluckily the focus api has many bugs and the zoom functionalities will not render fast enough with javascript.
Maybe a solution is not using react-native-camera and instead just writing an intent to open the default camera application
The following app uses this solution, all the camera functionalities work perfectly.
Could they re-open the issue as it seems to not be solved?
Developers may need to review all the open issues to estimate the project deadlines.