@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
117 lines (97 loc) • 2.62 kB
JavaScript
/*
* Copyright © 2022 S20.AI India Pvt. Ltd.
* Contact - origin@s20.ai
* License - Licensed as per https://docs.s20.ai/license.html
*/
import {Platform, Dimensions, StyleSheet, StatusBar, PixelRatio} from 'react-native';
import constants from '../config/constants';
import { hasNotch, getOrientation } from '../utils/device';
import appStyleConfig from './appStyleConfig';
import Responsive from '../utils/Responsive';
/**
* Responsive style config for app specific styles like common margins, gutters, etc.
*/
const base = StyleSheet.create(appStyleConfig)
// breakpoint - 375
const small = StyleSheet.create({
carouselContainer:{
marginTop: 105
},
exteriorView:{
containerHotspotMode: {
//In normal cases, don't use Dimensions here
//This condition had to be written to handle the exterior viewer positioning when hotspots are active for iPhone 6s
marginTop: Dimensions.get("window").height <=650 ? "35%": "45%",
}
},
widgetOverlayContainer:{
paddingTop: 24,
}
})
//breakpoint - 480
const medium = StyleSheet.create({
carouselContainer:{
//In normal cases, don't use Dimensions here
//This condition had to be written to handle the top margin for the carousel on the iPhone 13 Pro Max
marginTop: Dimensions.get("window").height >=850 ? 100: 70,
},
exteriorView:{
containerHotspotMode: {
marginTop: "45%",
}
},
widgetOverlayContainer:{
paddingTop: 24,
}
})
//breakpoint - 768
const large = StyleSheet.create({
widgetOverlayContainer:{
paddingTop: 24,
},
hotspotOverlayContainer:{
marginTop: 24
},
carouselContainer:{
marginTop: 0,
left: Platform.OS === "ios"? 350:280
},
container: {
top: 0,
flex: 1,
zIndex: 0,
},
exteriorViewImageWrapper:{
top: 0,
flex: 1,
}
})
//breakpoint - 992
const xLarge = StyleSheet.create({
widgetOverlayContainer:{
paddingTop: 24,
},
hotspotOverlayContainer:{
marginTop: 24
},
carouselContainer:{
marginTop: 0,
left: Platform.OS === "ios"? 530:450
},
container: {
top: 0,
flex: 1,
zIndex: 0
},
exteriorViewImageWrapper:{
top: 0,
flex: 1,
}
})
//breakpoint - 1280
const xxLarge = {}
export const responsiveAppStyleConfig = new Responsive(
constants.STYLE_BREAKPOINTS,
[small, medium, large, xLarge, xxLarge],
base
);