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