@s20.ai/safecam-360-rn
Version:
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
118 lines (107 loc) • 3.47 kB
JavaScript
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: 300,
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);