css-to-react-native icon indicating copy to clipboard operation
css-to-react-native copied to clipboard

Support Animation API

Open NiuGuohui opened this issue 1 year ago • 0 comments

Like this:

// Component Code
...
 const slide = useRef(new Animated.Value(0)).current;
useEffect(() => {
    const anim = Animated.timing(slide, { toValue: 100 duration: 200, useNativeDriver: true });
    anim.start();
    return () => anim.stop();
}, []);

return <Block transformX={slide} />
...

// Styled Code
const Block = styled(Animated.View)<{ transformX: Animated.Value }>`
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 9;
    width: 36px;
    height: 24px;
    border-radius: 4px;
    background: #F00;
    transform: translateX(${props => props.transformX});
 `

NiuGuohui avatar Feb 22 '24 01:02 NiuGuohui