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 TouchableWithoutFeedbackPropsToast
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 AppmemoWithRef
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
