@s20.ai/safecam-360-rn/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 { 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";
import DragToRotateViewMessage from "./DragToRotateViewMessage";
const InteriorRotateHint = ({orientation, messageHint, customFontFamily}) => {

  const screenDimensions = useScreenDimensions()
  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: "25%",
      // zIndex: 10,
      display:"flex",
      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",
      
    }
  })


  return (
    
    <View pointerEvents="none" style={orientation.includes(constants.PORTRAIT) ?styles.mainContainerPortrait:styles.mainContainerLandscape} >
      <LottieView
        autoPlay={true}
          loop={true}
          source={orientation.includes(constants.PORTRAIT)? 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>
      {
        messageHint[constants.MESSAGES.INTERIOR_ROTATE].show  &&
        <DragToRotateViewMessage customFontFamily={customFontFamily}/>
      }
    </View>
    
  );
};

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