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> ); }}