React native maps marker card animation popup

Question

I am learning React native's animated. I have used google maps for my app. i have created fake data. I display data's latitude and longitude by using React-native-map's Marker. Inside the Marker I have used React-native-map's Callout which take react native's jsx elements. In out I used the animation but seems like the animation does not work. Here is the Callout's looks like. I want to the animation card popup 200ms. I don't know how to use the animation inside the marker.

This is my Map's component

import React, { ReactElement, useRef, useEffect } from 'react';
import MapView, { PROVIDER_GOOGLE, Marker, Callout } from 'react-native-maps';
import { StyleSheet, Text, View, TouchableOpacity, Image, Animated, StatusBar, Button } from 'react-native';
import datas from '../../../data/data.json'; //My Fake data
import { stripeMap } from '../../../maps-skin/mapStripe';

interface Props {

}

const intialRegion = {
  "latitude": 60.1098678,
  "longitude": 24.7385084,
  "latitudeDelta": 0.2,
  "longitudeDelta": 1
};

export default function index({ navigation }: Props): ReactElement {
  console.log(navigation);

  const fadeAnim = useRef(new Animated.Value(0)).current;  // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        "toValue": 1,
        "duration": 4000,
        "useNativeDriver": true
      }
    ).start();
  }, [fadeAnim]);
  return (
    <View style={styles.container}>
      {/* <StatusBar hidden={true} /> */}
      <MapView.Animated
        provider={PROVIDER_GOOGLE}
        initialRegion={intialRegion}
        showsIndoors={true}
        showsMyLocationButton={true}
        zoomControlEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        showsScale={true}
        // showsTraffic={true}
        showsBuildings={true}
        showsUserLocation={true}
        showsCompass={true}
        showsIndoorLevelPicker={true}
        showsPointsOfInterest={true}
        loadingEnabled={true}
        customMapStyle={stripeMap}
        style={styles.mapStyle} >
        {
          datas?.data?.map((i, index) => {
            return <Marker
              key={index}
              coordinate={{ "latitude": i.location.lat, "longitude": i.location.lng }}
              image={{ "uri": `image.jpg` }}
              animation={true}
            >

              <Callout
                style={{ "width": 250, "height": 50 }}
                onPress={() => {
                  navigation.navigate(`Detail`, {
                    "itemId": `${i.id}`
                  });
                }}>
                <Animated.View //This  is my animated View which does not work
                  style={{
                    "opacity": fadeAnim
                  }}
                >
                  <Text>{i.restaurant}</Text>
                  <Text>click</Text>
                </Animated.View>
              </Callout>

            </Marker>;
          })
        }
      </MapView.Animated>
    </View>
  );
}

const styles = StyleSheet.create({
  "container": {
    "flex": 1,
    "backgroundColor": `#fff`,
    "alignItems": `center`,
    "justifyContent": `center`

  },
  "mapStyle": {
    "width": 390,
    "height": 390
  }
});

React native maps marker card animation popup

0 Answers0