@s20.ai/safecam-360-rn/src/components/common/overlay/AutoRotateHint.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} from "react-native";
import { setCurrentMessageOff, setCurrentMessageOn } from "../../../redux/actions/messageHintAction";
import LottieView from "lottie-react-native";
import constants from "../../../config/constants";
import { BlurView } from "@react-native-community/blur";
import { TouchableOpacity } from "react-native-gesture-handler";

const AutoRotateHint = ({orientation, customFontFamily}) => {
  const dispatch = useDispatch();
  const styles = StyleSheet.create({
    mainContainer:{
      position: "absolute",
      height: "100%",
      width: "100%",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      zIndex: 5
    },
    container: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
    text:{
        margin: 0,
        fontWeight: '600',
        fontSize: 14,
        lineHeight: 22,
        letterSpacing: 0.16,
        color: "white",
        textAlign: "center",
        paddingLeft: 50,
        paddingRight: 50,
        paddingTop: 40,
        fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-Regular" : customFontFamily
    },
    closeText:{
      fontStyle: "normal",
      fontWeight: "600",
      fontSize: 16,
      lineHeight: 22,
      color: "white",
      paddingTop: 40,
      textDecorationLine:"underline",
      fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-Regular" : customFontFamily
     
    }
  })
  return (
  
    <View  style={styles.mainContainer}>
       <BlurView
        style={{
          position: 'absolute',
          height: Dimensions.get("window").height,
          width: Dimensions.get("window").width,
          top: 0,
        }}
        blurType="dark"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
        
      />
      <LottieView
          autoPlay={true}
          source={require("../../../assets/lottie/Rotate Mobile.json")}
          style={{
              height: 150,
              width: 150,
          }}
          
      >
            
      </LottieView>
      <Text style={styles.text}>Rotate your phone to landscape mode for the best viewing experience</Text>
      <TouchableWithoutFeedback style={{
      }} onPress={()=>{
        dispatch(setCurrentMessageOff(constants.MESSAGES.AUTO_ROTATE_MESSAGE, true))
      }}>
      <Text style={styles.closeText} >OK, GOT IT</Text>
      </TouchableWithoutFeedback>
    </View>

  );
};


const mapStateToProps = ({currentView}) => {
  return {
    orientation: currentView.orientation
  };
};


export default connect(mapStateToProps)(AutoRotateHint);