@s20.ai/safecam-360-rn-v2/src/components/common/overlay/ZoomOutMessage.js

A React Native component to view the interior panorama and exterior 360 degree views of a product featuring suppport for hotspots. Compatible with Android and iOS

import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {useDispatch} from 'react-redux';
import constants from '../../../config/constants';
import {setCurrentMessageOff} from '../../../redux/actions/messageHintAction';

let zoomOutMessageTimeOut = null;
const ZoomOutMessage = ({isExterior, isInterior}) => {
  const dispatch = useDispatch();
  const [showMessage, setShowMessage] = useState(true);
  useEffect(() => {
    if (zoomOutMessageTimeOut) clearTimeout(zoomOutMessageTimeOut);
    zoomOutMessageTimeOut = setTimeout(() => {
      setShowMessage(false);
      if (isExterior)
        dispatch(
          setCurrentMessageOff(
            constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT_EXTERIOR,
            true,
          ),
        );
      else if (isInterior)
        dispatch(
          setCurrentMessageOff(
            constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT_INTERIOR,
            true,
          ),
        );
    }, 6000);
    return () => {
      if (zoomOutMessageTimeOut) clearTimeout(zoomOutMessageTimeOut);
    };
  }, []);

  const styles = StyleSheet.create({
    helperWrapper: {
      pointerEvents: 'none',
      position: 'absolute',
      top: '45%',
      left: 0,
      right: 0,
      justifyContent: 'center',
      alignItems: 'center',
      height: 30,
      backdropFilter: 'blur(3px)',
      zIndex: 100,
      elevation: 100,
      color: 'white',
    },
    helperSubWrapper: {
      borderRadius: 20,
      overflow: 'hidden',
      position: 'absolute',
    },
    helperText: {
      backgroundColor: 'rgba(0,0,0,0.4)',
      paddingHorizontal: 10,
      paddingVertical: 5,
      color: 'white',
      borderRadius: 20,
    },
  });
  return (
    showMessage && (
      <View
        style={{
          ...styles.helperWrapper,
        }}>
        <View
          style={{
            ...styles.helperSubWrapper,
          }}>
          <Text style={styles.helperText}>Double tap to zoom out</Text>
        </View>
      </View>
    )
  );
};

export default ZoomOutMessage;