Doesn't play nice with styled components

[sonaye]

I found that this library renders glitchy animations when using styled-components, glamorous-native or a custom styled components API, switching to the typical way of writing styles in RN fixes things. I wrote a light custom styled-components-like function to do some debugging.

Top: Not using styled components.
Bottom: Using styled components.

Code to reproduce available here.

[chrfalch]

I think I know what's going on here... The interpolator system needs to get information about the items from somewhere, and that somewhere is the style property. When providing function based components the style is not available until the item function has been called. This will result in the issue you are having with the background color.

The other thing the example shows is the strange size transition - that should not look like what you see and I'll take a look at it and see what if I can find out what's going on.

[chrfalch]

If you add the following style to the outer container view, the size transition seems to be working:

<View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start' }}>

The problem seems to be that the UIManager.measureInWindow function returns the wrong size for the elements without this style. This might have something to do with the createAnimatedWrapper function I'm using and I'll keep on investigating this.

[dcvz]

I've seen similar things happen when you have items that take up percentage width. My fix has usually been to insert an invisible item that has the window width, but it'd be great for the library's <Transition /> to be able to replicate the parent's window.

[sonaye]

The interpolator system needs to get information about the items from somewhere, and that somewhere is the style property

@chrfalch This explains it. Maybe we can fix this by adding a defaultStyle prop to <Transition /> which -if provided- forwards the styles to the interpolator. Then as a user I can add a HOC that injects defaultStyle to every styled components used (since this is left to the user, adding a defaultStyle prop is enough).

[sonaye]

@dcvz In general, animations in React Native don't work well with percentages (typically they would throw).

[sonaye]

Revisiting this again I think supporting styled components is not an essential thing to have, I like the direction the development is going, let's keep it that way for now.

[chrfalch]

@sonaye The last version in develop now supports retrieving rendered props from components like the one you wrote - just mentioning it you'd like to try :-) Haven't released it yet.

[lXSPandora]

Can we re-open this because still not working nice with styled components @sonaye @chrfalch