go to view in animated.Scrollview - ios

Question

Using this code i try to add on each marker an onpress option
there is the source source and there is a sample of my work
after many try i give up ... is there a way to add on my onpress the x position to my Animated.ScrollView
when i scroll i can see the marker changing but i want to add an onpress function in each marker. when press one off the marker i want to the scrollview set to the position of my maker
componentWillMount() {
this.index = 0;
this.animation = new Animated.Value(0);
}
componentDidMount() {
// We should detect when scrolling has stopped then animate
// We should just debounce the event listener here
AsyncStorage.getItem('userToken', (err, result) => {
if (this.state.userToken == null) {
this.setState({ userToken: result })
this.GetAllMarker()
}
});
this.animation.addListener(({ value }) => {
console.log(value)
let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item
if (index >= this.state.markers.length) {
index = this.state.markers.length - 1;
}
if (index <= 0) {
index = 0;
}
clearTimeout(this.regionTimeout);
this.regionTimeout = setTimeout(() => {
if (this.index !== index) {
this.index = index;
const { coordinates } = this.state.markers[index];
console.log(index)
this.map.animateToRegion(
{
...coordinates,
latitudeDelta: this.state.region.latitudeDelta,
longitudeDelta: this.state.region.longitudeDelta,
},
350
);
}
}, 10);
});
}
GenerateBearer() {
let tmp = `Bearer ` + this.state.userToken
tmp = tmp.replace('"', '');
tmp = tmp.replace('"', '');
return (tmp)
}
GetAllMarker() {
let Bearer = this.GenerateBearer();
console.log(Bearer)
fetch(Config.API_URL + "/api/public/user/aroundMe?latitude=" + this.state.region.latitude + "&longitude=" + this.state.region.longitude + "&rayon=50", {
method: 'GET',
headers: {
'Accept': '*/*',
'Content-Type': 'application/json',
'Authorization': Bearer,
}
})
.then(res => res.json())
.then(res => {
this.setState({ markers: res })
})
.catch(error => {
this.setState({ error: error });
});
}
handleMarkerPress(e){
this.state.markers[1] = e
console.log(e)
}
render() {
const interpolations = this.state.markers.map((marker, index) => {
const inputRange = [
(index - 1) * CARD_WIDTH,
index * CARD_WIDTH,
((index + 1) * CARD_WIDTH),
];
const scale = this.animation.interpolate({
inputRange,
outputRange: [1, 2.5, 1],
extrapolate: "clamp",
});
const opacity = this.animation.interpolate({
inputRange,
outputRange: [0.35, 1, 0.35],
extrapolate: "clamp",
});
return { scale, opacity };
});
return (
<View style={styles.container}>
<MapView
ref={map => this.map = map}
initialRegion={this.state.region}
style={styles.container}
>
<UrlTile
urlTemplate="http://ip/styles/klokantech-basic/{z}/{x}/{y}.png"
zIndex={-1}
/>
{this.state.markers.map((marker, index) => {
const scaleStyle = {
transform: [
{
scale: interpolations[index].scale,
},
],
};
const opacityStyle = {
opacity: interpolations[index].opacity,
};
return (
<MapView.Marker key={index} coordinate={marker.coordinates} onPress={(event) => this.handleMarkerPress(index)} >
<Animated.View style={[styles.markerWrap, opacityStyle]} >
<Animated.View style={[styles.ring, scaleStyle]} />
<View style={styles.marker} />
</Animated.View>
</MapView.Marker>
);
})}
</MapView>
<Animated.ScrollView
horizontal
scrollEventThrottle={1}
showsHorizontalScrollIndicator={true}
snapToInterval={CARD_WIDTH}
onScroll={Animated.event(
[{nativeEvent: {
contentOffset: {
x: this.animation,
},
},},],
{ useNativeDriver: true }
)}
style={styles.scrollView}
contentContainerStyle={styles.endPadding}
>
{this.state.markers.map((marker, index) => {
if (marker.isAlerte == false)
return (
<View style={styles.card} key={index}>
<Image
source={marker.image}
style={styles.cardImage}
resizeMode="cover"
/>
<View style={styles.textContent}>
<Text numberOfLines={1} style={styles.cardtitle}>{marker.espace.titre}</Text>
<Text numberOfLines={1} style={styles.cardDescription}>
{marker.description}
</Text>
</View>
</View>)
else
return (
<View style={styles.card} key={index}>
<Image
source={marker.image}
style={styles.cardImage}
resizeMode="cover"
/>
<View style={styles.textContent}>
<Text numberOfLines={1} style={styles.cardtitle}>{marker.alerte.type}</Text>
<Text numberOfLines={1} style={styles.cardDescription}>
{marker.description}
</Text>
</View>
</View>)
})
}
</Animated.ScrollView>
</View>
);
}
}

Answer 1

found the solution
Add
<Animated.ScrollView
horizontal
ref={(c) => {this.scroll = c}}
scrollEventThrottle={1}
showsHorizontalScrollIndicator={true}
snapToInterval={CARD_WIDTH}
onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: this.animation, }, }, },], { useNativeDriver: true } )}
style={styles.scrollView}
contentContainerStyle={styles.endPadding} >
and this for the map view marker
<MapView.Marker
key={index}
coordinate={marker.coordinates}
onPress={() => this.handleMarkerPress(index)} >
and the handlemarkerpress
this.scroll.getNode().scrollTo({x: e * 375, y: 0, animated: true});
(375 for my card width)

Answer 2

To scroll to a position x,y in your scroll view. Use the scrollTo function in the scroll view. Checkout here the react native documentation about it https://facebook.github.io/react-native/docs/scrollview#scrollto.
Use the ref property to execute the method in your scrollview.
Now you need to identify the x and y of your markers so you can scroll to them. Never done something like that but here is an article of someone calculating the x and y of react native elements https://github.com/facebook/react-native/issues/1374.