Shared Animation not too fluid with styled-components about fluidtransitions HOT 12 OPEN

@chrfalch any position about this?

from fluidtransitions.

1st Screen:

const VaporMax = styled.Image.attrs({
  source: require('../../assets/vapormax.png')
})`
  width: 500;
  height: 300;
  margin-left: 120;
  margin-vertical: 40;
  transform: rotate(35deg);
`;

2nd Screen

const VaporMax = styled.Image.attrs({
  source: require('../../assets/vapormax.png')
})`
  width: 250;
  height: 150;
`;

from fluidtransitions.

Versions:

  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-navigation": "2.6.2",
    "react-navigation-fluid-transitions": "0.2.2",
    "styled-components": "^3.3.3"
  },

from fluidtransitions.

First i downgraded the RN Version and rewrited the styles using StyleSheet to make the animations work!!

from fluidtransitions.

I think is a problem with https://github.com/styled-components/styled-components

from fluidtransitions.

Its the same #25

from fluidtransitions.

@sonaye @chrfalch

from fluidtransitions.

Hi @lXSPandora! Thanks for submitting the issue. The main challenge when doing shared element transitions is to know what kind of styles to use for transitions. The Fluid Transitions library uses different methods to accomplish this - looking at the styles property and performing a shallow render of the component. I haven't tested too much with Style Components, but I believe there could still be some issues with transitions on such elements. Try to explicitly declare the styles you want to be part of the transition on the child element of the Transition element and see if it helps.

A reproduction using Expo would also be great - your example looks really cool, btw!

from fluidtransitions.

@chrfalch
And i noticed one more think when i try to use absolute styles on styled + image + shared transitions the image disappears
OBS: Its commented to dont crash the expo 😆
https://github.com/lXSPandora/fluid-transitions-reproduction-styled/blob/master/src/components/VaporMaxAnimation/VaporMaxLanding.js#L36

styled reproduction repo: https://github.com/lXSPandora/fluid-transitions-reproduction-styled

repo with stylesheet: https://github.com/lXSPandora/react-native-shared-transitions

Can you put the stylesheet repo as an example of Shared Transitions?? ☝️ ☝️ ☝️ ☝️☝️☝️

from fluidtransitions.

The animations that are not shared runs fine but the shared ones bugs!

from fluidtransitions.

@sonaye @chrfalch

from fluidtransitions.

Any update on this? I am interested on making it work with styled components too!

from fluidtransitions.