Integrate with Animated

[mhaagens]

It would be really great if we could integrate styled-components with Animated.
As of now I haven't found a way to pass Animated-values as props to styled-components,
so a tighter integration would be really helpful and would make a killer combo for dealing with animations and css in both React and React Native.

[kitten]

Like I said on Twitter, for anyone who is having the same trouble and reading this 😄

You'll have to pass all your animated values into the inline styles i.e. style prop, and wrap for example an Animated.View instead of calling styled.View. Similar logic on the client side.

On React Native we should be able to support this stuff somehow, but on SC for Web it's going to be tricky since we're currently not parsing for inline styles.

[jbovenschen]

@philpl Out of curiosity, does this mean that if your using react-primitives or react-native-web the Animated won't work or does the styled-components/primitives package support parsing inline styles.

[kitten]

@jbovenschen no, animations with animated do work since all the logic for it is in their own components. Check the animations section in our docs

[lpillonel]

I had an issue with styled-components and an animated component created with Animated.createAnimatedComponent(styled.View'...') For some reason it was working in debug, but not with the release profile. Switching back to an Animated.View component worked.

Stackoverflow question.

Someone know why ?

Thanks,

Luca

[kitten]

@lpillonel I haven't looked into that methods exact implementation, but what does work is wrapping an animated component in a styled one which is also recommended in our docs: https://www.styled-components.com/docs/basics#animations

Please note that it's always better to ask for help on our spectrum or Gitter, and check out the docs first. Also I must politely ask you to create a new issue when you can't find an answer instead of commenting on one. Sorry, but it's better to remind people about it once in a while 😉

[lpillonel]

My bad, sorry.

But your answer fixed my problem : )

[breadadams]

I know this is an old issue, but to share a solution I've been using with latest version of styled-components (4.1.2), is via the as prop, eg:

const StyledView = styled.View`
  background: hotpink;
`;

<StyledView as={Animated.View} {...props} />

[erickcouto]

I know this is an old issue, but to share a solution I've been using with latest version of styled-components (4.1.2), is via the as prop, eg:

const StyledView = styled.View`
  background: hotpink;
`;

<StyledView as={Animated.View} {...props} />

doesn't work over here with as={Animated.View}

[isaacalves]

This works but it seems to be a bit buggy - it doesn't seem to interpolate properly, in other words, the element jumps from one state to the other if it starts from the middle of an animation:

<StyledThing as={animated.div} style={props}>
  THING
</StyledThing>

and it throws this error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in ForwardRef (created by Context.Consumer)
in StyledComponent (created by styled.div)
in styled.div (at src/index.js:20)

Example

[dayaki]

This works! thanks @breadadams

[Gabrielfcs]

Thank you @breadadams. You bring us a good solution!
I've been looking for this for a while to make stylized components work with react-native-animatable animations and now I found this solution that also works well with this framework.

[mkilincaslan]

I know this is an old issue, but to share a solution I've been using with latest version of styled-components (4.1.2), is via the as prop, eg:

const StyledView = styled.View`
  background: hotpink;
`;

<StyledView as={Animated.View} {...props} />

I use styled-components(5.1.0) and it works for me! Thank you @breadadams

[matheus-vilela]

const StyledView = styled(Animated.View)`
  background: hotpink;
`;

I use styled-components ( 5.1.1 ) and it works for me!

[wobsoriano]

It works but I get "children" is not a valid style property. when I pass interpolated value as a prop. Anybody got a fix on this?

[AlmondBro]

I know this is an old issue, but to share a solution I've been using with latest version of styled-components (4.1.2), is via the as prop, eg:

const StyledView = styled.View`
  background: hotpink;
`;

<StyledView as={Animated.View} {...props} />

I second this! Absolutely works on my version of styled-components, version 5.1.0. I am even using react-native-animatable on Expo.

Thank you @breadadams

[TheRohitSharma]

It works but I get "children" is not a valid style property. when I pass interpolated value as a prop. Anybody got a fix on this?

Ever any luck here?