Open adaryabegi opened 2 years ago
add cardStyle: {backgroundColor: 'transparent'} to options
for me this helper add this styles to your Screen
opntions
cardStyle: {
backgroundColor: 'transparent'
},
cardStyleInterpolator: ({current}) => {
return {
cardStyle: {
opacity: current.progress,
backgroundColor: 'transparent'
}
}
}
example from my code
<Stack.Screen
name="TicketDetailScreen"
component={TicketDetailScreen}
options={{
gestureEnabled: false,
transitionSpec: {
open: {animation: 'timing', config: {duration: 300}},
close: {animation: 'timing', config: {duration: 300}}
},
cardStyle: {
backgroundColor: 'transparent'
},
cardStyleInterpolator: ({current}) => {
return {
cardStyle: {
opacity: current.progress,
backgroundColor: 'transparent'
}
}
}
}}
/>
@dirmich cardStyle: {backgroundColor: 'transparent'} didnt fix it for me. Any other ideas? What is even the point of transparency? this makes the page see-through. In that case, I would have to assign a background color to the scroll view, and it's not a good UI behavior. My image still flickers just like the original comment on this post.
@adaryabegi Did you find a solution?
I was able to reproduce it in the video shared below. The second image is the one that flickers after it navigates. Both Images are loaded from the Cloud with URI Could it have to do with the quality of the image? not sure. @IjzerenHein any ideas?
@pouyarezvani I think this has to do with caching and the second image being larger in size. Could you log out the sizes of both images? Also, is it always the second image in the list that produces the problem, or does it happen to particular image-url's and not to others?
@IjzerenHein Same here. In my case, images loaded from cache too, with same dimensions (aprox) and a size of 100KB.
I am using expo-image (most recent version).
Hey guys. I am struggling here on an issue I can't figure out. So basically what I have, is 1 image that I want to transition into a full screen Image on a new screen. I followed the docs and its no big hack, just really simple, but as soon as the Image is almost on the new screen, it unmounts or something and then shows again.
Showcase of the problem:
https://user-images.githubusercontent.com/56917803/149679950-dd454864-e3a9-454c-a796-06b191ef3fc8.mov
I have a Navigator:
This is a Component called "NormalMessage" inside the "OneToOneScreen":
This is the component "ChatImgGallery":
Important package versions: