[Bug]: MarkerView coordinate on iOS is not animating
Open
Nobody has claimed this yet.
bug 🪲
reproduced
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Implementation
Mapbox
Mapbox Version
11.0.0
React Native Version
0.74.1
Platform
iOS
@rnmapbox/maps version
10.1.24
Standalone component to reproduce
import React, { useEffect } from 'react';
import { View } from 'react-native';
import MapboxGL from '@rnmapbox/maps';
import Animated, {
useAnimatedProps,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
const AnimatedMarkerView = Animated.createAnimatedComponent(MapboxGL.MarkerView);
const BugReportExample = () => {
const coordinate = useSharedValue([0, 0]);
const animatedProps = useAnimatedProps(
() => ({
coordinate: coordinate.value,
}),
[coordinate],
);
useEffect(() => {
setInterval(() => {
coordinate.value = withTiming(
coordinate.value[0] > 0 ? [0, 0] : [10, 10],
{
duration: 1000,
},
);
}, 3000);
}, [coordinate]);
return (
<MapboxGL.MapView
styleURL='mapbox://styles/mapbox/streets-v12'
style={{ flex: 1 }}
>
<MapboxGL.Camera centerCoordinate={[0, 0]} />
<AnimatedMarkerView
id='me'
anchor={{ x: 0.5, y: 0.5 }}
allowOverlap={true}
allowOverlapWithPuck={false}
isSelected={false}
animatedProps={animatedProps}
>
<View
style={{
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: 'red',
}}
/>
</AnimatedMarkerView>
</MapboxGL.MapView>
);
};
Observed behavior and steps to reproduce
Marker is not moving
Expected behavior
Marker should smoothly moves
Notes / preliminary analysis
#3294
Additional links and references
No response
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
Run the standalone reproduction with the reported Mapbox, React Native, @rnmapbox/maps, and iOS setup, then compare the MarkerView behavior with issue #3294. Trace how MarkerView receives animatedProps on iOS; done means the marker smoothly moves between [0, 0] and [10, 10].
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100