@s20.ai/safecam-360-rn-lite/src/components/appStyleConfig.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} from 'react-native';

/**
 * Style config for app specific styles like common margins, gutters, etc.
 */
export default config = {
  mainWrapperContainer: {
    flexGrow: 1,
    height: '100%',
    width: '100%',
  },
  widgetOverlayContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    paddingLeft: 20,
    paddingRight: 20,
    width: '100%',
    height: '100%',
    justifyContent: 'space-between',
    flexDirection: 'column',
    display: 'flex',
  },
  safeAreaOverlayButtonContainer: {
    position: 'relative',
  },
  overlayButtonContainer: {},

  carouselContainer: {
    position: 'absolute',
    marginTop: 112,
    left: -20,
  },
  exteriorView: {
    container: {
      height: '100%',
      width: '100%',
      position: 'absolute',
      top: 0,
      left: 0,
    },
    containerHotspotMode: {
      flex: 1,
      marginTop: '55%',
    },
  },
  exteriorViewImageWrapper: {
    top: '33%',
    position: 'relative',
  },

  hotspotOverlayContainer: {
    position: 'absolute',
    marginLeft: 20,
    marginTop: Platform.OS === 'android' ? 24 : 0,
  },
  safeAreaBottomToolbarContainer: {
    width: '100%',
    paddingBottom: 24,
  },
  bottomToolbarContainer: {},
  bottomToolbarAnimatedContainer: {
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: 'red',
  },
};