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
- Add docs for animations in React Native (assists #389), also allow passing array of styles to native styled component — committed to styled-components/styled-components by jacobp100 7 years ago
- Merge pull request #528 from styled-components/native-docs Add docs for animations in React Native (assists #389), also allow pa… — committed to styled-components/styled-components by mxstbr 7 years ago
Just saw this. We expect that all the code in
Styled.View
is plain CSS—so noAnimated.Value
s. What you want to do is to define all your non-animated styles inStyled.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).