Skip to content

Support Animation API #191

@NiuGuohui

Description

@NiuGuohui

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});
 `

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions