@s20.ai/safecam-360-rn-v2/src/components/common/overlay/InteriorRotateHint.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 {connect} from 'react-redux';
import {View, StyleSheet, Text, Dimensions} from 'react-native';
import LottieView from 'lottie-react-native';
import constants from '../../../config/constants';

let timeout = null;

const InteriorRotateHint = ({orientation, miniMode}) => {
  const styles = StyleSheet.create({
    mainContainerLandscape: {
      width: '100%',
      height: '100%',
      // top: "5%",
      // left: "17.5%",
      // bottom: "18.75%",
      zIndex: 0,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      // backgroundColor:"red"
    },
    mainContainerPortrait: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      // left: "10%",
      top: 0,
      zIndex: 10,
      elevation: 10,
      justifyContent: 'center',
      alignItems: 'center',
    },
    lottiePortrait: {
      width: Dimensions.get('window').width * 0.8,
      height: Dimensions.get('window').height / 2,
      position: 'absolute',
      aspectRatio: 1,
    },
    lottieLandscape: {
      // aspectRatio: 2,
      height: Dimensions.get('window').height / 1.5,
      width: Dimensions.get('window').width / 1.5,
      position: 'absolute',
    },
    helperWrapper: {
      position: 'absolute',
      top: '70%',
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center',
      height: 30,
      backdropFilter: 'blur(3px)',
    },
    helperView: {
      backgroundColor: 'rgba(0,0,0,0.4)',
      paddingHorizontal: 10,
      paddingVertical: 5,
      borderRadius: 20,
    },
  });

  const [showTextMessage, setShowTextMessage] = useState(false);
  useEffect(() => {
    timeout = setTimeout(() => {
      setShowTextMessage(true);
    }, 6000);
    return () => {
      if (timeout) clearTimeout(timeout);
      setShowTextMessage(false);
    };
  }, []);
  console.log('first');
  return (
    <View
      pointerEvents="none"
      style={
        orientation.includes(constants.PORTRAIT)
          ? styles.mainContainerPortrait
          : styles.mainContainerLandscape
      }>
      <LottieView
        autoPlay={true}
        loop={true}
        source={
          orientation.includes(constants.PORTRAIT)
            ? miniMode
              ? require('../../../assets/lottie/Rotate Interior - Landscape.json')
              : require('../../../assets/lottie/Rotate Interior - Portrait.json')
            : require('../../../assets/lottie/Rotate Interior - Landscape.json')
        }
        resizeMode="contain"
        style={
          orientation.includes(constants.PORTRAIT)
            ? styles.lottiePortrait
            : styles.lottieLandscape
        }></LottieView>
      {showTextMessage && (
        <View
          style={{
            ...styles.helperWrapper,
            ...(orientation.includes(constants.PORTRAIT) ? {} : {top: '80%'}),
          }}>
          <View style={styles.helperView}>
            <Text style={{color: 'white'}}>Drag to rotate view</Text>
          </View>
        </View>
      )}
    </View>
  );
};

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