@s20.ai/safecam-360-rn-v2/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,
    },
  });
  useEffect(() => {
    if (orientation.split('-')[0] === constants.LANDSCAPE) {
      dispatch(setCurrentMessageOff(constants.MESSAGES.AUTO_ROTATE_MESSAGE));
    }
  }, [orientation]);

  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);