Motion

Motion is a component used to enrich component actions.

Code demo

fade in and fade out

import { Motion } from 'tuya-panel-kit'
const [fadeShow, setFadeShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.Fade
style={{ position: 'absolute', bottom: 0 }}
show={fadeShow}
onHide={() => setFadeShow(false)}
>
<View style={contentStyles} />
</Motion.Fade>

Pull up and down

import { Motion } from 'tuya-panel-kit'
const [pullUpShow, setPullUpShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.PullUp
style={{ position: 'absolute', bottom: 0 }}
dropHeight={200}
show={pullUpShow}
onHide={() => setPullUpShow(false)}
>
<View style={[contentStyles, { bottom: 0 }]} />
</Motion.PullUp>

Zoom in and fade in/out

import { Motion } from 'tuya-panel-kit'
const [scaleFadeInShow, setScaleFadeInShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.ScaleFadeIn
style={{ position: 'absolute', bottom: 0 }}
show={scaleFadeInShow}
onHide={() => setScaleFadeInShow(false)}
>
<View style={contentStyles} />
</Motion.ScaleFadeIn>

Zoom in and fade in/down to fade out

import { Motion } from 'tuya-panel-kit'
const [scalePullDownShow, setScalePullDownShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.ScalePullDown
show={scalePullDownShow}
onHide={() => setScalePullDownShow(false)}
>
<View style={contentStyles} />
</Motion.ScalePullDown>

Pull-down push

import { Motion } from 'tuya-panel-kit'
const [pushDownShow, setPushDownShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.PushDown
style={{ position: 'absolute', bottom: 0 }}
show={pushDownShow}
onHide={() => setPushDownShow(false)}
dropHeight={100}
>
<View style={contentStyles} />
</Motion.PushDown>

No operation zoom in/out

import { Motion } from 'tuya-panel-kit'
const [toastShow, setToastShow] = React.useState(false);
const contentStyles = {
width: 375,
height: 200,
backgroundColor: '#fff',
};
<Motion.Toast
style={{ position: 'absolute', bottom: 50 }}
show={toastShow}
onHide={() => setToastShow(false)}
>
<View style={contentStyles} />
</Motion.Toast>

API

Motion.Fade

Motion.PullUp

Motion.ScaleFadeIn

Motion.ScalePullDown

Motion.PushDown

Motion.Toast

tuya02:55