@s20.ai/safecam-360-rn-lite/src/components/responsiveAppStyleConfig.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

/*
 * 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: 100,
  },
  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,
);