@s20.ai/safecam-360-rn/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 } 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";

const ExteriorRotateHint = ({orientation}) => {
  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
    },
    lottiePortrait:{
      width: screenDimensions.width
    },
    lottieLandscape:{
      aspectRatio: 1
    }
  })

  

 

  return (
    
    <View pointerEvents="none" style={orientation.includes(constants.PORTRAIT) ?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: styles.lottieLandscape}
          
      >
            
      </LottieView>
      
    </View>
    
  );
};

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