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

/**
 * Style config for components coming in from the component registry
 * Only base styles to be defined here
 * Any responsive style overrides to be defined in responsiveStyleConfig.js
 */
export default config = {
  toolbar: {
    text: {
      fontFamily: 'Poppins-SemiBold',
      fontSize: 14,
      lineHeight: 18,
      color: '#002441',
      paddingLeft: 5,
    },
    base: {
      height: Dimensions.get('window').height * 0.08,
      width: Dimensions.get('window').width * 0.9,
      maxWidth: 400,
      padding: 14,
      justifyContent: 'space-between',
      display: 'flex',
      flexDirection: 'row',
      borderRadius: 5,
      zIndex: 10,
    },
    baseNoShadow: {
      height: Dimensions.get('window').height * 0.08,
      width: Dimensions.get('window').width * 0.9,
      maxWidth: 400,
      padding: 14,
      justifyContent: 'space-between',
      display: 'flex',
      flexDirection: 'row',
      borderRadius: 5,
      zIndex: 10,
      backgroundColor: 'transparent',
      shadow: {
        shadowOpacity: 0,
      },
    },
    imageButton: {
      base: {
        width: Dimensions.get('window').width * 0.9 * 0.3,
        minWidth: 120,
        height: Dimensions.get('window').height * 0.08 * 0.67,
        borderRadius: 6,
      },
      text: {
        marginHorizontal: 10,
        letterSpacing: 0.1,
        fontSize: 12,
        textAlign: 'center',
      },
      fontStyles: {
        fontFamily: 'Poppins-Bold',
        textTransform: 'capitalize',
        color: 'white',
      },
    },
  },
  label: {
    text: {
      fontFamily: 'Poppins-SemiBold',
      color: '#002441',
      fontSize: 12,
    },
    base: {
      borderColor: '#f28500',
      borderWidth: 1,
    },
    labelTip: {
      elevation: 1,
    },
  },
  galleryIcon: {
    width: 144,
    height: 40,
    iconSize: 20,
    base: {
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 4,
    },
    icon: {
      marginRight: 7,
      marginTop: 3,
    },
    gradientStyles: {
      fontSize: 14,
      fontFamily: 'Poppins-Regular',
    },
  },
  card: {
    width: Dimensions.get('window').width * 0.8,
    height: Dimensions.get('window').height * 0.3,
    // height: '90%',
    imageViewPill: {
      marginBottom: 5,
      marginLeft: 5,
    },
    imageViewPillText: {
      padding: 5,
    },
    iconSize: 16,
    base: {
      borderRadius: 6,
    },
    cardContentContainer: {
      paddingLeft: 15,
      paddingRight: 15,
      paddingTop: 15,
      paddingBottom: 15,
      flex: 1
    },
    imageViewPillText: {
      paddingVertical: 2,
      fontFamily: 'Poppins-Regular',
    },
    cardTitleText: {
      fontWeight: 'normal',
      fontSize: 14,
      marginLeft: 4,
      fontFamily: 'Poppins-SemiBold',
      color: '#002441',
    },
    cardContentText: {
      fontWeight: 'normal',
      fontSize: 12,
      fontFamily: 'Poppins-Regular',
      color: '#465166',
    },
  },
  cardFocusModal: {
    closeIconJSX: {
      left: 20,
      top: Platform.OS === 'android' ? 24 : 48,
    },
    text: {
      left: 20,
      position: 'absolute',
      bottom: 24,
    },
    title: {
      fontFamily: 'Poppins-Regular',
    },
    description: {
      fontFamily: 'Poppins-Regular',
    },
  },
  closeBtn: {
    iconSize: 15,
    base: {
      backgroundColor: '#fff',
      width: 40,
      height: 40,
    },
  },
  progressBar: {
    height: 4,
    backgroundColor: 'grey',
  },
};