Open Glazzes opened 2 years ago
Wrap it up with a view
Wrap it up with a view
As i mentioned in this issue i tried wrapping it with a view, still it does not change much, there's still no interpolation at all and now you're not "interpolating" the text but the view containing it, i tried wix/react-native-navigation and i got the expected result, but one will sooner or later have to fully opt out expo libraries that's something i don't like
I have the same issue here also in IOS :(
Try this
<SharedElement id="text" style={{alignItems: 'flex-start'}}>
<Text style={styles.textTwo}>Hello world</Text>
</SharedElement>
I was able to solve this by adding animation: 'fade'
sharedElements={(route, otherRoute, showing) => {
const { id } = route.params
return [
{ id: `item.${id}.photo` },
{ id: `item.${id}.text`, animation: 'fade' },
]
}}
I was able to solve this by adding
animation: 'fade'
sharedElements={(route, otherRoute, showing) => { const { id } = route.params return [ { id: `item.${id}.photo` }, { id: `item.${id}.text`, animation: 'fade' }, ] }}
Struggling a lot of times with this issue trying custom interpolations with no success. Worked like a charm. Thanks @fpe-dev !
Hi and thank you for creating such an awesome library.
I've been trying to transition a text component from one screen to another while following some tutorials where the transition works really well (in IOS), but no matter what i do the text does not transitions properly instead of interpolating its properties nicely, it only stretches for both screens backwards and forwards, I've tried to add specific dimensions to the text component, flex properties, providing styles to
SharedElement
component, wrapping it inside a View, but nothing seems to work for me.I've also tried with other properties like color, but there's no interpolation at all between the styles from the first screen to the ones in the second screen, they move nicely from screen to screen, but styles are only applied once the transition has ended.
As i do not own an Iphone myself, I've tested this behaviour both on an Android emulator and a physical device and they produce the same result.
Here are the components I'm using, package.json and a short video of my problem.
https://user-images.githubusercontent.com/52082794/138578177-96be0c59-8481-4f8a-a309-f954b3668692.mp4