react-native-component-kits

React Native Components

Usage no npm install needed!

<script type="module">
  import reactNativeComponentKits from 'https://cdn.skypack.dev/react-native-component-kits';
</script>

README

react-native-component-kits

npm version npm

NPM

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,
};

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