react-native-component-kits

react-native-component-kits

Getting started

$ npm install react-native-component-kits --save

• OR

$ yarn add react-native-component-kits

Descriptions

This library will help you improve your code, faster and easier.

Components

ViewVisibleAnimated

<ViewVisibleAnimated >
    <Text>Hello</Text>
</ViewVisibleAnimated> 

• Props

type ViewVisibleAnimatedProps = {
    scaleEnable?: Boolean,
    autoHide?: Boolean,
    onShowDone?: void,
    onDone?: void,
    onShowStart?: void,
    style?: StyleProp<ViewStyle>,
    delay?: Number,
    duration?: Number,
    timeout?: Number,
    autoShow?: Boolean,
    pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto',
    scaleType?: 'in' | 'out',
    renderHiddenContent?: any // Content show when component hide, default null
};

• Method

show(callback, isDelay)

hide(callback)

---

ScaleButton

<ScaleButton onPress={()=>{}}>
    <Text>Hello</Text>
</ScaleButton> 

• Props

type TouchableWithoutFeedbackProps

Toast

import { toastRef, Toast, showToast } from 'react-native-component-kits';

// Used
showToast({
    message: 'Copy success!',
    type: 'success',
    position: 'top',
});

<Toast ref={toastRef} />
// or custom children
<Toast>
{({ title, type, message }) => <Text>{message}</Text>}
</Toast>

• Props

export type ToastProps = {
    translateEnable?: Boolean,
    scaleEnable?: Boolean,
    style?: StyleProp<ViewStyle>,
};

export type ShowToastProps = {
    message: String,
    duration?: Number,
    position?: 'top' | 'bottom',
    type?: 'success' | 'fail',
    onPress?: void,
    title?: String,
    // rest | You can pass any props to your children params
};

---

Functions

Functions	Description	Type
memoDeepEqual	Using memo of React but deep compare preProps with nextProps to check component should be return true or false.	Higher Order Function
memoWithRef	It's like memoDeepEqual but using forwardRef to get ref of component.	Higher Order Function
useStateCallback	Using useState of React and handle to get callback after setState	Hook
useStateSafe	Using useState of React and handle don't update state when component unmounted	Hook
detectEmail	Check string is email	Boolean
detectUserName	Check string is user name	Boolean
detectPhoneNumber	Check string is user phone number	Boolean
withAnimated	Convert class component to use Animated	Function

Hooks

Functions	Description	Type
useCountdown	Countdown value. Params: startDate, endDate, autoStart,intervalTime	Hooks
useInterval	Countdown value. Params: callback, delay, autoStart	Hooks
useFetchData	Countdown value. Params: api,loadingDefault, pathData	Hooks

How to use

memoDeepEqual

const App = ()=>{
    return <Text>Hello</Text>
}
export default memoDeepEqual(App) 

// OR

const App = memoDeepEqual(()=>{
    return <Text>Hello</Text>
})

export default App

memoWithRef

const App = (props, ref)=>{
    const updateValue = (value)=>{
        console.log(value)
    }

    useImperativeHandle(
        ref,
        () => ({
            updateValue  
        }),
        [],
    )
    return <Text>Hello</Text>
}
export default memoWithRef(App) 

useStateCallback

const [state, setState] = useStateCallback(initialState)

setState('123',(nextState)=>{
    console.log(nextState)
})

---

License

This module is MIT licensed

---