css-to-react-native
css-to-react-native copied to clipboard
Support Animation API
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});
`