@s20.ai/safecam-360-rn/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: 12,
      lineHeight: 18,
      color: '#002441',
      paddingLeft: 5
      
    },
    base: {
      height: Dimensions.get("window").height * 0.08,
      width: Dimensions.get('window').width * 0.9,
      maxWidth: 400,
      justifyContent: 'space-between',
      display: 'flex',
      flexDirection: 'row',
      borderRadius: 5,
      zIndex:10
    },
    imageButton: {
      base: {
        width: (Dimensions.get("window").width * 0.9) * 0.3,
        minWidth: 120,
        height: (Dimensions.get("window").height * 0.08) * 0.67,
      },
      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.34,
    imageViewPill: {
      marginBottom: 5,
      marginLeft: 5,
    },
    imageViewPillText: {
      padding: 5,
    },
    iconSize: 16,
    base: {
      borderRadius: 6,
    },
    cardContentContainer: {
      paddingLeft: 20,
      paddingRight: 20,
    },
    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",
    position: "absolute"
  }
};