@s20.ai/safecam-360-rn-v2/src/components/common/overlay/ExteriorRotateHint.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 {useDispatch, connect} from 'react-redux';
import {
  View,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Dimensions,
  TouchableHighlight,
  Button,
  PanResponder,
} from 'react-native';
import {setCurrentMessageOff} from '../../../redux/actions/messageHintAction';
import LottieView from 'lottie-react-native';
import constants from '../../../config/constants';
import {useScreenDimensions} from '../../../utils/device';

let timeout = null;
const ExteriorRotateHint = ({orientation, miniMode, currentView}) => {
  const screenDimensions = useScreenDimensions();
  const styles = StyleSheet.create({
    mainContainerLandscape: {
      width: '80%',
      height: '100%',
      zIndex: 0,
      left: '10%',
    },
    mainContainerPortrait: {
      position: 'absolute',
      width: '100%',
      top: '20%',
      zIndex: 0,
    },
    mainContainerPortrait_MiniMode: {
      position: 'absolute',
      top: '-5%',
      zIndex: 0,
    },
    lottiePortrait: {
      width: screenDimensions.width,
    },
    lottieLandscape: {
      aspectRatio: 1,
    },
    lottieLandscapeExterior: {
      aspectRatio: 1,
      top: '5%',
    },
    helperWrapper: {
      position: 'absolute',
      top: '70%',
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center',
      height: 30,
    },
    helperView: {
      color: 'white',
      backgroundColor: 'rgba(0,0,0,0.4)',
      borderRadius: 20,
      // backdropFilter: 'blur(3px)',
      paddingHorizontal: 10,
      paddingVertical: 5,
    },
  });

  const [showTextMessage, setShowTextMessage] = useState(false);
  useEffect(() => {
    timeout = setTimeout(() => {
      setShowTextMessage(true);
    }, 6000);
    return () => {
      if (timeout) clearTimeout(timeout);
      setShowTextMessage(false);
    };
  }, []);

  return (
    <View
      pointerEvents="none"
      style={
        orientation.includes(constants.PORTRAIT)
          ? miniMode
            ? styles.mainContainerPortrait_MiniMode
            : styles.mainContainerPortrait
          : styles.mainContainerLandscape
      }>
      <LottieView
        autoPlay={true}
        loop={true}
        source={require('../../../assets/lottie/Rotate Exterior.json')}
        resizeMode="cover"
        style={
          orientation.includes(constants.PORTRAIT)
            ? styles.lottiePortrait
            : currentView.type === constants.INTERIOR_VIEW
            ? styles.lottieLandscape
            : styles.lottieLandscapeExterior
        }></LottieView>
      {showTextMessage && (
        <View
          style={{
            ...styles.helperWrapper,
            ...(orientation.includes(constants.PORTRAIT)
              ? {}
              : {
                  top:
                    currentView.type === constants.INTERIOR_VIEW
                      ? '80%'
                      : '45%',
                }),
          }}>
          <View style={styles.helperView}>
            <Text style={{color: 'white'}}>Drag to rotate view</Text>
          </View>
        </View>
      )}
    </View>
  );
};

const mapStateToProps = ({currentView}) => {
  return {
    currentView,
    orientation: currentView.orientation,
  };
};
export default connect(mapStateToProps)(ExteriorRotateHint);