styled-components: [1.3.1] breaks react native animation

const SContent = styled(View)`
  opacity: ${props => props.fade};
  flex: 1;
  margin-top: 20;
`;

const AContent = Animated.createAnimatedComponent(SContent);

        ...some other code...        

<AContent fade={this.state.contentAnim}>

This used to work and update opacity as intended before, right now opacity stays at 0 and never updates for some reason. this.state.contentAnim updates as before


EDIT

if I add callback function to animation that updates state passed to AContent

_onAnimateContent = () => {
    Animated.timing(this.state.contentAnim, {
      duration: 200,
      toValue: 1
    }).start(() => this.setState({ contentPointerEvents: 'auto' }));
  }

and

<AContent fade={this.state.contentAnim}  pointerEvents={this.state.contentPointerEvents}>

After that animation finishes and state is updated I can see my component, however it just becomes visible without any animation.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 16 (16 by maintainers)

Commits related to this issue

Most upvoted comments

Just saw this. We expect that all the code in Styled.View is plain CSS—so no Animated.Values. What you want to do is to define all your non-animated styles in Styled.View..., and pass your animated ones in as style props.

See the Box component here (it’s a different project, but it’ll work exactly the same in styled-components).