react-native-shared-components 0.3.1 → 0.3.3

package/lib/typescript/src/components/BaseContainer/index.d.ts

@@ -0,0 +1,24 @@
+import { type ColorValue, type TextStyle, type ViewStyle, type KeyboardAvoidingViewProps } from 'react-native';
+import { type ReactNode } from 'react';
+import { type BaseTextType } from '../BaseText';
+export interface IBaseContainer {
+    title?: string;
+    center?: ReactNode;
+    right?: ReactNode;
+    left?: ReactNode;
+    onPressLeft?: () => void;
+    onPressRight?: () => void;
+    onPressCenter?: () => void;
+    styleTitle?: TextStyle;
+    isHeader?: boolean;
+    barStyle?: 'default' | 'light-content' | 'dark-content';
+    children: ReactNode;
+    style?: ViewStyle;
+    styleHeader?: ViewStyle;
+    backgroundColorStatusBar?: ColorValue | undefined;
+    edges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+    keyboardAvoidingViewProps?: Omit<KeyboardAvoidingViewProps, 'children'>;
+    type?: BaseTextType;
+}
+export declare const BaseContainer: ({ style, title, left, right, center, onPressLeft, onPressRight, onPressCenter, styleTitle, isHeader, children, backgroundColorStatusBar, barStyle, styleHeader, edges, keyboardAvoidingViewProps, type, }: IBaseContainer) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/BaseContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,yBAAyB,EAC/B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wBAAwB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACnD,yBAAyB,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;IACxE,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,2MAkB3B,cAAc,4CAqDhB,CAAC"}

package/lib/typescript/src/components/BaseContainer/styles.d.ts

@@ -0,0 +1,17 @@
+export declare const styles: {
+    container: {
+        flex: number;
+    };
+    safeView: {
+        flex: number;
+    };
+    header: {
+        alignItems: "center";
+        justifyContent: "space-between";
+        flexDirection: "row";
+        width: "100%";
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/BaseContainer/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseContainer/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAejB,CAAC"}

package/lib/typescript/src/components/BaseText/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TextProps } from 'react-native';
+export type BaseTextType = 'ExtraBold' | 'Bold' | 'SemiBold' | 'Medium';
+export interface BaseTextProps extends TextProps {
+    type?: BaseTextType;
+    size?: number;
+    children: React.ReactNode;
+}
+export declare const BaseText: React.FC<BaseTextProps>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/BaseText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgB5C,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -1,2 +1,4 @@
-export * from './Button';
+export * from './BaseButton';
+export * from './BaseContainer';
+export * from './BaseText';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/lib/typescript/src/constants/Colors.d.ts

@@ -0,0 +1,145 @@
+export declare const Colors: {
+    bg_default_primary_light: string;
+    bg_default_primary_dark: string;
+    bg_default_secondary_light: string;
+    bg_default_secondary_dark: string;
+    bg_default_tertiary_light: string;
+    bg_default_tertiary_dark: string;
+    bg_neutral_tertiary_light: string;
+    bg_inverse_primary_light: string;
+    bg_disabled_primary_light: string;
+    bg_brand_primary: string;
+    bg_brand_secondary: string;
+    bg_brand_tertiary: string;
+    bg_brand_over_light: string;
+    bg_brand_over_dark: string;
+    bg_green_primary: string;
+    bg_green_secondary: string;
+    bg_green_tertiary: string;
+    bg_green_over_light: string;
+    bg_green_over_dark: string;
+    bg_yellow_primary: string;
+    bg_yellow_secondary: string;
+    bg_yellow_tertiary: string;
+    bg_yellow_over_light: string;
+    bg_yellow_over_dark: string;
+    bg_red_primary: string;
+    bg_red_secondary: string;
+    bg_red_tertiary: string;
+    bg_red_over_light: string;
+    bg_red_over_dark: string;
+    border_default_primary_light: string;
+    border_default_primary_dark: string;
+    border_default_secondary_light: string;
+    border_default_secondary_dark: string;
+    border_default_tertiary_light: string;
+    border_default_tertiary_dark: string;
+    border_neutral_primary_light: string;
+    border_neutral_primary_dark: string;
+    border_neutral_secondary: string;
+    border_neutral_tertiary_light: string;
+    border_neutral_tertiary_dark: string;
+    border_disabled_primary_light: string;
+    border_disabled_primary_dark: string;
+    border_disabled_secondary_light: string;
+    border_disabled_secondary_dark: string;
+    border_disabled_tertiary_light: string;
+    border_disabled_tertiary_dark: string;
+    border_brand_primary: string;
+    border_brand_secondary: string;
+    border_brand_tertiary: string;
+    border_green_primary: string;
+    border_green_secondary: string;
+    border_green_tertiary: string;
+    border_yellow_primary: string;
+    border_yellow_secondary: string;
+    border_yellow_tertiary: string;
+    border_red_primary: string;
+    border_red_secondary: string;
+    border_red_tertiary: string;
+    icon_default_primary_light: string;
+    icon_default_primary_dark: string;
+    icon_default_secondary_light: string;
+    icon_default_secondary_dark: string;
+    icon_default_tertiary_light: string;
+    icon_default_tertiary_dark: string;
+    icon_neutral_primary_light: string;
+    icon_neutral_primary_dark: string;
+    icon_neutral_secondary_light: string;
+    icon_neutral_secondary_dark: string;
+    icon_neutral_tertiary: string;
+    icon_inverse_primary_light: string;
+    icon_inverse_primary_dark: string;
+    icon_inverse_secondary_light: string;
+    icon_inverse_secondary_dark: string;
+    icon_inverse_tertiary: string;
+    icon_disabled_primary_light: string;
+    icon_disabled_primary_dark: string;
+    icon_disabled_secondary_light: string;
+    icon_disabled_secondary_dark: string;
+    icon_disabled_tertiary_light: string;
+    icon_disabled_tertiary_dark: string;
+    icon_brand_primary: string;
+    icon_brand_secondary: string;
+    icon_brand_tertiary: string;
+    icon_brand_over: string;
+    icon_green_primary: string;
+    icon_green_secondary: string;
+    icon_green_tertiary: string;
+    icon_yellow_primary: string;
+    icon_yellow_secondary: string;
+    icon_yellow_tertiary: string;
+    icon_red_primary: string;
+    icon_red_secondary: string;
+    icon_red_tertiary: string;
+    text_default_primary_light: string;
+    text_default_primary_dark: string;
+    text_default_secondary_light: string;
+    text_default_secondary_dark: string;
+    text_default_tertiary_light: string;
+    text_default_tertiary_dark: string;
+    text_neutral_primary_light: string;
+    text_neutral_primary_dark: string;
+    text_neutral_secondary_light: string;
+    text_neutral_secondary_dark: string;
+    text_neutral_tertiary: string;
+    text_inverse_primary_light: string;
+    text_inverse_primary_dark: string;
+    text_inverse_secondary_light: string;
+    text_inverse_secondary_dark: string;
+    text_inverse_tertiary: string;
+    text_disabled_primary_light: string;
+    text_disabled_primary_dark: string;
+    text_disabled_secondary_light: string;
+    text_disabled_secondary_dark: string;
+    text_disabled_tertiary_light: string;
+    text_disabled_tertiary_dark: string;
+    text_brand_primary: string;
+    text_brand_secondary: string;
+    text_brand_tertiary: string;
+    text_brand_over: string;
+    text_green_primary: string;
+    text_green_secondary: string;
+    text_green_tertiary: string;
+    text_yellow_primary: string;
+    text_yellow_secondary: string;
+    text_yellow_tertiary: string;
+    text_red_primary: string;
+    text_red_secondary: string;
+    text_red_tertiary: string;
+    overlay_4: string;
+    overlay_20_light: string;
+    overlay_20_dark: string;
+    overlay_30_light: string;
+    overlay_30_dark: string;
+    overlay_40_light: string;
+    overlay_40_dark: string;
+    overlay_60_light: string;
+    overlay_60_dark: string;
+    overlay_80_light: string;
+    overlay_80_dark: string;
+    overlay_4_light: string;
+    overlay_8_light: string;
+    overlay_70_light: string;
+};
+//# sourceMappingURL=Colors.d.ts.map

package/lib/typescript/src/constants/Colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/constants/Colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJlB,CAAC"}

package/lib/typescript/src/constants/commonStyles.d.ts

@@ -0,0 +1,10 @@
+export declare const SCREEN_WIDTH: number;
+export declare const SCREEN_HEIGHT: number;
+export declare const space_squish: ({ vertical, horizontal, }: {
+    vertical?: number;
+    horizontal?: number;
+}) => {
+    paddingVertical: number;
+    paddingHorizontal: number;
+};
+//# sourceMappingURL=commonStyles.d.ts.map

package/lib/typescript/src/constants/commonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../../src/constants/commonStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAE,MAAuC,CAAC;AACnE,eAAO,MAAM,aAAa,EAAE,MAAwC,CAAC;AAErE,eAAO,MAAM,YAAY,GAAI,2BAG1B;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;;CAKA,CAAC"}

package/lib/typescript/src/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Colors';
+export * from './commonStyles';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/constants/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,4 @@
-export declare function multiply(a: number, b: number): number;
 export * from './components';
+export * from './constants';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD;AACD,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/lib/typescript/src/utils/helper.d.ts

@@ -0,0 +1,4 @@
+export declare const filterLayoutProps: (props: any) => {
+    otherProps: any;
+};
+//# sourceMappingURL=helper.d.ts.map

package/lib/typescript/src/utils/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../../src/utils/helper.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,GAAI,OAAO,GAAG;;CAG3C,CAAC"}

package/lib/typescript/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './helper';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-shared-components",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "shared-components",
-  "source": "./src/index.tsx",
-  "main": "./lib/module/index.js",
+    "source": "./src/index.tsx",
+  "main": "./src/index.tsx",
+  "module": "./src/index.tsx",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
@@ -79,7 +80,7 @@
     "react-native": "0.76.9",
     "react-native-builder-bob": "^0.40.6",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -149,5 +150,10 @@
     "languages": "js",
     "type": "library",
     "version": "0.49.8"
+  },
+  "dependencies": {
+    "react-native-iphone-screen-helper": "^2.1.2",
+    "react-native-paper": "^5.13.3",
+    "react-native-safe-area-context": "^5.4.0"
   }
 }

package/src/components/BaseButton/index.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+  type TouchableOpacityProps,
+} from 'react-native';
+import { Colors } from '../../constants/Colors';
+import { BaseText, type BaseTextType } from '../BaseText';
+
+export type ButtonVariant = 'primary' | 'link-subtle' | 'red' | 'brand-subtle';
+export type ButtonSize = 'small' | 'regular' | 'large';
+export type ButtonType = 'common' | 'icon';
+
+export interface BaseButtonProps extends Omit<TouchableOpacityProps, 'style'> {
+  type?: ButtonType;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label?: string;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  loading?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const BaseButton: React.FC<BaseButtonProps> = ({
+  type = 'common',
+  variant = 'primary',
+  size = 'regular',
+  label,
+  icon,
+  iconPosition = 'right',
+  loading = false,
+  disabled = false,
+  style,
+  textStyle,
+  ...props
+}) => {
+  const sizeStyle = styles[`size_${size}`];
+  const textSizeStyle = styles[`text_${size}`];
+  const variantStyle = disabled
+    ? styles.variant_disabled
+    : styles[`variant_${variant}`];
+  const textVariantStyle = disabled
+    ? styles.text_disabled
+    : styles[`text_variant_${variant}`];
+
+  const getTextType = (): BaseTextType => {
+    switch (size) {
+      case 'small':
+        return 'Medium';
+      case 'regular':
+        return 'SemiBold';
+      case 'large':
+        return 'Bold';
+      default:
+        return 'SemiBold';
+    }
+  };
+
+  const getTextSize = (): number => {
+    switch (size) {
+      case 'small':
+        return 14;
+      case 'regular':
+        return 16;
+      case 'large':
+        return 20;
+      default:
+        return 16;
+    }
+  };
+
+  if (type === 'icon') {
+    return (
+      <TouchableOpacity
+        disabled={disabled || loading}
+        activeOpacity={0.7}
+        style={[
+          styles.baseButton,
+          styles.iconButton,
+          sizeStyle,
+          variantStyle,
+          style,
+        ]}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={
+              disabled
+                ? Colors.text_disabled_tertiary_light
+                : variant === 'primary' || variant === 'red'
+                  ? Colors.text_inverse_primary_light
+                  : Colors.text_brand_primary
+            }
+          />
+        ) : (
+          icon
+        )}
+      </TouchableOpacity>
+    );
+  }
+
+  // Common button with text
+  return (
+    <TouchableOpacity
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+      style={[styles.baseButton, sizeStyle, variantStyle, style]}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={
+            disabled
+              ? Colors.text_disabled_tertiary_light
+              : variant === 'primary' || variant === 'red'
+                ? Colors.text_inverse_primary_light
+                : Colors.text_brand_primary
+          }
+        />
+      ) : (
+        <>
+          {icon && iconPosition === 'left' && icon}
+          {label && (
+            <BaseText
+              type={getTextType()}
+              size={getTextSize()}
+              style={[textSizeStyle, textVariantStyle, textStyle]}
+            >
+              {label}
+            </BaseText>
+          )}
+          {icon && iconPosition === 'right' && icon}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  'baseButton': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+  },
+  'iconButton': {
+    aspectRatio: 1,
+  },
+  'size_small': {
+    height: 32,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    gap: 6,
+  },
+  'size_regular': {
+    height: 42,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 10,
+    gap: 8,
+  },
+  'size_large': {
+    height: 60,
+    paddingHorizontal: 24,
+    paddingVertical: 18,
+    borderRadius: 12,
+    gap: 12,
+  },
+
+  'variant_primary': {
+    backgroundColor: Colors.bg_brand_primary,
+    borderWidth: 0,
+  },
+  'variant_red': {
+    backgroundColor: Colors.bg_red_primary,
+    borderWidth: 0,
+  },
+  'variant_link-subtle': {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: Colors.border_brand_primary,
+  },
+  'variant_brand-subtle': {
+    backgroundColor: Colors.bg_brand_tertiary,
+    borderWidth: 1,
+    borderColor: Colors.border_brand_primary,
+  },
+  'variant_disabled': {
+    backgroundColor: Colors.bg_disabled_primary_light,
+    borderWidth: 0,
+  },
+  'text_variant_primary': {
+    color: Colors.text_inverse_primary_light,
+  },
+  'text_variant_red': {
+    color: Colors.text_inverse_primary_light,
+  },
+  'text_variant_link-subtle': {
+    color: Colors.text_brand_primary,
+  },
+  'text_variant_brand-subtle': {
+    color: Colors.text_brand_primary,
+  },
+  'text_disabled': {
+    color: Colors.text_disabled_tertiary_light,
+  },
+  'text_small': {
+    fontSize: 14,
+  },
+  'text_regular': {
+    fontSize: 16,
+  },
+  'text_large': {
+    fontSize: 20,
+  },
+});

package/src/components/BaseContainer/index.tsx

@@ -0,0 +1,108 @@
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  type ColorValue,
+  type TextStyle,
+  type ViewStyle,
+  type KeyboardAvoidingViewProps,
+} from 'react-native';
+import { type ReactNode } from 'react';
+import { styles } from './styles';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { BaseText, type BaseTextType } from '../BaseText';
+
+export interface IBaseContainer {
+  title?: string;
+  center?: ReactNode;
+  right?: ReactNode;
+  left?: ReactNode;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+  onPressCenter?: () => void;
+  styleTitle?: TextStyle;
+  isHeader?: boolean;
+  barStyle?: 'default' | 'light-content' | 'dark-content';
+  children: ReactNode;
+  style?: ViewStyle;
+  styleHeader?: ViewStyle;
+  backgroundColorStatusBar?: ColorValue | undefined;
+  edges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+  keyboardAvoidingViewProps?: Omit<KeyboardAvoidingViewProps, 'children'>;
+  type?: BaseTextType;
+}
+
+export const BaseContainer = ({
+  style,
+  title,
+  left,
+  right,
+  center,
+  onPressLeft,
+  onPressRight,
+  onPressCenter,
+  styleTitle,
+  isHeader,
+  children,
+  backgroundColorStatusBar,
+  barStyle,
+  styleHeader,
+  edges,
+  keyboardAvoidingViewProps,
+  type = 'Medium',
+}: IBaseContainer) => {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.container}
+      {...keyboardAvoidingViewProps}
+    >
+      <View style={styles.container}>
+        <StatusBar
+          backgroundColor={backgroundColorStatusBar}
+          barStyle={barStyle}
+        />
+        <SafeAreaView style={[styles.safeView, style]} edges={edges}>
+          {isHeader && (
+            <View style={[styles.header, styleHeader]}>
+              {left ? (
+                <TouchableOpacity disabled={!onPressLeft} onPress={onPressLeft}>
+                  {left}
+                </TouchableOpacity>
+              ) : (
+                <View />
+              )}
+              {center ? (
+                <TouchableOpacity
+                  disabled={!onPressCenter}
+                  onPress={onPressCenter}
+                >
+                  {center}
+                </TouchableOpacity>
+              ) : title ? (
+                <BaseText type={type} style={styleTitle}>
+                  {title}
+                </BaseText>
+              ) : (
+                <View />
+              )}
+              {right ? (
+                <TouchableOpacity
+                  disabled={!onPressRight}
+                  onPress={onPressRight}
+                >
+                  {right}
+                </TouchableOpacity>
+              ) : (
+                <View />
+              )}
+            </View>
+          )}
+          {children}
+        </SafeAreaView>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};