feat: new components added

src/components/Button/index.tsx

@@ -1,18 +1,41 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { FC, memo } from 'react';
 
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  View,
+} from 'react-native';
 import { usePropsResolution } from '../../hooks/usePropsResolution';
 import { ButtonProps } from './types';
+import { omit } from '../../utils';
 import Text from '../Text';
 
 const Button: FC<ButtonProps> = ({ children, title, ...props }) => {
   const { ...resolvedProps } = usePropsResolution('Button', {
     style: styles.button,
-    ...props,
+    ...omit(props, 'leftIcon', 'rightIcon'),
   });
   return (
     <TouchableOpacity {...resolvedProps}>
-      {title ? <Text style={styles.buttonText}>{title}</Text> : children}
+      {props.loading ? (
+        <ActivityIndicator />
+      ) : (
+        <View
+          style={[
+            {
+              flexDirection: 'row',
+              justifyContent: 'space-around',
+            },
+            props?.contentStyle,
+          ]}
+        >
+          {props.leftIcon && props.leftIcon}
+          {title ? <Text style={styles.buttonText}>{title}</Text> : children}
+          {props.rightIcon && props.rightIcon}
+        </View>
+      )}
     </TouchableOpacity>
   );
 };

src/components/Button/types.ts

@@ -1,3 +1,4 @@
+import { ViewProps } from 'react-native';
 import { PseudoComponentProps } from '../../contexts/theme';
 import { TouchableOpacityProps } from 'react-native';
 
@@ -45,7 +46,9 @@ export interface ButtonProps
   bottom?: number | string;
   left?: number | string;
   right?: number | string;
-
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  contentStyle?: ViewProps['style'];
   disabled?: boolean;
   loading?: boolean;
   loadingColor?: string;

src/components/Input/index.tsx

@@ -1,18 +1,28 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { FC, memo } from 'react';
 import { TextInput } from 'react-native';
 import { InputProps } from './types';
 import { usePropsResolution } from '../../hooks/usePropsResolution';
 import { omit } from '../../utils';
 import FloatingLabelInput from '../TextInput';
+import Text from '../Text';
+import { styles } from '../TextInput/styles';
 
 const Input: FC<InputProps> = ({ withFloadtingLabel = false, ...props }) => {
   const { ...resolvedProps } = usePropsResolution(
-    withFloadtingLabel ? 'Input' : 'TextInput',
-    omit(props)
+    withFloadtingLabel ? 'TextInput' : 'Input',
+    withFloadtingLabel ? { ...omit(props), ...styles } : omit(props)
   );
 
   if (withFloadtingLabel) {
-    return <FloatingLabelInput {...resolvedProps} />;
+    return (
+      <>
+        <FloatingLabelInput {...resolvedProps} />
+        {props?.error && (
+          <Text style={{ color: 'red', paddingLeft: 5 }}>{props.error}</Text>
+        )}
+      </>
+    );
   }
 
   return <TextInput {...resolvedProps} />;

src/components/Input/types.ts

@@ -11,5 +11,6 @@ export interface InputProps
     PseudoComponentProps<TextInputProps['style']>,
     PseudoComponentProps<FloatTextInputProps['style']> {
   withFloadtingLabel?: boolean;
+  error?: string;
 }
 export { TextInputProps };

src/hooks/usePropsResolution.tsx

@@ -74,10 +74,18 @@ export function usePropsResolution(
         };
     }
     if (component === 'TextInput') {
+
+        const errorStyles: any = incomingProps?.error ? {
+            message: incomingProps?.error,
+            containerStyles: { ...incomingProps?.containerStyles, borderWidth: 2, borderColor: 'red' },
+            inputStyles: { ...incomingProps?.inputStyles, color: 'red' },
+            labelStyles: { ...incomingProps?.labelStyles, color: 'red' },
+        } : {}
         return {
             ...optionalStyle,
             inputStyles: { ...style?.inputStyles, ...optionalStyle?.inputStyles, ...incomingProps?.inputStyles },
             ...incomingProps,
+            ...errorStyles,
         }
     }