ui-rn 1.0.0

package/Example/index.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { Polygon, Svg } from 'react-native-svg'
+export default function Hexagon({ width = 100, stroke = "black", strokeWidth = "2", fill = "lightblue" }) {
+    const diameter = width
+    const radius = (diameter / 2)
+    const m = (Math.sqrt(3) / 2) * radius// Math.sin(60) * radius //-> x
+    const n = (1 / 2) * radius//Math.cos(60) * radius//-> y
+    const hexagonPoints = [
+        { x: radius, y: 0 },
+        { x: radius + m, y: radius - n },//60
+        { x: radius + m, y: radius + n },
+        { x: radius, y: diameter },//180
+        { x: radius - m, y: radius + n },
+        { x: radius - m, y: radius - n },
+        { x: radius, y: 0 },
+    ]
+    const points = hexagonPoints.map(point => `${point.x},${point.y}`).join(' ');
+    return (
+        <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+            <Svg height={diameter} width={width}>
+                <Polygon points={points} fill={fill} stroke={stroke} strokeWidth={strokeWidth} />
+            </Svg>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({})

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Phạm Trần Quang Hà 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+Install:
+
+```js
+npm install ui-rn
+```
+
+Example :
+
+```tsx
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import Hexagon from 'ui-rn';
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>App</Text>
+      <Block></Block>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```

package/ZoomImg.tsx

@@ -0,0 +1,206 @@
+import { Animated, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useEffect } from 'react'
+import { Image, ImageProps } from 'react-native'
+import { ImageZoom, ZoomableRef } from '@likashefqet/react-native-image-zoom';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Dimensions } from 'react-native';
+import { isNumber } from 'underscore';
+import { Platform } from 'react-native';
+import { StatusBar } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view'
+
+
+const { width, height } = Dimensions.get('screen')
+const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 };
+const TIME = 50
+interface ZoomImageProps extends ImageProps {
+    uri: string
+}
+interface ZoomImageState {
+    visible: boolean
+    disableZoonOut: boolean
+}
+export default class ZoomImg extends React.Component<ZoomImageProps, ZoomImageState> {
+    ref = React.createRef<ZoomableRef>()
+    scale: number = 1
+    scale_v = 0.3
+    _startZoomIn: any
+    _startZoomOut: any
+    constructor(props: ZoomImageProps) {
+        super(props)
+        this.state = {
+            visible: false,
+            disableZoonOut: true
+        }
+        this.zoomIn = this.zoomIn.bind(this)
+        this.zoomOut = this.zoomOut.bind(this)
+        this.startZoomIn = this.startZoomIn.bind(this)
+        this.stopZoomIn = this.stopZoomIn.bind(this)
+        this.startZoomOut = this.startZoomOut.bind(this)
+        this.stopZoomOut = this.stopZoomOut.bind(this)
+
+    }
+    onZoom(e?: any) { }
+    zoomIn() {
+        const { disableZoonOut } = this.state
+        if (disableZoonOut) { this.setState({ disableZoonOut: false }) }
+        this.scale = this.scale + this.scale_v
+        this.ref.current?.zoom({ scale: this.scale, x: width / 2, y: height / 2 })
+    }
+    zoomOut() {
+        if (this.scale - this.scale_v <= 1) {
+            this.ref.current?.zoom({ scale: 1, x: 0, y: 0 })
+            this.setState({ disableZoonOut: true })
+            return
+        }
+        this.scale = this.scale - this.scale_v
+        this.ref.current?.zoom({ scale: this.scale, x: width / 2, y: height / 2 })
+    }
+    startZoomIn() { this._startZoomIn = setInterval(() => { this.zoomIn() }, TIME); }
+    stopZoomIn() { if (this._startZoomIn) clearInterval(this._startZoomIn) }
+    startZoomOut() { this._startZoomOut = setInterval(() => { this.zoomOut() }, TIME); }
+    stopZoomOut() { if (this._startZoomOut) clearInterval(this._startZoomOut) }
+
+    open() { this.setState({ visible: true }) }
+    close() { this.setState({ visible: false }) }
+    render(): React.ReactNode {
+        const { uri, style, source } = this.props
+        const { visible, disableZoonOut, } = this.state
+        const styleButton = { hitSlop: HIT_SLOP }
+        if (isNumber(source)) return <Image source={source} style={style} />
+        //@ts-ignore
+        const value = uri ?? source.uri
+        return (
+            <>
+                <TouchableOpacity onPress={() => this.open()}>
+                    <Image source={{ uri: value }} style={style} />
+                </TouchableOpacity>
+                <Modal visible={visible} presentationStyle='fullScreen'>
+                    <StatusBarManager presentationStyle='overFullScreen' />
+                    <SafeAreaView forceInset={{ top: 'always', }} style={{ flex: 1, backgroundColor: '#000' }}>
+                        <GestureHandlerRootView style={styles.container}>
+                            <View style={[styles.header]}>
+                                <SafeAreaView style={styles.root}>
+                                    <TouchableOpacity style={styles.closeButton} onPress={() => this.close()} hitSlop={HIT_SLOP}>
+                                        <Text style={styles.closeText}>✕</Text>
+                                    </TouchableOpacity>
+                                    <TouchableOpacity style={styles.closeButton} onPress={this.zoomIn} onLongPress={this.startZoomIn} onPressOut={this.stopZoomIn} {...styleButton}>
+                                        <Text style={[styles.closeText, styles.actionText]}>+</Text>
+                                    </TouchableOpacity>
+                                    <TouchableOpacity style={[styles.closeButton, { backgroundColor: disableZoonOut ? "#0000001F" : "#00000077" }]} disabled={disableZoonOut} onPress={this.zoomOut} onLongPress={this.startZoomOut} onPressOut={this.stopZoomOut} {...styleButton}>
+                                        <Text style={[styles.closeText, styles.actionText]}>-</Text>
+                                    </TouchableOpacity>
+                                </SafeAreaView>
+                            </View>
+                            <ImageZoom
+                                ref={this.ref}
+                                uri={value}
+                                minScale={1}
+                                maxScale={3}
+                                // scale={4}
+                                doubleTapScale={3}
+                                isSingleTapEnabled
+                                isDoubleTapEnabled
+                                onInteractionStart={() => {
+                                    console.log('onInteractionStart');
+                                    this.onZoom();
+                                }}
+                                onInteractionEnd={() => console.log('onInteractionEnd')}
+                                onPanStart={() => console.log('onPanStart')}
+                                onPanEnd={() => console.log('onPanEnd')}
+                                onPinchStart={() => console.log('onPinchStart')}
+                                onPinchEnd={() => console.log('onPinchEnd')}
+                                onSingleTap={() => console.log('onSingleTap')}
+                                onDoubleTap={(zoomType) => {
+                                    console.log('onDoubleTap', zoomType);
+                                    this.onZoom(zoomType);
+                                }}
+                                onProgrammaticZoom={(zoomType) => {
+                                    console.log('onZoom', zoomType);
+                                    this.onZoom(zoomType);
+                                }}
+                                style={styles.image}
+                                onResetAnimationEnd={(finished, values) => {
+                                    console.log('onResetAnimationEnd', finished);
+                                    console.log('lastScaleValue:', values?.SCALE.lastValue);
+                                    // onAnimationEnd(finished);
+                                }}
+                                resizeMode="contain"
+                            />
+                        </GestureHandlerRootView >
+                    </SafeAreaView>
+                </Modal>
+            </>
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#000",
+    },
+    image: {
+        width: width,
+        height: height,
+        resizeMode: 'contain'
+    },
+    header: {
+        position: "absolute",
+        width: "100%",
+        zIndex: 1,
+        top: 0,
+    },
+    action: {
+        position: "absolute",
+        width: "100%",
+        zIndex: 1,
+        top: 100,
+    },
+    root: {
+        alignItems: "flex-end",
+    },
+    closeButton: {
+        marginRight: 8,
+        marginTop: 8,
+        width: 44,
+        height: 44,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 22,
+        backgroundColor: "#00000077",
+    },
+    closeText: {
+        lineHeight: 22,
+        fontSize: 19,
+        textAlign: "center",
+        color: "#FFF",
+        includeFontPadding: false,
+    },
+    actionButton: {
+        marginRight: 5,
+        marginTop: 8,
+        width: 40,
+        height: 40,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 22,
+        backgroundColor: "#00000077",
+    },
+    actionText: {
+        fontSize: 24
+    }
+})
+const StatusBarManager = ({ presentationStyle, }: { presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen" | undefined; }) => {
+    if (Platform.OS === "ios" || presentationStyle !== "overFullScreen") {
+        return null;
+    }
+    //Can't get an actual state of app status bar with default RN. Gonna rely on "presentationStyle === overFullScreen" prop and guess application status bar state to be visible in this case.
+    StatusBar.setHidden(true);
+    useEffect(() => {
+        StatusBar.setHidden(true);
+        return () => StatusBar.setHidden(false);
+    }, []);
+    return null;
+};

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "ui-rn",
+  "version": "1.0.0",
+  "repository": "https://github.com/phamha98/ui-rn",
+  "description": "ui-rn",
+  "author": "Phamha98",
+  "main": "src/index.tsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "license": "ISC",
+  "keywords": [
+    "ui-rn"
+  ]
+}

package/src/Dropdown.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Platform, StatusBar } from "react-native";
+import DropdownAlert from "react-native-dropdownalert";
+const ref = React.createRef<DropdownAlert>()
+
+export default function AlertApp() {
+    return (
+        <DropdownAlert
+            ref={ref}
+            inactiveStatusBarBackgroundColor={'green'}
+            updateStatusBar={false}
+            errorColor={'#B57F00'}
+            successColor={'#238209'}
+            // errorImageSrc={Images('logo')}
+            // successImageSrc={Images('logo')}
+            imageStyle={{
+                padding: 8,
+                width: 36,
+                height: 36,
+                alignSelf: 'center',
+                borderRadius: 23,
+            }}
+            elevation={40}
+            containerStyle={{ backgroundColor: 'pink' }}
+            closeInterval={1300}
+            showCancel={false}
+            wrapperStyle={{ marginTop: Platform.OS == "ios" ? 0 : StatusBar.currentHeight }}
+        />
+    )
+}
+export class AlertPush {
+    static warn(title: string = 'title', message: string = '') {
+        ref.current?.alertWithType('warn', title, message)
+    }
+    static error(title: string = 'title', message: string = '') {
+        ref.current?.alertWithType('error', title, message)
+    }
+    static success(title: string = 'title', message: string = '') {
+        ref.current?.alertWithType('success', title, message)
+    }
+}

package/src/Icon/PropsStyle.tsx

@@ -0,0 +1,32 @@
+import {
+    RNVectorIcon,
+} from "./index"
+import React from 'react'
+import {
+    FlexStyle,
+    StyleProp,
+    StyleSheet,
+    TextProps,
+    TextStyle,
+    TouchableOpacity,
+    ViewProps,
+    ViewStyle,
+} from 'react-native'
+
+import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
+export interface Props {
+    name: string
+    size?: number | Array<size>
+    type?: keyof typeof RNVectorIcon
+    onPress?: () => void
+    styleContainer?: StyleProp<ViewStyle>
+    style?: StyleProp<TextStyle>
+    alignSelf?: FlexStyle['alignSelf']
+    disabled?: boolean
+    activeOpacity?: number
+    color?: string
+
+}
+
+type size = 18 | 20 | 22 | 23 | 24 | 25 | 26 | 28 | 30 | 32 | 34 | 36
+

package/src/Icon/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import {
+    FlexStyle,
+    StyleProp,
+    StyleSheet,
+    TextProps,
+    TextStyle,
+    TouchableOpacity,
+    ViewProps,
+    ViewStyle,
+} from 'react-native'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import EvilIcons from 'react-native-vector-icons/EvilIcons'
+import FontAwesome from 'react-native-vector-icons/FontAwesome'
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import Entypo from 'react-native-vector-icons/Entypo'
+import AntDesign from 'react-native-vector-icons/AntDesign'
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import Feather from 'react-native-vector-icons/Feather'
+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'
+export const RNVectorIcon = {
+    Ionicons,
+    AntDesign,
+    Entypo,
+    EvilIcons,
+    MaterialIcons,
+    MaterialCommunityIcons,
+    FontAwesome,
+    FontAwesome5,
+    SimpleLineIcons,
+    Feather,
+    Octicons,
+    Fontisto
+}
+export type IconType = keyof typeof RNVectorIcon
+import { Props, } from './PropsStyle'
+import { Colors } from '../config'
+export default class IconApp extends React.PureComponent<Props> {
+    static defaultProps: Props = {
+        size: 23,
+        color: 'gray',
+        name: 'home',
+    }
+    render() {
+        if (this.props.name === "none") return null
+        const IconView = RNVectorIcon[this.props.type || 'Ionicons']
+        if (typeof this.props.onPress != "function") {
+            return (
+                <IconView
+                    //@ts-ignore
+                    size={this.props.size}
+                    //@ts-ignore
+                    color={Colors[this.props.color] ?? this.props.color}
+                    name={this.props.name}
+                    onPress={this.props.onPress}
+                    style={this.props.style as any}
+                />
+            )
+        }
+        return (
+            <TouchableOpacity
+                activeOpacity={this.props.activeOpacity || 0.5}
+                disabled={
+                    typeof this.props.onPress == 'function' ? this.props.disabled : true
+                }
+                style={
+                    [
+                        styles.container,
+                        { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
+                        this.props.style,
+                        this.props.styleContainer,
+
+                    ]} >
+                <IconView //@ts-ignore
+                    size={this.props.size}
+                    //@ts-ignore
+                    color={Colors[this.props.color] ?? this.props.color}
+                    name={this.props.name}
+                    onPress={this.props.onPress}
+                    style={this.props.style as any}
+                />
+            </TouchableOpacity>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'flex-start',
+    },
+})

package/src/Touch/Block.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Style } from './Style'
+import { Props } from './Props'
+import { isArray, isString } from 'underscore';
+import LinearGradient from 'react-native-linear-gradient'
+
+type TouchableOpacityRef = React.ComponentRef<typeof View>
+const Block = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props }, ref) => {
+  if (props?.hidden) return <></>
+  //@ts-ignore
+  if (isArray(props.background) && props.background.length > 1 && props.background.every(i => isString(i)))
+    return (
+      <LinearGradient
+        //@ts-ignore
+        colors={props.background}
+        start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
+        end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
+        style={[Style(props), style, props.styleBox]}>
+        {props.children}
+      </LinearGradient >
+    )
+  //@ts-ignore
+  return (<View ref={ref} style={[Style(props), style, props.styleBox]}
+    {...props}>
+    {props.children}
+  </View>
+  )
+})
+
+export default Block
+const styles = StyleSheet.create({
+  defaultTouch: {
+  },
+})

package/src/Touch/Props.ts

@@ -0,0 +1,134 @@
+import { ColorName } from "@assets/colors"
+import { StyleProp, FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native"
+type B = boolean
+type N = number
+type S = string
+export interface PropsConvert {
+  bg?: S | Array<ColorName>
+  w?: FlexStyle['width']
+  h?: FlexStyle['height']
+  pad?: N
+  padH?: N
+  padV?: N
+  padL?: N
+  padT?: N
+  padR?: N
+  padB?: N
+  flex?: N
+  mar?: N
+  marH?: N
+  marV?: N
+  marL?: N
+  marT?: N
+  marR?: N
+  marB?: N
+  minW?: N
+  maxW?: N
+  minH?: N
+  maxH?: N
+  borderC?: S | Array<color>
+  borderW?: N | Array<border>
+  borderLW?: N | Array<border>
+  borderTW?: N | Array<border>
+  borderRW?: N | Array<border>
+  borderBW?: N | Array<border>
+  borderR?: N | Array<size>
+  borderUpRadius?: N | Array<size>
+  borderDownRadius?: N | Array<size>
+  alignItems?: FlexStyle['alignItems']
+  alignSelf?: FlexStyle['alignSelf']
+  justifyContent?: FlexStyle['justifyContent']
+  borderStyle?: ViewStyle['borderStyle']
+  opacity?: ViewStyle['opacity']
+  overflow?: ViewStyle['overflow']
+  zIndex?: ViewStyle['opacity']
+
+}
+export interface PropsApp {
+  _background?: S//old
+  alignI?: FlexStyle['alignItems']//old
+  justifyC?: FlexStyle['justifyContent']//old
+  bgW?: B//old
+  positionA?: boolean//old
+  left0?: boolean //old
+  top0?: boolean //old
+  right0?: boolean//old
+  bottom0?: boolean //old
+  centerH?: boolean //old
+  overH?: B //old
+  w100?: B //old
+  h100?: B //old
+  width?: FlexStyle['width']//old
+  height?: FlexStyle['height']//old
+  borderR100?: boolean
+  //
+  mid?: B
+  row?: B
+  alignCenter?: B
+  justifyCenter?: B
+  borderCircle?: B
+  centerBetween?: B
+  justifyBetween?: B
+  overHidden?: B
+  square?: N
+  width100?: B
+  height100?: B
+  white?: B
+  red?: B
+  blue?: B
+  black?: B
+  green?: B
+  yellow?: B
+  pink?: B
+  gray?: B
+  primary?: B
+  background?: Array<ColorName> | Array<(S)> | S
+  gradient?: 'vertical' | 'horizontal'
+  flexOne?: B//old
+  shadowColor?: S | B
+  //option
+  borderOption?: { top?: N, left?: N, right?: N, bottom?: N, color?: S }
+  positionOption?: { top?: N, left?: N, right?: N, bottom?: N }
+  paddingOption?: { all?: N, top?: N, left?: N, right?: N, bottom?: N }
+  paddingFlex?: { vertical?: N, horizontal?: N }
+  marginFlex?: { vertical?: N, horizontal?: N }
+  marginOption?: { all?: N, top?: N, left?: N, right?: N, bottom?: N }
+  shadowOption?: { color?: S, width?: N, height?: N, opacity?: N, radius?: N, elevation?: N }
+  //recent
+  pad5?: B; pad10?: B; pad20?: B;
+  padV5?: B; padV10?: B; padV20?: B;
+  padH5?: B; padH10?: B; padH20?: B;
+  padL5?: B; padL10?: B; padL20?: B;
+  padT5?: B; padT10?: B; padT20?: B;
+  padR5?: B; padR10?: B; padR20?: B;
+  padB5?: B; padB10?: B; padB20?: B;
+  //
+  mar5?: B; mar10?: B; mar20?: B;
+  marH5?: B; marH10?: B; marH20?: B;
+  marV5?: B; marV10?: B; marV20?: B;
+  marL5?: B; marL10?: B; marL20?: B;
+  marT5?: B; marT10?: B; marT20?: B;
+  marR5?: B; marR10?: B; marR20?: B;
+  marB5?: B; marB10?: B; marB20?: B;
+  //
+  flex1?: B; flex2?: B; flex3?: B; flex4?: B; flex5?: B; flex6?: B; flex7?: B; flex8?: B; flex9?: B;
+  borderR2?: B; borderR5?: B; borderR10?: B; borderR15?: B; borderR20?: B;
+  borderW1?: B; borderW2?: B; borderW3?: B; borderW4?: B; borderW5?: B;
+  /**'padding30;marginTop6;borderRadius11;' */
+  styleChar?: S
+  //
+  widthScreen?: boolean
+  heightScreen?: boolean
+}
+export interface Props extends TouchableWithoutFeedbackProps, PropsConvert, PropsApp {
+  children?: React.ReactNode
+  styleBox?: StyleProp<ViewStyle>
+  hidden?: B
+  activeOpacity?: N
+}
+/**
+ * backfaceVisibility:route hidden
+ */
+type size = 0 | 5 | 10 | 15 | 20 | 30 | 40 | 50 | 100
+type color = '#ddd' | '#fff' | '#eee' | '#000' | 'white' | 'blue' | 'green' | 'pink' | 'yellow' | "white" | 'black' | 'blue'
+type border = 0.3 | 0.5 | 0.8 | 1 | 2 | 3 | 4 | 5

package/src/Touch/Style.ts

@@ -0,0 +1,187 @@
+import { StyleProp, ViewStyle, StyleSheet, Dimensions } from "react-native";
+import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
+import { Props } from './Props'
+import { Colors } from "../config";
+
+export const Style: any = (props: Props) => {
+  const PropsConvert = StyleSheet.flatten([
+    props.bg && { backgroundColor: props.bg },
+    props.background && { backgroundColor: props.background },
+    props.w && { width: props.w },
+    props.minW && { minWidth: props.minW },
+    props.maxW && { maxWidth: props.maxW },
+    props.h && { height: props.h },
+    props.minH && { minHeight: props.minH },
+    props.maxH && { maxHeight: props.maxH },
+    props.pad && { padding: props.pad },
+    props.padH && { paddingHorizontal: props.padH },
+    props.padV && { paddingVertical: props.padV },
+    props.padL && { paddingLeft: props.padL },
+    props.padT && { paddingTop: props.padT },
+    props.padR && { paddingRight: props.padR },
+    props.padB && { paddingBottom: props.padB },
+    props.mar && { margin: props.mar },
+    props.marH && { marginHorizontal: props.marH },
+    props.marV && { marginVertical: props.marV },
+    props.marL && { marginLeft: props.marL },
+    props.marT && { marginTop: props.marT },
+    props.marR && { marginRight: props.marR },
+    props.marB && { marginBottom: props.marB },
+    //new
+    props.borderR && { borderRadius: (props.borderR) },
+    props.borderC && { borderColor: (props.borderC) },
+    props.borderW && { borderWidth: (props.borderW) },
+    props.borderLW && { borderLeftWidth: (props.borderLW) },
+    props.borderTW && { borderTopWidth: (props.borderTW) },
+    props.borderRW && { borderRightWidth: (props.borderRW) },
+    props.borderBW && { borderBottomWidth: (props.borderBW) },
+    //new
+    props.alignItems && { alignItems: props.alignItems },
+    props.justifyContent && { justifyContent: props.justifyContent },
+    props.borderStyle && { borderStyle: props.borderStyle },
+    props.opacity && { opacity: props.opacity },
+    props.overflow && { overflow: props.overflow },
+    props.zIndex && { zIndex: props.zIndex },
+
+  ])
+  const PropsApp = StyleSheet.flatten([
+    props._background && { backgroundColor: props._background },
+    props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
+    props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
+    //
+    props.mid && { alignItems: 'center', justifyContent: 'center' },
+    props.row && { flexDirection: 'row' },
+    props.width100 && { width: '100%' },
+    props.height100 && { height: '100%' },
+    props.square && { width: props.square, height: props.square },
+    props.borderCircle && { borderRadius: 1000 },
+    props.alignCenter && { alignItems: 'center' },
+    props.justifyCenter && { justifyContent: 'center' },
+    props.justifyBetween && { justifyContent: 'space-between' },
+    props.overHidden && { overflow: 'hidden' },
+    props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
+
+    props.white && { backgroundColor: "white" }, props.black && { backgroundColor: "black" }, props.red && { backgroundColor: "red" },
+    props.blue && { backgroundColor: "blue" }, props.green && { backgroundColor: "green" },
+    props.yellow && { backgroundColor: "yellow" }, props.pink && { backgroundColor: "pink" },
+    props.gray && { backgroundColor: "gray" }, props.primary && { backgroundColor: Colors['primary'] },
+    //
+    props.positionOption && {
+      position: 'absolute',
+      top: props.positionOption?.top,
+      bottom: props.positionOption?.bottom,
+      left: props.positionOption?.left,
+      right: props.positionOption?.right,
+    },
+    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,
+    },
+    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,
+    },
+    props.borderOption && {
+      borderLeftWidth: props.borderOption.left,
+      borderTopWidth: props.borderOption.top,
+      borderBottomWidth: props.borderOption.bottom,
+      borderRightWidth: props.borderOption.right,
+      borderColor: props.borderOption.color,
+    },
+    props.marginFlex && {
+      paddingHorizontal: props.marginFlex.horizontal,
+      paddingVertical: props.marginFlex.vertical,
+    },
+    props.paddingFlex && {
+      paddingHorizontal: props.paddingFlex.horizontal,
+      paddingVertical: props.paddingFlex.vertical,
+    },
+    !isEmpty(props.shadowOption) && {
+      shadowColor: props.shadowOption?.color,
+      shadowOffset: {
+        width: props.shadowOption?.width,
+        height: props.shadowOption?.height,
+      },
+      shadowOpacity: props.shadowOption?.opacity,
+      shadowRadius: props.shadowOption?.radius,
+      elevation: props.shadowOption?.elevation,
+    },
+    props.shadowColor && {
+      shadowColor: isString(props.shadowColor) ? props.shadowColor : '#000',
+      shadowOffset: { width: 2, height: 2, },
+      shadowOpacity: 1,
+      shadowRadius: 10,
+      elevation: 2,
+    },
+    props.pad5 && { padding: 5 }, props.pad10 && { padding: 10 }, props.pad20 && { padding: 20 },
+    props.padV5 && { paddingVertical: 5 },
+    props.padV10 && { paddingVertical: 10 }, props.padV20 && { paddingVertical: 20 },
+    props.padH5 && { paddingHorizontal: 5 }, props.padH10 && { paddingHorizontal: 10 },
+    props.padH20 && { paddingHorizontal: 20 }, props.padL10 && { paddingLeft: 10 },
+    props.padT10 && { paddingTop: 10 }, props.padR10 && { paddingRight: 10 },
+    props.padB10 && { paddingBottom: 10 }, props.mar5 && { margin: 5 },
+    props.mar10 && { margin: 10 }, props.mar20 && { margin: 20 },
+    props.marH5 && { marginHorizontal: 5 }, props.marH10 && { marginHorizontal: 10 },
+    props.marH20 && { marginHorizontal: 20 }, props.marV5 && { marginVertical: 5 },
+    props.marV10 && { marginVertical: 10 }, props.marV20 && { marginVertical: 20 },
+    props.marL10 && { marginLeft: 10 }, props.marT10 && { marginTop: 10 },
+    props.marR10 && { marginRight: 10 },
+    props.marB5 && { marginBottom: 5 }, props.marB10 && { marginBottom: 10 }, props.marB20 && { marginBottom: 20 },
+    /** */
+
+    props.pad5 && { padding: 5 }, props.pad10 && { padding: 10 }, props.pad20 && { padding: 20 },
+    props.padV5 && { paddingVertical: 5 }, props.padV10 && { paddingVertical: 10 }, props.padV20 && { paddingVertical: 20 },
+    props.padH5 && { paddingHorizontal: 5 }, props.padH10 && { paddingHorizontal: 10 }, props.padH20 && { paddingHorizontal: 20 },
+    props.padL5 && { paddingLeft: 5 }, props.padL10 && { paddingLeft: 10 }, props.padL20 && { paddingLeft: 20 },
+    props.padT5 && { paddingTop: 5 }, props.padT10 && { paddingTop: 10 }, props.padT20 && { paddingTop: 20 },
+    props.padR5 && { paddingRight: 5 }, props.padR10 && { paddingRight: 10 }, props.padR20 && { paddingRight: 20 },
+    props.padB5 && { paddingBottom: 5 }, props.padB10 && { paddingBottom: 10 }, props.padB20 && { paddingBottom: 20 },
+    //
+    props.mar5 && { margin: 5 }, props.mar10 && { margin: 10 }, props.mar20 && { margin: 20 },
+    props.marV5 && { marginVertical: 5 }, props.marV10 && { marginVertical: 10 }, props.marV20 && { marginVertical: 20 },
+    props.marH5 && { marginHorizontal: 5 }, props.marH10 && { marginHorizontal: 10 }, props.marH20 && { marginHorizontal: 20 },
+    props.marL5 && { marginLeft: 5 }, props.marL10 && { marginLeft: 10 }, props.marL20 && { marginLeft: 20 },
+    props.marT5 && { marginTop: 5 }, props.marT10 && { marginTop: 10 }, props.marT20 && { marginTop: 20 },
+    props.marR5 && { marginRight: 5 }, props.marR10 && { marginRight: 10 }, props.marR20 && { marginRight: 20 },
+    props.marB5 && { marginBottom: 5 }, props.marB10 && { marginBottom: 10 }, props.marB20 && { marginBottom: 20 },
+    /** */
+
+    props.flex1 && { flex: 1 }, props.flex2 && { flex: 2 }, props.flex3 && { flex: 3 },
+    props.flex4 && { flex: 4 }, props.flex5 && { flex: 5 }, props.flex6 && { flex: 6 },
+    props.flex7 && { flex: 7 }, props.flex8 && { flex: 8 }, props.flex9 && { flex: 9 },
+    props.borderR2 && { borderRadius: 2 }, props.borderR5 && { borderRadius: 5 },
+    props.borderR10 && { borderRadius: 10 }, props.borderR15 && { borderRadius: 15 }, props.borderR20 && { borderRadius: 20 },
+    props.borderW1 && { borderWidth: 1 }, props.borderW2 && { borderWidth: 2 },
+    props.borderW3 && { borderWidth: 3 }, props.borderW4 && { borderWidth: 4 }, props.borderW5 && { borderWidth: 5 },    ///
+    //old
+    props.positionA && { position: 'absolute' },  //old
+    props.left0 && { left: 0, },  //old
+    props.top0 && { top: 0, },  //old
+    props.right0 && { right: 0, },  //old
+    props.bottom0 && { bottom: 0, },  //old
+    props.flexOne && { flex: 1 },  //old
+    props.bgW && { backgroundColor: "white" }, //old
+    props.centerH && { alignItems: 'center', justifyContent: 'space-between', },//old
+    props.overH && { overflow: 'hidden' },//old
+    props.w100 && { width: '100%' }, //old
+    props.h100 && { height: '100%' }, //old
+    props.width && { width: props.width },
+    props.height && { height: props.height },
+    props.alignI && { alignItems: props.alignI },
+    props.justifyC && { justifyContent: props.justifyC },
+    props.borderR100 && { borderRadius: 100 },
+    //
+    props.widthScreen && { width: Dimensions.get('screen').width },
+    props.heightScreen && { height: Dimensions.get('screen').height },
+
+
+  ])
+  return [
+    PropsApp,
+    PropsConvert,
+  ]
+}

package/src/Touch/Touch.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import { Style } from './Style'
+import { Props } from './Props'
+import { isArray, isString } from 'underscore'
+import LinearGradient from 'react-native-linear-gradient'
+
+type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
+const Touch = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props }, ref) => {
+  if (props?.hidden) return <></>
+  //@ts-ignore
+  if (isArray(props.background) && props.background.length > 1 && props.background.every(i => isString(i)))
+    return (
+      <TouchableOpacity
+        ref={ref}
+        {...props}
+        activeOpacity={props.activeOpacity || 0.5}
+      >
+        <LinearGradient
+          //@ts-ignore
+          colors={props.background}
+          start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
+          end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
+          style={[Style(props), style, props.styleBox]}
+        >
+          {props.children}
+        </LinearGradient >
+      </TouchableOpacity>
+    )
+  return (
+    <TouchableOpacity
+      ref={ref}
+      activeOpacity={props.activeOpacity || 0.5}
+      style={[Style(props), style, props.styleBox]}
+      {...props}>
+      {props.children}
+    </TouchableOpacity>
+  )
+})
+
+export default Touch

package/src/Touch/TouchScale.tsx

@@ -0,0 +1,70 @@
+
+import React, { ReactNode, useCallback } from 'react';
+import { Animated, TouchableOpacity, ViewProps, } from 'react-native';
+import { Style } from './Style'
+import { Props } from './Props'
+import { isArray } from 'underscore';
+import LinearGradient from 'react-native-linear-gradient'
+import isColor from "validate-color";
+
+interface ButtonScaleProps extends Props {
+    scaleValue?: number
+    scale?: boolean
+    containerStyle?: ViewProps['style']
+}
+type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
+
+const Touch = React.forwardRef<TouchableOpacityRef, ButtonScaleProps>(({ scaleValue = 1.1, style, background, containerStyle, ...props }, ref) => {
+    if (props?.hidden) return <></>
+    const animatedButtonScale = React.useRef(new Animated.Value(1)).current;
+    const onPressIn = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: scaleValue,
+            useNativeDriver: true,
+        }).start();
+    }, [scaleValue]);
+    const onPressOut = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: 1,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    if (isArray(background) && background.length > 1 && background.every(i => isColor(i)))
+        return (
+
+            <TouchableOpacity
+                ref={ref}
+                onPressIn={onPressIn}
+                onPressOut={onPressOut}
+                {...props}
+                activeOpacity={props.activeOpacity || 1}
+            >
+                <Animated.View style={[{ transform: [{ scale: animatedButtonScale }] }, Style(props), style]}>
+                    <LinearGradient
+                        colors={background}
+                        start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
+                        end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
+                        style={[Style(props), style,]}
+                    >
+                        {props.children}
+                    </LinearGradient>
+                </Animated.View>
+            </TouchableOpacity>
+
+        )
+    return (
+        <TouchableOpacity
+            ref={ref}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            activeOpacity={props.activeOpacity || 1}
+            style={containerStyle}
+            {...props}>
+            <Animated.View style={[{ transform: [{ scale: animatedButtonScale }] }, Style(props), style]}>
+                {props.children}
+            </Animated.View>
+        </TouchableOpacity>
+    )
+});
+
+export default Touch

package/src/Touch/utils.ts

@@ -0,0 +1,28 @@
+import { Log } from "@utils";
+import { isString } from "underscore";
+
+
+export function sliceTextAndNumber(input: string) {
+    let text = "";
+    let number = "";
+    let mid: number | boolean = false
+    for (let i = 0; i < input.length; i++) {
+        const currentChar = input[i];
+        if (!isNaN(parseInt(currentChar)) && mid == false) {
+            mid = i
+        }
+    }
+    if (mid) {
+        text = input.slice(0, mid)
+        number = input.slice(mid)
+    }
+    // Log.d('mid', { mid, text, number })
+    return {
+        text: mid ? text : null,
+        number: mid ? Number(number) : null,
+    };
+}
+export function replaceAll(str = '', search = '', replacement = '') {
+    return str.replace(new RegExp(search, 'g'), replacement);//[g] ~~ search global
+
+}

package/src/config.ts

@@ -0,0 +1,25 @@
+export const Colors = {
+    primary: 'blue'
+}
+export const Icons = {
+    menu: "menu",
+    home: 'home',
+    person: 'person-outline',
+    camera: 'camera-outline',
+    pass: 'lock-closed-outline',
+    pass1: "key-outline",
+    image: 'image-outline',
+    image1: 'images-outline',
+    mail: 'mail-outline',
+    settings: 'settings-outline',
+    logout: 'log-out-outline',
+    filter: 'funnel-outline',
+    search: 'search-outline',
+    back: 'arrow-back-outline',
+    back1: 'chevron-back-outline',
+    down: "chevron-down-outline",
+    down1: "caret-down-outline",
+    up: 'chevron-up-outline',
+    up1: 'caret-up-outline',
+    header: 'heart-outline'
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as Touch } from './Touch/Touch'
+export { default as Block } from './Touch/Block'