dhre-ui-kit 0.0.1

package/src/components/toggleButton/ToggleButton.tsx

@@ -0,0 +1,78 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {View, Animated, Pressable} from 'react-native';
+import {DHRE_COLORS_ALERT, DHRE_COLORS_TEXT} from '../../theme/colors';
+import styles from './ToggleButton.styles';
+import CustomTypography from '../../components/customTypography/CustomTypography';
+import {
+  ToggleButtonType,
+  TextDirectType,
+  ToggleTextType,
+} from '../../utils/appEnum';
+interface CustomSwitchProps {
+  onValueChange: (value: boolean) => void;
+  value: boolean;
+  type?: ToggleButtonType;
+  trackWidth?: number;
+  width?: number;
+}
+
+const CustomSwitch: React.FC<CustomSwitchProps> = ({
+  onValueChange,
+  value,
+  type = ToggleButtonType.LARGE,
+  trackWidth = type !== ToggleButtonType.SMALL ? 35 : 15,
+  width = type !== ToggleButtonType.SMALL ? 60 : 40,
+}) => {
+  const [isOn, setIsOn] = useState(value);
+  const animatedValue = useRef(
+    new Animated.Value(value ? trackWidth : 0),
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: isOn ? trackWidth : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [isOn, animatedValue, trackWidth]);
+
+  const toggleSwitch = () => {
+    setIsOn(!isOn);
+    onValueChange(!isOn);
+  };
+
+  const animatedStyle = {
+    transform: [{translateX: animatedValue}],
+  };
+
+  return (
+    <Pressable
+      onPress={toggleSwitch}
+      style={[styles.container, {width}]}
+      testID="custom-switch">
+      <View
+        style={[
+          styles.track,
+          {
+            backgroundColor: isOn
+              ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT
+              : DHRE_COLORS_TEXT.DH_TEXTDISABLED,
+          },
+        ]}>
+        <Animated.View style={[styles.thumb, animatedStyle]} />
+        {type !== ToggleButtonType.SMALL && (
+          <CustomTypography
+            variant="B3semiBold"
+            style={[
+              styles.text,
+              {textAlign: isOn ? TextDirectType.left : TextDirectType.right},
+            ]}
+            text={isOn ? ToggleTextType.ON : ToggleTextType.OFF}
+          />
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+export default CustomSwitch;

package/src/components/toggleButton/index.ts

@@ -0,0 +1 @@
+export {default} from './ToggleButton';

package/src/index.ts

@@ -0,0 +1,19 @@
+export {default as CustomText} from './components/customText';
+// export {default as AutoOtpReader} from './components/autoOtpReader'; //TODO: warn
+export {default as Badge} from './components/badge';
+export {default as BottomDrawer} from './components/bottomDrawer';
+export {default as Button} from './components/button';
+export {default as Cards} from './components/cards';
+export {default as CheckBox} from './components/checkBox';
+export {default as CustomDropdown} from './components/customDropdown';
+export {default as CustomTextInput} from './components/customInputText';
+export {default as CustomTooltip} from './components/customTooltip';
+export {default as FileUpload} from './components/fileUpload';
+// export {default as PdfView} from './components/pdfView'; //TODO:  error
+export {default as PopUp} from './components/popup';
+export {default as CustomProgressBar} from './components/progressBar';
+export {default as Property360View} from './components/property360View';
+export {default as StarRating} from './components/rating';
+export {default as Tabs} from './components/tabs';
+export {default as Tags} from './components/tags';
+export {default as ToggleButton} from './components/toggleButton';

package/src/theme/ThemeContext.tsx

@@ -0,0 +1,32 @@
+import React, {createContext, useContext, ReactNode} from 'react';
+import {lightTheme, darkTheme} from './themes';
+import {useSelector} from 'react-redux';
+
+interface ThemeContextType {
+  theme: typeof lightTheme | typeof darkTheme;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const theme = useSelector((state: any) => state.theme.theme);
+  //TODO: please comment line no 16 and uncomment 18 to run
+  // const theme = false ? darkTheme : lightTheme;
+
+  return (
+    <ThemeContext.Provider value={{theme}}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/theme/colors.ts

@@ -0,0 +1,156 @@
+export const DHRE_COLORS_PRIMARY = {
+  //Black
+  DH_BLACK_25: '#C4C5C7',
+  DH_BLACK_50: '#888B8F',
+  DH_BLACK_75: '#4D5257',
+  DH_BLACK_100: '#101820',
+
+  //RED
+  DH_RED_25: '#EFCBC7',
+  DH_RED_50: '#E09890',
+  DH_RED_75: '#D3675B',
+  DH_RED_100: '#DA291C',
+
+  //GREY
+  DH_GREY_25: '#D7D9DB',
+  DH_GREY_50: '#AEB3B7',
+  DH_GREY_75: '#868D93',
+  DH_GREY_100: '#5B6770',
+};
+
+export const DHRE_COLORS_SECONDARY = {
+  //LIGHT SKY
+  DH_LIGHT_SKY_25: '#EBF6F9',
+  DH_LIGHT_SKY_50: '#D7ECF3',
+  DH_LIGHT_SKY_75: '#C3E3EC',
+  DH_LIGHT_SKY_100: '#A4DBE8',
+
+  DH_BIEGE_25: '#F0EDEB',
+  DH_BIEGE_50: '#E1DCD6',
+  DH_BIEGE_75: '#D2CBC2',
+  DH_BIEGE_100: '#C5B9AC',
+
+  DH_GREEN_DARK_0: '#F5FFF8',
+  DH_GREEN_DARK_100: '#EEFDF2',
+  DH_GREEN_DARK_200: '#E2F9E8',
+  DH_GREEN_DARK_300: '#D0F2DA',
+  DH_GREEN_DARK_400: '#B7E9C6',
+  DH_GREEN_DARK_500: '#98DDAC',
+  DH_GREEN_DARK_600: '#72CD8D',
+  DH_GREEN_DARK_700: '#4BB86C',
+  DH_GREEN_DARK_800: '#28A04C',
+  DH_GREEN_DARK_900: '#0E8732',
+  DH_GREEN_DARK: '#2F5A3C',
+
+  DH_BLUE_DARK_0: '#F5FCFF',
+  DH_BLUE_DARK_100: '#EEF8FD',
+  DH_BLUE_DARK_200: '#E2F1F9',
+  DH_BLUE_DARK_300: '#D0E7F2',
+  DH_BLUE_DARK_400: '#B7D9E9',
+  DH_BLUE_DARK_500: '#98C7DD',
+  DH_BLUE_DARK_600: '#72B0CD',
+  DH_BLUE_DARK_700: '#4B95B8',
+  DH_BLUE_DARK_800: '#4B95B8',
+  DH_BLUE_DARK_900: '#0E6187',
+  DH_BLUE_DARK: '#2C576B',
+
+  DH_BLUE_0: '#F5F9FF',
+  DH_BLUE_100: '#E2EDFE',
+  DH_BLUE_200: '#C1D9FB',
+  DH_BLUE_300: '#9BC1F6',
+  DH_BLUE_400: '#73A6ED',
+  DH_BLUE_500: '#4C8AE0',
+  DH_BLUE_600: '#276CCD',
+  DH_BLUE_700: '#1B5CB8',
+  DH_BLUE_800: '#134EA0',
+  DH_BLUE_900: '#0E4087',
+  DH_BLUE: '#4686E0',
+};
+
+export const DHRE_COLORS_ALERT = {
+  DH_SUCCESS_GREEN_0: '#F5FFFA',
+  DH_SUCCESS_GREEN_100: '#DFFEEE',
+  DH_SUCCESS_GREEN_200: '#99FBC7',
+  DH_SUCCESS_GREEN_300: '#72F7B0',
+  DH_SUCCESS_GREEN_400: '#53F29D',
+  DH_SUCCESS_GREEN_500: '#3CEB8D',
+  DH_SUCCESS_GREEN_600: '#2BE180',
+  DH_SUCCESS_GREEN_700: '#1FD574',
+  DH_SUCCESS_GREEN_800: '#17C669',
+  DH_SUCCESS_GREEN_900: '#12B85F',
+  DH_SUCCESS_GREEN: '#10CF68',
+  DH_SUCCESS_GREEN_ACCENT: '#00B578',
+
+  DH_INFO_BLUE_0: '#F5F9FF',
+  DH_INFO_BLUE_100: '#EDF3FD',
+  DH_INFO_BLUE_200: '#E0EAF9',
+  DH_INFO_BLUE_300: '#CDDCF2',
+  DH_INFO_BLUE_400: '#B3C8E9',
+  DH_INFO_BLUE_500: '#91AFDD',
+  DH_INFO_BLUE_600: '#6991CD',
+  DH_INFO_BLUE_700: '#3F6FB8',
+  DH_INFO_BLUE_800: '#1B50A0',
+  DH_INFO_BLUE_900: '#003687',
+  DH_INFO_BLUE: '#2B5FAC',
+
+  DH_ALERT_ORANGE_0: '#FEF6F4',
+  DH_ALERT_ORANGE_100: '#FDEDE8',
+  DH_ALERT_ORANGE_200: '#F6C6B6',
+  DH_ALERT_ORANGE_300: '#F3B39D',
+  DH_ALERT_ORANGE_400: '#EF8F6E',
+  DH_ALERT_ORANGE_500: '#ED6C43',
+  DH_ALERT_ORANGE_600: '#BC3D1D',
+  DH_ALERT_ORANGE_700: '#8D2E13',
+  DH_ALERT_ORANGE_800: '#5E1E0A',
+  DH_ALERT_ORANGE_900: '#461606',
+  DH_ALERT_ORANGE: '#FF3A00',
+
+  DH_WARNING_YELLOW_0: '#FFFBF5',
+  DH_WARNING_YELLOW_100: '#FEEFD4',
+  DH_WARNING_YELLOW_200: '#FBE1B2',
+  DH_WARNING_YELLOW_300: '#F5D18D',
+  DH_WARNING_YELLOW_400: '#ECBC62',
+  DH_WARNING_YELLOW_500: '#DDA338',
+  DH_WARNING_YELLOW_600: '#CD9327',
+  DH_WARNING_YELLOW_700: '#B8811B',
+  DH_WARNING_YELLOW_800: '#A06F13',
+  DH_WARNING_YELLOW_900: '#875D0E',
+  DH_WARNING_YELLOW: '#F4AE28',
+};
+
+export const DHRE_COLORS_BG = {
+  DH_LINE_GREY_0: '#FAFAFA',
+  DH_LINE_GREY_100: '#F6F6F6',
+  DH_LINE_GREY_200: '#F1F1F1',
+  DH_LINE_GREY_300: '#EDEDED',
+  DH_LINE_GREY_400: '#EDEDED',
+  DH_LINE_GREY_500: '#CCCACA',
+  DH_LINE_GREY_600: '#B4B2B2',
+  DH_LINE_GREY_700: '#959494',
+  DH_LINE_GREY_800: '#727171',
+  DH_LINE_GREY_900: '#4D4C4C',
+  DH_GREY1: '#E8E8E8',
+
+  DH_BG_GREY_0: '#F5F7FF',
+  DH_BG_GREY_100: '#F2F4FD',
+  DH_BG_GREY_200: '#EDEFF9',
+  DH_BG_GREY_300: '#E5E7F2',
+  DH_BG_GREY_400: '#D9DCE9',
+  DH_BG_GREY_500: '#CACDDD',
+  DH_BG_GREY_600: '#B7BBCD',
+  DH_BG_GREY_700: '#A0A4B8',
+  DH_BG_GREY_800: '#878BA0',
+  DH_BG_GREY_900: '#6F7387',
+  DH_BG_GREY: '#F2F3F8',
+};
+
+export const DHRE_COLORS_TEXT = {
+  //Black
+  DH_BLACK: '#000000',
+  DH_WHITE: '#FFFFFF',
+  DH_TEXTDARK: '#3A3B43',
+  DH_TEXTLIGHT: '#6C6C6C',
+  DH_TEXTLIGHTEST: '#A7A7A7',
+  DH_TEXTDISABLED: '#CCCCCC',
+  DH_LIGHTGREEN: '#00B578',
+};

package/src/theme/fonts.ts

@@ -0,0 +1,303 @@
+import {TextStyle} from 'react-native';
+import {moderateScale, verticalScale} from '../utils/stylehelper';
+
+const boldWeight = '700';
+const semiboldWeight = '600';
+const mediumWeight = '500';
+const regularWeight = '400';
+interface FontStyles {
+  [key: string]: TextStyle;
+}
+
+export const FONT_STYLES: FontStyles = {
+  // Heading Fonts
+  H1bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(36),
+    lineHeight: verticalScale(44),
+  } as TextStyle,
+  H1semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(36),
+    lineHeight: verticalScale(44),
+  } as TextStyle,
+  H1medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(36),
+    lineHeight: verticalScale(44),
+  } as TextStyle,
+  H2bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(32),
+    lineHeight: verticalScale(40),
+  } as TextStyle,
+  H2semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(32),
+    lineHeight: verticalScale(40),
+  } as TextStyle,
+  H2medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(32),
+    lineHeight: verticalScale(40),
+  } as TextStyle,
+  H3bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(28),
+    lineHeight: verticalScale(36),
+  } as TextStyle,
+  H3semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(28),
+    lineHeight: verticalScale(36),
+  } as TextStyle,
+  H3medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(28),
+    lineHeight: verticalScale(36),
+  } as TextStyle,
+  H4bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(24),
+    lineHeight: verticalScale(32),
+  } as TextStyle,
+  H4semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(24),
+    lineHeight: verticalScale(32),
+  } as TextStyle,
+  H4medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(24),
+    lineHeight: verticalScale(32),
+  } as TextStyle,
+  H5bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(20),
+    lineHeight: verticalScale(28),
+  } as TextStyle,
+  H5semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(20),
+    lineHeight: verticalScale(28),
+  } as TextStyle,
+  H5medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(20),
+    lineHeight: verticalScale(28),
+  } as TextStyle,
+  H6bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H6semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H6medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H7bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H7semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H7medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  H8bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  H8semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  H8medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  H9bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  H9semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  H9medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+
+  // Paragraph Fonts
+  P1regular: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P1semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P1medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(18),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P2regular: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P2semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P2medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(24),
+  } as TextStyle,
+  P3regular: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  P3semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  P3medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(22),
+  } as TextStyle,
+  P4regular: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  P4semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  P4medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  P5bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(11),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  P5semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(11),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  P5medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(11),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+
+  // Button Fonts
+  B1bold: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B1semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B1medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(16),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B2bold: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B2semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B2medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(14),
+    lineHeight: verticalScale(20),
+  } as TextStyle,
+  B3bold: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  B3semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  B3medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(12),
+    lineHeight: verticalScale(16),
+  } as TextStyle,
+  B4bold: {
+    fontWeight: regularWeight,
+    fontSize: moderateScale(10),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+  B4semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(10),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+  B4medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(10),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+  B5bold: {
+    fontWeight: boldWeight,
+    fontSize: moderateScale(9),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+  B5semiBold: {
+    fontWeight: semiboldWeight,
+    fontSize: moderateScale(9),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+  B5medium: {
+    fontWeight: mediumWeight,
+    fontSize: moderateScale(9),
+    lineHeight: verticalScale(12),
+  } as TextStyle,
+};

package/src/theme/themes.ts

@@ -0,0 +1,20 @@
+// themes.js
+const lightTheme = {
+  colors: {
+    background: '#ffffff',
+    text: '#000000',
+    primary: '#6200ee',
+    secondary: '#03dac6',
+  },
+};
+
+const darkTheme = {
+  colors: {
+    background: '#000000',
+    text: '#ffffff',
+    primary: '#bb86fc',
+    secondary: '#03dac6',
+  },
+};
+
+export {lightTheme, darkTheme};

package/src/theme/withThemeProvider.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {ThemeProvider} from './ThemeContext';
+
+// Higher-Order Component to wrap a component with the ThemeProvider
+export const withThemeProvider = <P extends object>(
+  Component: React.ComponentType<P>,
+) => {
+  // eslint-disable-next-line react/display-name
+  return (props: P) => (
+    <ThemeProvider>
+      <Component {...props} />
+    </ThemeProvider>
+  );
+};

package/src/utils/appEnum.ts

@@ -0,0 +1,17 @@
+export enum ShapeType {
+  LINE = 'line',
+  CIRCLE = 'circle',
+}
+export enum ToggleButtonType {
+  SMALL = 'small',
+  LARGE = 'large',
+}
+export enum TextDirectType {
+  left = 'left',
+  right = 'right',
+}
+
+export enum ToggleTextType {
+  ON = 'ON',
+  OFF = 'OFF',
+}

package/src/utils/commonStyles.ts

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+
+const commonStyles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+  centeredContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  centerRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+});
+export default commonStyles;

package/src/utils/constants.ts

@@ -0,0 +1,17 @@
+export const BUTTON_TYPES = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DISABLE: 'disable',
+  TERTIARY: 'tertiary',
+  FUNCTION_PRIMARY: 'functionPrimary',
+  FUNCTION_SECONDARY: 'functionSecondary',
+  FUNCTION_NOTICE: 'functionNotice',
+  PRIMARY_TEXT: 'primaryText',
+  SECONDARY_TEXT: 'secondaryText',
+  DISABLE_TEXT: 'disableText',
+  TERTIARY_TEXT: 'tertiaryText',
+  FUNCTION_PRIMARY_TEXT: 'functionPrimaryText',
+  FUNCTION_SECONDARY_TEXT: 'functionSecondaryText',
+  FUNCTION_NOTICE_TEXT: 'functionNoticeText',
+  TEXT: 'Text',
+};

package/src/utils/deviceUtils.ts

@@ -0,0 +1,9 @@
+import {Platform} from 'react-native';
+
+export enum OS {
+  ios = 'ios',
+  android = 'android',
+}
+
+export const isIos = () => Platform.OS === OS.ios;
+export const isAndroid = () => Platform.OS === OS.android;

package/src/utils/regex.ts

@@ -0,0 +1 @@
+export const stringLengthRegex = /(\d{6})/;