ui-rn 1.0.16 → 1.0.18

package/Example/index.tsx

@@ -1,19 +1,31 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import React from 'react';
 import { Block } from 'ui-rn';
+import { LinearGradient } from 'react-native-linear-gradient';
 export default function App() {
     return (
-        <View style={styles.container}>
-            <Text>App</Text>
-            <Block></Block>
-        </View>
+        <>
+
+            <LinearGradient
+                colors={['#FF6B6B', '#4ECDC4']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 0, y: 1 }}
+            >
+                <TouchableOpacity style={{ padding: 20, borderRadius: 10 }}>
+                    <Text style={{ color: 'white' }}>Gradient Block</Text>
+                </TouchableOpacity>
+            </LinearGradient>
+            <Text style={{ fontWeight: 'bold', fontStyle: 'italic', fontSize: 16, color: 'blue', alignItems: 'center' }}></Text>
+            <TouchableOpacity
+                style={{
+                    padding: 10,
+                    backgroundColor:'blue',
+                    borderRadius: 10,
+                }}
+            >
+                <Text style={{ color: 'white', alignItems: 'center' }}>Press Me</Text>
+            </TouchableOpacity>
+        </>
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-});

package/README.md

@@ -1,7 +1,7 @@
 # <div align="center">UI-RN</div>
 
 <div align="center">
-  <img src="https://img.shields.io/npm/v/ui-rn.svg?version=1.0.16" alt="npm version" />
+  <img src="https://img.shields.io/npm/v/ui-rn.svg?version=1.0.17" alt="npm version" />
   <img src="https://img.shields.io/npm/dm/ui-rn.svg" alt="npm downloads" />
   <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license" />
 </div>
@@ -36,8 +36,8 @@ npm install ui-rn
 Here's a simple example to get you started:
 
 ```tsx
-import { Block, Text, Icon, Touch, Layout, LoadingView } from "ui-rn";
-import React from "react";
+import {Block, Text, Icon, Touch, Layout, LoadingView} from 'ui-rn';
+import React from 'react';
 
 export default function Example() {
   return (
@@ -46,15 +46,14 @@ export default function Example() {
         mar-5
         pad-5
         red
-        background={["red", "blue"]}
-        positionOption={{ top: 10, left: 5 }}
+        background={['red', 'blue']}
+        positionOption={{top: 10, left: 5}}
         alignCenter
         borderCircle
         mid
         row
         width-150
-        height-300
-      >
+        height-300>
         <Text size-14 red toUpperCase italic bold>
           Hello
         </Text>
@@ -72,6 +71,48 @@ export default function Example() {
 <details>
 <summary>The <code>Block</code> component is a versatile container that supports various styling options and layouts.</summary>
 
+#### Example
+
+```tsx
+// Basic Block
+<LinearGradient
+    colors={['#FF6B6B', '#4ECDC4']}
+    start={{ x: 0, y: 0 }}
+    end={{ x: 0, y: 1 }}
+>
+    <TouchableOpacity style={{ padding: 20, borderRadius: 10 }}>
+        <Text style={{ color: 'white' }}>Gradient Block</Text>
+    </TouchableOpacity>
+</LinearGradient>
+
+
+// Block with gradient
+<Block
+  background={['#FF6B6B', '#4ECDC4']}
+  gradient="vertical"
+  pad-20
+  borderR-10
+>
+  <Text white>Gradient Block</Text>
+</Block>
+
+// Block with shadow
+<Block
+  shadowOption={{
+    color: '#000',
+    width: 0,
+    height: 2,
+    opacity: 0.25,
+    radius: 3.84,
+    elevation: 5
+  }}
+  pad-15
+  bg-white
+>
+  <Text>Shadow Block</Text>
+</Block>
+```
+
 #### Block Props
 
 | Prop             | Type                                                                                                       | Description                      |
@@ -162,6 +203,25 @@ export default function Example() {
 <details>
 <summary>The <code>Text</code> component provides various text styling options.</summary>
 
+#### Example
+
+```tsx
+// Basic Text
+<Text style={{ fontWeight: 'bold', fontStyle: 'italic', fontSize: 16, color: 'blue', alignItems: 'center' }}>Hello World</Text>
+
+// new
+<Text
+  bold
+  italic
+  size-16
+  color="blue"
+  center
+>
+  Hello World
+</Text>
+
+```
+
 #### Text Props
 
 | Prop Style  | Type                               | Description           |
@@ -182,6 +242,24 @@ export default function Example() {
 <details>
 <summary>The <code>Icon</code> component supports various icon libraries.</summary>
 
+#### Example
+
+```tsx
+// Basic Icon
+<>
+<MaterialIcons name="home" size={24} />
+<FontAwesome name="heart" size={24} />
+<Ionicons name="star" size={24} />
+</>
+
+// Different Icon Types
+<>
+  <Icon name="home" type="MaterialIcons" size-24 />
+  <Icon name="heart" type="FontAwesome" size-24 color="red" />
+  <Icon name="star" type="Ionicons" size-24 color="gold" />
+</>
+```
+
 #### Icon Props
 
 | Prop Style | Type    | Description       |
@@ -213,6 +291,30 @@ export default function Example() {
 <details>
 <summary>The <code>Touch</code> component is a touchable wrapper with feedback effects.</summary>
 
+#### Example
+
+```tsx
+// Basic Button
+<TouchableOpacity
+    style={{
+        padding: 10,
+        backgroundColor:'blue',
+        borderRadius: 10,
+    }}
+>
+    <Text style={{ color: 'white', alignItems: 'center' }}>Press Me</Text>
+</TouchableOpacity>
+
+// Button with ripple effect
+<Touch
+  pad-10
+  bg-blue
+  borderR-10
+>
+  <Text white center>Press Me</Text>
+</Touch>
+```
+
 #### Touch Props
 
 | Prop Style     | Type       | Description                     |
@@ -230,17 +332,71 @@ export default function Example() {
 <details>
 <summary>The <code>Layout</code> component provides a base layout structure with safe area handling.</summary>
 
+#### Example
+
+```tsx
+// Layout with Safe Areas
+<Layout forceInset={{top: 'always'}} forceInsetBot={{vertical: 'never'}}>
+  <Block pad-20>
+    <Text>Content with Safe Areas</Text>
+  </Block>
+</Layout>
+```
+
 #### Layout Props
 
-| Prop Style      | Type              | Description             |
-| --------------- | ----------------- | ----------------------- |
-| statusBarStyle  | 'dark' \| 'light' | Status bar style        |
-| statusBarHidden | boolean           | Hide status bar         |
-| safeAreaTop     | boolean           | Enable top safe area    |
-| safeAreaBottom  | boolean           | Enable bottom safe area |
-| safeAreaLeft    | boolean           | Enable left safe area   |
-| safeAreaRight   | boolean           | Enable right safe area  |
+| Prop Style    | Type                 | Description                                       | Default Value                                           |
+| ------------- | -------------------- | ------------------------------------------------- | ------------------------------------------------------- |
+| children      | ReactNode            | Child components to be rendered inside layout     | -                                                       |
+| forceInset    | ForceInsetProp       | Safe area inset configuration for top view        | { top: 'always', horizontal: 'never', bottom: 'never' } |
+| forceInsetBot | ForceInsetProp       | Safe area inset configuration for bottom view     | { vertical: 'never' }                                   |
+| styleBot      | StyleProp<ViewStyle> | Custom style for bottom SafeAreaView              | undefined                                               |
+| style         | StyleProp<ViewStyle> | Custom style for top SafeAreaView                 | undefined                                               |
+| isBack        | boolean              | Whether to show back button                       | false                                                   |
+| disable       | boolean              | Disable SafeAreaView and render children directly | false                                                   |
 
+#### Usage Examples
+
+```tsx
+// Basic usage
+<Layout>
+  <Text>Content</Text>
+</Layout>
+
+// With custom safe area insets
+<Layout
+  forceInset={{ top: 'always', bottom: 'always' }}
+  forceInsetBot={{ vertical: 'always' }}
+>
+  <Text>Content with full safe area</Text>
+</Layout>
+
+// With custom styles
+<Layout
+  style={{ backgroundColor: 'white' }}
+  styleBot={{ padding: 20 }}
+>
+  <Text>Styled content</Text>
+</Layout>
+
+// Disable safe area
+<Layout disable>
+  <Text>Content without safe area</Text>
+</Layout>
+```
+
+#### ForceInsetProp Types
+
+The `forceInset` and `forceInsetBot` props accept the following values:
+
+- `'always'`: Always apply the safe area inset
+- `'never'`: Never apply the safe area inset
+- `'top'`: Apply inset only to the top
+- `'bottom'`: Apply inset only to the bottom
+- `'left'`: Apply inset only to the left
+- `'right'`: Apply inset only to the right
+- `'horizontal'`: Apply inset to both left and right
+- `'vertical'`: Apply inset to both top and bottom
 </details>
 
 ### LoadingView
@@ -248,17 +404,13 @@ export default function Example() {
 <details>
 <summary>The <code>LoadingView</code> component displays a loading indicator with optional overlay.</summary>
 
-#### LoadingView Props
-
-| Prop Style | Type                           | Description                 |
-| ---------- | ------------------------------ | --------------------------- |
-| visible    | boolean                        | Show/hide loading view      |
-| loading    | boolean                        | Show/hide loading indicator |
-| color      | string                         | Color of loading indicator  |
-| type       | 'spinner' \| 'dots' \| 'pulse' | Type of loading indicator   |
-| text       | string                         | Loading text                |
-| textColor  | string                         | Color of loading text       |
-| textSize   | number                         | Size of loading text        |
+#### Example
+
+```tsx
+<Host>
+  <LoadingView />
+</Host>
+```
 
 </details>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-rn",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "repository": "https://github.com/package-dev/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",

package/src/Icon/index.tsx

@@ -23,6 +23,11 @@ import Octicons from 'react-native-vector-icons/Octicons'
 import Fontisto from 'react-native-vector-icons/Fontisto'
 import { IconProps } from 'react-native-vector-icons/Icon'
 import { isArray, isString } from 'underscore'
+
+/**
+ * Collection of React Native Vector Icons
+ * Provides access to various icon sets from react-native-vector-icons
+ */
 export const RNVectorIcon = {
     Ionicons,
     AntDesign,
@@ -37,20 +42,59 @@ export const RNVectorIcon = {
     Octicons,
     Fontisto
 }
+
+/** Type definition for available icon sets */
 export type IconType = keyof typeof RNVectorIcon
+
 import { Props, } from './PropsStyle'
 import { makeProps } from './makeProps'
+
+/**
+ * IconApp component that provides a unified interface for using various icon sets
+ * Supports touch interaction and custom styling
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <IconApp name="home" />
+ * 
+ * // Custom size and color
+ * <IconApp 
+ *   name="star" 
+ *   size={30} 
+ *   color="gold" 
+ * />
+ * 
+ * // With touch interaction
+ * <IconApp 
+ *   name="heart" 
+ *   onPress={() => console.log('pressed')} 
+ * />
+ * 
+ * // Using different icon set
+ * <IconApp 
+ *   type="FontAwesome" 
+ *   name="user" 
+ * />
+ * ```
+ */
 export default class IconApp extends React.PureComponent<Props> {
+    /** Default props for the IconApp component */
     static defaultProps: Props = {
         size: 23,
         color: 'gray',
         name: 'home',
     }
+
+    /** Internal state for computed props */
     res: { color: string, style: any, size: number }
+
     constructor(props) {
         super(props)
         this.res = makeProps(props)
     }
+
     render() {
         const { size, color, style } = this.res
         // console.debug('res', this.res)
@@ -93,6 +137,9 @@ export default class IconApp extends React.PureComponent<Props> {
     }
 }
 
+/**
+ * Default styles for the IconApp component
+ */
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',

package/src/Loading/Loading.tsx

@@ -9,17 +9,53 @@ import {
     Text
 } from 'react-native'
 import LoadingType, { LoadingTypeI } from './LoadingType'
+
+/**
+ * Props for the Loading component
+ * @interface Props
+ */
 export type Props = {
+    /** Custom style for the loading box container */
     boxStyle?: ViewProps['style']
+    /** Custom style for the main container */
     containerStyle?: ViewProps['style']
 }
+
+/**
+ * Internal state of the Loading component
+ * @interface State
+ */
 type State = {
+    /** Controls the visibility of the loading modal */
     visible: boolean,
+    /** Determines if the loading can be dismissed by touch */
     touch: boolean,
+    /** Current progress value (0-100) */
     progress: number,
+    /** Controls whether to show progress indicator */
     progressShow: boolean,
+    /** Type of loading indicator to display */
     type: LoadingTypeI
 }
+
+/**
+ * Loading component that displays a modal with customizable loading indicators
+ * and optional progress tracking.
+ * 
+ * @example
+ * ```tsx
+ * const loading = useRef<Loading>(null);
+ * 
+ * // Show loading
+ * loading.current?.show();
+ * 
+ * // Show loading with progress
+ * loading.current?.openProgress({ progress: 50, progressShow: true });
+ * 
+ * // Hide loading
+ * loading.current?.hide();
+ * ```
+ */
 export default class Loading extends PureComponent<Props, State> {
     state: State
     constructor(props: any) {
@@ -32,13 +68,31 @@ export default class Loading extends PureComponent<Props, State> {
             type: 'BallIndicator'
         }
     }
+
+    /**
+     * Shows the loading modal
+     * @param touch - Whether the loading can be dismissed by touch (default: true)
+     */
     show(touch = true) {
         this.setState({ visible: true, touch })
     }
+
+    /**
+     * Hides the loading modal and resets progress
+     */
     hide() {
         this.setState({ visible: false, progress: 0, progressShow: false })
     }
+
+    /**
+     * Updates the progress state
+     * @param e - Object containing progress updates
+     */
     openProgress(e: any) { this.setState(prev => ({ ...prev, ...e })) }
+
+    /**
+     * Handles touch events to dismiss the loading modal
+     */
     onPressOut() {
         if (this.state.touch) {
             this.hide()
@@ -49,16 +103,27 @@ export default class Loading extends PureComponent<Props, State> {
     }
     componentWillUnmount(): void {
     }
+
+    /**
+     * Renders the loading indicator based on the selected type
+     * @returns React element for the loading indicator
+     */
     renderIcon() {
         if (this.state.type) return React.createElement(LoadingType[this.state.type], { color: '#4481EB' })
         return null
     }
+
+    /**
+     * Renders the progress text if progressShow is true
+     * @returns React element for the progress text
+     */
     renderProgress() {
         if (this.state.progressShow) {
             return (<Text style={styles.text}>{this.state.progress}{'%'}</Text>)
         }
         return null
     }
+
     render() {
         return (
             <Modal

package/src/Loading/LoadingType.tsx

@@ -9,6 +9,22 @@ import {
     UIActivityIndicator,
     WaveIndicator,
 } from 'react-native-indicators';
+
+/**
+ * Collection of loading indicator components from react-native-indicators
+ * Each indicator provides a different visual style for loading states
+ * 
+ * Available indicators:
+ * - BallIndicator: Animated bouncing balls
+ * - BarIndicator: Animated bars
+ * - DotIndicator: Animated dots
+ * - MaterialIndicator: Material design style loading indicator
+ * - PacmanIndicator: Pacman-style loading animation
+ * - PulseIndicator: Pulsing animation
+ * - SkypeIndicator: Skype-style loading indicator
+ * - UIActivityIndicator: Native iOS-style activity indicator
+ * - WaveIndicator: Wave-like animation
+ */
 const LoadingType = {
     BallIndicator,
     BarIndicator,
@@ -20,5 +36,11 @@ const LoadingType = {
     UIActivityIndicator,
     WaveIndicator,
 }
+
+/**
+ * Type definition for loading indicator names
+ * Represents the keys of the LoadingType object
+ */
 export type LoadingTypeI = keyof typeof LoadingType
+
 export default LoadingType

package/src/Loading/index.tsx

@@ -1,22 +1,55 @@
 import React, { PureComponent, ReactNode } from "react"
 import RNLoading, { Props } from "./Loading"
 
+/**
+ * Reference to the Loading component instance
+ */
 const loadingRef = React.createRef<RNLoading>()
+
+/**
+ * Static Loading class that provides global access to loading functionality
+ * This class allows showing and hiding the loading indicator from anywhere in the app
+ * 
+ * @example
+ * ```tsx
+ * // Show loading
+ * Loading.show();
+ * 
+ * // Hide loading
+ * Loading.hide();
+ * ```
+ */
 export class Loading {
+    /**
+     * Shows the loading indicator
+     */
     static show() {
         loadingRef.current?.show()
     }
+
+    /**
+     * Hides the loading indicator
+     */
     static hide() {
         loadingRef.current?.hide()
     }
 }
+
+/**
+ * LoadingView component that renders the Loading component
+ * This component should be mounted at the root level of your app
+ * to enable global loading functionality
+ * 
+ * @example
+ * ```tsx
+ * // In your App.tsx or root component
+ * <LoadingView />
+ * ```
+ */
 export default class LoadingView extends PureComponent<Props> {
     render(): ReactNode {
         return (
-
             <RNLoading ref={loadingRef} {...this.props} />
-
         )
-
     }
 }

package/src/Touch/Props.ts

@@ -2,48 +2,94 @@ import { IColor } from "../config"
 import { StyleProp, FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native"
 import { MakeProp } from "./makeStyle"
 
+/**
+ * Interface for application-specific props that extend React Native's style properties
+ * @interface PropsApp
+ */
 export interface PropsApp {
+  /** Border radius for top corners */
   borderUpRadius?: number
+  /** Border radius for bottom corners */
   borderDownRadius?: number
+  /** Flexbox alignment along cross axis */
   alignItems?: FlexStyle['alignItems']
+  /** Flexbox alignment for self */
   alignSelf?: FlexStyle['alignSelf']
+  /** Flexbox alignment along main axis */
   justifyContent?: FlexStyle['justifyContent']
+  /** Border style (solid, dashed, dotted) */
   borderStyle?: ViewStyle['borderStyle']
+  /** Opacity of the view */
   opacity?: ViewStyle['opacity']
+  /** Overflow behavior */
   overflow?: ViewStyle['overflow']
+  /** Set width to 100% */
   w100?: boolean
+  /** Set height to 100% */
   h100?: boolean
+  /** Center content both horizontally and vertically */
   mid?: boolean
+  /** Set flex direction to row */
   row?: boolean
+  /** Center content horizontally */
   alignCenter?: boolean
+  /** Center content vertically */
   justifyCenter?: boolean
+  /** Make border radius circular */
   borderCircle?: boolean
+  /** Center content horizontally and space between vertically */
   centerBetween?: boolean
+  /** Space content evenly along main axis */
   justifyBetween?: boolean
+  /** Hide overflow content */
   overHidden?: boolean
+  /** Set width and height to same value */
   square?: number
+  /** Set width to 100% */
   width100?: boolean
+  /** Set height to 100% */
   height100?: boolean
+  /** Background color or gradient colors */
   background?: Array<IColor> | Array<(string)> | string
+  /** Gradient direction */
   gradient?: 'vertical' | 'horizontal'
+  /** Set flex to 1 */
   flexOne?: boolean
+  flex1?: boolean
+  /** Shadow color or boolean to enable default shadow */
   shadowColor?: string | boolean
+  /** Border options for each side */
   borderOption?: { top?: number, left?: number, right?: number, bottom?: number, color?: string }
+  /** Position options for absolute positioning */
   positionOption?: { top?: number, left?: number, right?: number, bottom?: number }
+  /** Padding options for each side */
   paddingOption?: { all?: number, top?: number, left?: number, right?: number, bottom?: number }
+  /** Padding options for vertical and horizontal */
   paddingFlex?: { vertical?: number, horizontal?: number }
+  /** Margin options for vertical and horizontal */
   marginFlex?: { vertical?: number, horizontal?: number }
+  /** Margin options for each side */
   marginOption?: { all?: number, top?: number, left?: number, right?: number, bottom?: number }
+  /** Shadow configuration options */
   shadowOption?: { color?: string, width?: number, height?: number, opacity?: number, radius?: number, elevation?: number }
+  /** Custom style character */
   styleChar?: string
+  /** Set width to screen width */
   widthScreen?: boolean
+  /** Set height to screen height */
   heightScreen?: boolean
-
 }
 
+/**
+ * Main Props interface that combines TouchableWithoutFeedbackProps, PropsApp, and MakeProp
+ * @interface Props
+ */
 //@ts-ignore
 export interface Props extends TouchableWithoutFeedbackProps, PropsApp, MakeProp {
+  /** Child components */
   children?: React.ReactNode
+  /** Hide the component */
   hidden?: boolean
+  /** Opacity when pressed */
   activeOpacity?: number
 } 

package/src/Touch/Style.ts

@@ -4,15 +4,50 @@ import { Props } from './Props'
 import { Colors } from "../config";
 import { makeStyle } from "./makeStyle";
 
+/**
+ * Style utility function that generates React Native styles based on provided props
+ * This function combines various style properties into a single style object
+ * 
+ * @param props - Style properties object containing various style configurations
+ * @returns Array containing base styles and computed styles
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <View style={Style({ mid: true, row: true })}>
+ * 
+ * // With position options
+ * <View style={Style({ 
+ *   positionOption: { top: 10, left: 20 },
+ *   paddingOption: { all: 10 }
+ * })}>
+ * 
+ * // With shadow
+ * <View style={Style({ 
+ *   shadowOption: {
+ *     color: '#000',
+ *     width: 2,
+ *     height: 2,
+ *     opacity: 0.5,
+ *     radius: 5
+ *   }
+ * })}>
+ * ```
+ */
 export const Style: any = (props: Props) => {
 
   const PropsApp = StyleSheet.flatten([
+    // Layout properties
     props.alignItems && { alignItems: props.alignItems },
     props.justifyContent && { justifyContent: props.justifyContent },
     props.borderStyle && { borderStyle: props.borderStyle },
     props.overflow && { overflow: props.overflow },
+
+    // Border radius properties
     props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
     props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
+
+    // Layout shortcuts
     props.mid && { alignItems: 'center', justifyContent: 'center' },
     props.row && { flexDirection: 'row' },
     props.width100 && { width: '100%' },
@@ -25,7 +60,7 @@ export const Style: any = (props: Props) => {
     props.overHidden && { overflow: 'hidden' },
     props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
 
-    //
+    // Position options
     props.positionOption && {
       position: 'absolute',
       top: props.positionOption?.top,
@@ -33,18 +68,24 @@ export const Style: any = (props: Props) => {
       left: props.positionOption?.left,
       right: props.positionOption?.right,
     },
+
+    // Padding options
     props.paddingOption && {
       paddingLeft: props.paddingOption?.all || props.paddingOption?.left,
       paddingTop: props.paddingOption?.all || props.paddingOption?.top,
       paddingRight: props.paddingOption?.all || props.paddingOption?.right,
       paddingBottom: props.paddingOption?.all || props.paddingOption?.bottom,
     },
+
+    // Margin options
     props.marginOption && {
       marginLeft: props.marginOption?.all || props.marginOption?.left,
       marginTop: props.marginOption?.all || props.marginOption?.top,
       marginRight: props.marginOption?.all || props.marginOption?.right,
       marginBottom: props.marginOption?.all || props.marginOption?.bottom,
     },
+
+    // Border options
     props.borderOption && {
       borderLeftWidth: props.borderOption.left,
       borderTopWidth: props.borderOption.top,
@@ -52,6 +93,8 @@ export const Style: any = (props: Props) => {
       borderRightWidth: props.borderOption.right,
       borderColor: props.borderOption.color,
     },
+
+    // Shadow options
     !isEmpty(props.shadowOption) && {
       shadowColor: props.shadowOption?.color,
       shadowOffset: {
@@ -62,6 +105,8 @@ export const Style: any = (props: Props) => {
       shadowRadius: props.shadowOption?.radius,
       elevation: props.shadowOption?.elevation,
     },
+
+    // Default shadow
     props.shadowColor && {
       shadowColor: isString(props.shadowColor) ? props.shadowColor : '#000',
       shadowOffset: { width: 2, height: 2, },
@@ -69,14 +114,17 @@ export const Style: any = (props: Props) => {
       shadowRadius: 10,
       elevation: 2,
     },
+
+    // Width and height shortcuts
     props.w100 && { width: '100%' },
     props.h100 && { height: '100%' },
-
+    props.flex1 && { flex: 1 },
+    props.flexOne && { flex: 1 },
+    // Screen dimensions
     props.widthScreen && { width: Dimensions.get('screen').width },
     props.heightScreen && { height: Dimensions.get('screen').height },
-
-
   ])
+
   return [
     makeStyle(props),
     PropsApp,

package/src/Touch/Touch.tsx

@@ -6,6 +6,39 @@ import { isArray, isString } from 'underscore'
 import LinearGradient from 'react-native-linear-gradient'
 
 type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
+
+/**
+ * Touch component that extends TouchableOpacity with additional styling capabilities
+ * Supports gradient backgrounds and custom styling options
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Touch onPress={() => console.log('pressed')}>
+ *   <Text>Press me</Text>
+ * </Touch>
+ * 
+ * // With gradient background
+ * <Touch 
+ *   background={['#ff0000', '#00ff00']}
+ *   gradient="vertical"
+ *   onPress={() => console.log('pressed')}
+ * >
+ *   <Text>Gradient Button</Text>
+ * </Touch>
+ * 
+ * // With custom styling
+ * <Touch 
+ *   mid={true}
+ *   row={true}
+ *   paddingOption={{ all: 10 }}
+ *   onPress={() => console.log('pressed')}
+ * >
+ *   <Text>Styled Button</Text>
+ * </Touch>
+ * ```
+ */
 const Touch = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props }, ref) => {
   if (props?.hidden) return <></>
   //@ts-ignore

package/src/Touch/makeStyle.ts

@@ -1,5 +1,9 @@
 import { StyleSheet } from "react-native";
 import { isNaN, isNumber } from "underscore";
+
+/**
+ * Enum of predefined color names that can be used for background colors
+ */
 enum COLORS {
     "white" = 1,
     "red",
@@ -11,8 +15,14 @@ enum COLORS {
     "gray",
     "primary"
 }
+
+/** Type for color modifiers that can be used as boolean flags */
 type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
 
+/**
+ * Mapping of short property names to their full React Native style property names
+ * This allows for shorter, more convenient style property names
+ */
 const SHORT_VARIATIONS = {
     bg: "backgroundColor",
     background: "backgroundColor",
@@ -54,10 +64,35 @@ const SHORT_VARIATIONS = {
     right: 'right',
     opacity: 'opacity'
 };
+
+/** Type for short property names */
 export type ShortKey = keyof typeof SHORT_VARIATIONS;
+
+/** Type for converting string keys to a record of boolean/number/string values */
 export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
+
+/** Type combining short property names and color modifiers */
 export type MakeProp = Convert<ShortKey> & ColorModifiers
 
+/**
+ * Creates a React Native style object from props using short property names
+ * Supports color names, hyphenated properties, and direct style properties
+ * 
+ * @param props - Object containing style properties
+ * @returns React Native style object
+ * 
+ * @example
+ * ```tsx
+ * // Using color names
+ * makeStyle({ white: true }) // { backgroundColor: 'white' }
+ * 
+ * // Using hyphenated properties
+ * makeStyle({ 'pad-10': true }) // { padding: 10 }
+ * 
+ * // Using direct properties
+ * makeStyle({ width: 100 }) // { width: 100 }
+ * ```
+ */
 export const makeStyle = (props: { [key: string]: any }) => {
     const style: { [key: string]: number | string } = {};
     Object.keys(props).forEach((key) => {