Tuya Developer Forum

import React from 'react';
import { View } from '@ray-js/ray';
import { animated, useSpring } from '@react-spring/web';
import styles from './index.module.less';

const AnimatedView = animated(View);

export const ScreenScaleLayout: React.FC = () => {

const [styles, api] = useSpring(() => ({
width: (200),
opacity: 1,
config: {
precision: 0.0001,
},
onStart: (result, ctrl, item)=>{console.log('==- start',result, ctrl, item)},
onChange: (result, ctrl, item)=>{console.log('==- change',result, ctrl, item)},
onRest: (result, ctrl, item)=>{console.log('==- rest',result, ctrl, item)},
onPause: (result, ctrl, item)=>{console.log('==- pause',result, ctrl, item)},
onResolve: (result, ctrl, item)=>{console.log('==- resolve',result, ctrl, item)},
onResume: (result, ctrl, item)=>{console.log('==- resume',result, ctrl, item)},
onProps: (props, spring)=>{console.log('==- props',props,spring)},
}))

return (
<View style={{ display: 'flex', flexDirection: 'column', alignContent: 'center', alignItems: 'center' }}>
<AnimatedView style={{...{ height: (100), backgroundColor: '#FF0000' }, ...styles}} />
<View
style={{ width: '100%', height: (100), backgroundColor: '#00FF00' }}
onClick={()=>{ api.start({width: (100), opacity: 0,}); }} />
</View>
);
}