Open chj-damon opened 2 years ago
Navigator:
<Navigator initialRouteName="List" screenOptions={commonStackOptions}>
<Screen name="List" component={ListScreen} options={{ headerShown: false }} />
<Screen
name="Detail"
component={DetailScreen}
options={{ headerShown: false }}
sharedElements={route => {
const { item } = route.params;
return [`item.${item.id}.photo`];
}}
/>
</Navigator>
ListScreen:
export default function ListScreen() {
const navigation = useNavigation<StackNavigationProp<any>>();
const renderItem = ({ item }: any) => {
return (
<TouchableOpacity activeOpacity={1} onPress={() => navigation.push('Detail', { item })}>
<SharedElement id={`item.${item.id}.photo`}>
<Image source={item.image} style={styles.image} />
</SharedElement>
</TouchableOpacity>
);
};
return <FlatList style={styles.container} data={items} renderItem={renderItem} keyExtractor={item => item.id} />;
}
DetailScreen:
export default function DetailScreen() {
const navigation = useNavigation();
const route = useRoute();
const { item } = route.params as any;
return (
<TouchableOpacity activeOpacity={1} onPress={navigation.goBack}>
<SharedElement id={`item.${item.id}.photo`}>
<Image source={item.image} style={styles.image} />
</SharedElement>
</TouchableOpacity>
);
}
issue 1 does not exist on ios issue 2 still exists on ios
Same problem
I think that the problem is relative to the position of the element in the prev and next screen, but I don't know why.
I've a working example where if the element in the next screen is positioned lower than the element in the previous screen, then the blink doesn't happen.
Even for me the problem is only on Android.
try cardStyle: {backgroundColor: 'transparent'}, cardStyleInterpolator: ({current: {progress}}) => ({ gestureEnabled: false, cardStyle: {opacity: progress}, }),
on Stack.Navigator.screenOptions or Stack.Screen.options
try cardStyle: {backgroundColor: 'transparent'}, cardStyleInterpolator: ({current: {progress}}) => ({ gestureEnabled: false, cardStyle: {opacity: progress}, }),
on Stack.Navigator.screenOptions or Stack.Screen.options
tried, not working. it still blinks...
This is also happening to me, it's kind of frustrating, as it loses all the smoothness.
It would be really nice if someone come up with a solution for this.
This is also happening to me, it's kind of frustrating, as it loses all the smoothness.
It would be really nice if someone come up with a solution for this.
try cardStyle: {backgroundColor: 'transparent'}, cardStyleInterpolator: ({current: {progress}}) => ({ gestureEnabled: false, cardStyle: {opacity: progress}, }), on Stack.Navigator.screenOptions or Stack.Screen.options
tried, not working. it still blinks...
i also try this logic but in my case also not work properly please any one suggest me how i can resolve this issue
Thanks for this amazing library to help improve user experience especially after upgrade to the latest version. But I also encountered some trouble when using it on android.
issue 1: when I navigate from ListScreen to DetailScreen, if the image is half on screen, then it will blink. issue 2: when I navigate back from DetailScreen to ListScreen, it will blink and I can clearly see there's a blank area goes from left to right.
here is the reproduce repository: sharedElementExample
thank you very much.