@s20.ai/safecam-360-rn-v2/src/components/common/overlay/DragToRotateViewMessage.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,
  Platform,
} from 'react-native';
import constants from '../../../config/constants';
import {useScreenDimensions} from '../../../utils/device';
const DragToRotateViewMessage = ({
  orientation,
  currentView,
  imageHeight,
  customFontFamily,
}) => {
  const screenDimensions = useScreenDimensions();
  const getContainerPosition = () => {
    if (orientation.includes(constants.LANDSCAPE)) {
      if (currentView.type === constants.INTERIOR_VIEW) {
        return {
          // left: "80.28%",
          // right: "-19.44%",
          // top: "65.88%",
          bottom: '20%',
        };
      } else {
        //Exterior Landscape
        // return {
        //   left: "80.28%",
        //   right: "-19.44%",
        //   top: "34.63%",
        //   bottom: "61.75%"
        // }
        return {
          // left: "33%",
          top: '45%',
          // bottom: 110
        };
      }
    } else {
      if (currentView.type === constants.INTERIOR_VIEW) {
        return {
          left: '30.56%',
          right: '30.28%',
          top: '74.69%',
          bottom: '21.7%',
        };
      } else {
        //Exterior portrait
        return {
          bottom: 12,
        };
        // return {
        //   left: "30.56%",
        //   right: "30.28%",
        //   top: "57.02%",
        //   bottom: "39.36%"
        // }
      }
    }
  };
  const styles = StyleSheet.create({
    mainContainer: {
      position: 'absolute',
      width: Dimensions.get('window').width,
      height:
        currentView.type === constants.EXTERIOR_VIEW
          ? orientation.includes(constants.PORTRAIT)
            ? imageHeight
            : Dimensions.get('window').height
          : '100%',
      zIndex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    messageView: {
      position: 'absolute',
      paddingTop: 4,
      paddingBottom: 4,
      paddingLeft: 12,
      paddingRight: 12,
      backgroundColor: 'rgba(0,0,0,0.5)',
      width: orientation.includes(constants.PORTRAIT)
        ? Dimensions.get('window').width * 0.4
        : Dimensions.get('window').width * 0.2,
      minWidth: 150,
      height: 26,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 20,
      // bottom: orientation.includes(constants.PORTRAIT)? 12 : 86
      ...getContainerPosition(),
    },
  });

  return (
    <View pointerEvents="none" style={styles.mainContainer}>
      <View style={styles.messageView}>
        <Text
          numberOfLines={1}
          style={{
            fontSize: 12,
            lineHeight: 18,
            fontFamily:
              customFontFamily && customFontFamily === 'Poppins'
                ? 'Poppins-Regular'
                : customFontFamily,
            color: '#fff',
          }}>
          Drag To Rotate View
        </Text>
      </View>
    </View>
  );
};

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