Styled-components-website: Documentation: more on React Native (values, Animated)

[wachunei]

I'm new on using styled-components. I'm working with it on a React Native app. I've read all documentation and React Native section is maybe lacking of some little help It would be useful.

• Emphasize on styled.Component is an alias for styled(Component), in case Component is not built into the aliases (see https://github.com/styled-components/styled-components/issues/1027)

• Interpolation can mix more than text/numeric values/theme.props and also include other expressions (since they're actually ES template strings), e.g.:

  styled.View`
  border-width: ${StyleSheet.hairlineWidth};
  `;
  

• Animations section is made for web and it is clarified in React Native section: as an improvement it could link to Animations documentation, and mention you can use Animated.createAnimatedComponent() with styled.Component: Animated.createAnimatedComponent(styled.Component)

• (this is still confusing for me) By the end of React Native section it is mentioned that now it uses percentages, which is fine, but It was really confusing for me when I tried to use unitless values (since I've used RN StyleSheet before) and styled-component was expecting a unit like px. Maybe it should emphasize on using units just like on CSS.

Hope this helps to improve documentation :)

[wachunei]

Wow, actually this led to finding a bug. Animated.createAnimatedComponent won't work with a styled.Component on production. Sure it works on development. There's even a Stack Overflow answer and an issue comment that saved me a lot of time to figure this out.

I searched for issues with "Animated" keyword and people have been over this before, in some cases it's been recommended using createAnimatedComponent with a styled.Component but it doesn't work (at least for me).

I don't know if anyone would look into why Animated.createAnimatedComponent(styled.Component) works only on development, but in the meantime I think documentation should explicitly recommend using styled(Animated.Component) instead.

PS: I've learned that at some point old docs did have an Animations sub-section for React Native 😮

[zomars]

I'm bumping this issue. it woule be really helpful to have more docs on this.