react-native-customcomponent-v2/constants/theme.js

React native custom components for normal and password inputs

import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");

export const DIMENSIONS = {
  width: width,
  height: height
}

export const COLORS = {
  black: "#02122C",
  white: "#FFFFFF",
  gray: "#6A6A6A",
  blue: "#0682FE",
  primary: "#9c1d26",
  boderColor: "#CCD0D5",
  green: '#38842A',
  error: '#D0021B',
  yellow: '#FFCB05',
  red: '#BD2D37',
  lightGray: '#D8D8D8',
  raised:'#FF4242',
  inProgress:'#FF9007',
  success:'#43B32E'
};
export const SIZES = {
  // global sizes
  base: 8,
  font: 14,
  radius: 12,
  padding: 24,

  // font sizes
  h1: 30,
  h2: 22,
  h3: 16,
  h4: 14,
  body1: 30,
  body2: 22,
  body3: 16,
  body4: 14,
  body5: 12,

  // app dimensions
  width,
  height
};
export const FONTS = {
  h1: { fontFamily: "Poppins", fontSize: SIZES.h1, lineHeight: 36, fontWeight: "700" },
  h2: { fontFamily: "Poppins", fontSize: SIZES.h2, lineHeight: 30, fontWeight: "700" },
  h3: { fontFamily: "Poppins", fontSize: SIZES.h3, lineHeight: 22, fontWeight: "700" },
  h4: { fontFamily: "Poppins", fontSize: SIZES.h4, lineHeight: 22, fontWeight: "700" },
  body1: { fontFamily: "Poppins", fontSize: SIZES.body1, lineHeight: 36 },
  body2: { fontFamily: "Poppins", fontSize: SIZES.body2, lineHeight: 30 },
  body3: { fontFamily: "Poppins-SemiBold", fontSize: SIZES.body3, lineHeight: 22 },
  body4: { fontFamily: "Poppins", fontSize: SIZES.body4, lineHeight: 22 },
  body5: { fontFamily: "Poppins", fontSize: SIZES.body5, lineHeight: 18, fontWeight: "400" },
};

const appTheme = { COLORS, SIZES, FONTS, DIMENSIONS };

export default appTheme;