Skip to content

How to use Animated in Custom Component #13914

Closed
@Symous

Description

@Symous

I create a Custome Component With these props:

opacity: PropTypes.number, // opacity;

In one page I use this to make it support animate.

const AnimatedProgress = Animated.createAnimatedComponent(RecorderProgress);

then , I set a percentage state.

this.state= { _opacity: new Animated.Value(0)}

and set a animate in componentDidMount;

Animated.timing(this.state._opacity,{
      toValue:1,  // no-transparent;
      duration:5000
    }).start();

add the component to page:

<AnimatedProgress  opacity={opacity:this.state._opacity}/>

But when I run the app, there is no animation of the component.

I also found that if I create a opacity in style of the component directly, the animation works.

<AnimatedProgress  style={{opacity:this.state._opacity}}/>

Please it's very confused me, is there any one who can help me?Thanks.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions