Open YisusMB opened 3 years ago
I'm getting the problem too. This seems to be a regression. This was reported and fixed last year at the end of April but the problem has come back.
I've tracked the problem down to a gross bug in react-navigation-stack. The latest version that does not have the bug is 2.8.4. Execute the following command to fix the issue: npm i react-navigation-stack@2.8.4.
The bug is in StackView.tsx. A function named handleTransitionEnd should call onTransitionEnd but calls onTransitionStart instead. As a result react-navigation-shared-element never gets to replace the animated version of the shared element with the original one which would work correctly with the scrollview after the animation is complete.
I've posted a bug report to react-navigation - https://github.com/react-navigation/react-navigation/issues/9376
@SteveGreenley omg dude nice! i solved my problem! really appreciated :D
Hey @SteveGreenley . I am using this version "@react-navigation/stack": "^5.2.1" i.e., [v5]. And the issue I am facing is similar to what @YisusMB faced. But in my case, the transition on the previous screen goes out of the screen from the top left. Please have a look:
My code:
Screen 1:
return (
<TouchableOpacity
onPress={() => {
navigation.navigate(NavigationRoutes.Profile);
}}>
<SharedElement id="hey">
<Text
style={[
styles.title_16,
commonStyles.marginTop_60,
commonStyles.marginBottom_10,
commonStyles.alignSelfCenter,
]}>
HEY THERE
</Text>
</SharedElement>
</TouchableOpacity>
)
Screen 2:
return (
<>
<View
style={[
commonStyles.paddingBottom_20,
commonStyles.positionRelative,
commonStyles.dFlex,
commonStyles.alignItemsCenter,
Platform.OS === 'ios'
? commonStyles.marginTop_60
: commonStyles.marginTop_20,
styles.sectionBorder,
]}>
<SharedElement id={`expertTitle`} style={styles.pageTitle}>
<Text style={styles.pageTitle}>{strings.expert}</Text>
</SharedElement>
<TouchableOpacity
style={[styles.actionIcon, commonStyles.marginLeft_20]}
onPress={() => navigation.pop()}>
<Image source={Icons.ic_chevron_left} />
</TouchableOpacity>
</View>
<SharedElement id="hey">
<Text
style={[
styles.title,
commonStyles.marginTop_300,
commonStyles.marginBottom_10,
commonStyles.alignSelfCenter,
]}>
HEY THERE
</Text>
</SharedElement>
</>
);
MDProfile.sharedElements = (route, otherRoute, showing) => {
// const { request } = route.params;
return [
{ id: 'hey', animation: 'fade' },
];
};
App.js
const sharedElementConfig = {
headerShown: false,
transitionSpec: {
open: { animation: 'timing', config: { duration: 1000 } },
close: { animation: 'timing', config: { duration: 1000 } },
},
cardStyleInterpolator: ({ current: { progress } }) => {
return {
cardStyle: {
opacity: progress,
},
};
},
};
<RootStack.Screen
options={{ headerShown: false }}
name={NavigationRoutes.Request}
component={RequestDetails}
/>
<RootStack.Screen
options={{ headerShown: false }}
name={NavigationRoutes.Profile}
component={MDProfile}
options={() => sharedElementConfig}
/>
Dependencies:
"dependencies": {
"react-native-animatable": "^1.3.3",
"react-native-shared-element": "^0.7.0",
"react-native-splash-screen": "^3.2.0",
"react-navigation": "^4.4.3",
"react-navigation-shared-element": "^5.0.0-alpha1",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.1.0",
"@react-navigation/stack": "^5.2.1",
"metro-react-native-babel-preset": "^0.65.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-vector-icons": "^7.1.0",
}
PS: Issue persists only on the iOS platform, Android works well with the same code and setup.
Any kind of help would be much appreciated.
@KawaljeetCuelogic answer please when you find solution Same behavior with example app
First Screen:
export default class MainScreen extends React.Component {
onPress = () => {
this.props.navigation.push('DetailScreen');
};
render() {
return (
<View style={{flex: 1}}>
<TouchableOpacity style={{width: 200, height: 200}} onPress={this.onPress}>
<View style={styles.container}>
<SharedElement style={styles.image} id="image">
<Image style={styles.image} source={require('./theboys.jpg')} />
</SharedElement>
<SharedElement id="text">
<Text style={styles.text}>The Boys</Text>
</SharedElement>
<Text style={styles.caption}>tap me</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
Second Screen:
const DetailScreen: React.FC = () => (
<View style={{flex: 1}}>
<View style={styles.container}>
<SharedElement id="image" style={{width, height: width}}>
<Image style={styles.image} source={require('./theboys.jpg')} />
</SharedElement>
<SharedElement id="text">
<Text style={styles.text}>The Boys</Text>
</SharedElement>
</View>
</View>
);
DetailScreen.sharedElements = (route, otherRoute, showing) => {
return [{id: 'image'}, {id: 'text', animation: 'fade'}];
};
export default DetailScreen;
Navigation:
<SharedStack.Navigator>
<SharedStack.Screen name={'SharedElement'} component={SharedElement} />
<SharedStack.Screen
name={'DetailScreen'}
component={DetailScreen}
options={() => ({
gestureEnabled: false,
transitionSpec: {
open: {animation: 'timing', config: {duration: 1000}},
close: {animation: 'timing', config: {duration: 1000}},
},
cardStyleInterpolator: ({current: {progress}}) => {
return {
cardStyle: {
opacity: progress,
},
};
},
})}
/>
</SharedStack.Navigator>
Dependencies: react-native-cli
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1",
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^5.0.0-alpha1",
},
@chiefchief Haven't found any solution for it mate. Seems like this library is not well maintained :(
@KawaljeetCuelogic i've found solution in closed issues - https://github.com/IjzerenHein/react-navigation-shared-element/issues/130
remove enableScreens();
Hey @chiefchief Thanks alot for your efforts man. That worked.
I'm having the same issue on an expo project (sdk 41). It certainly looks fine on Android but on Ios the shared element goes to the top left corner when going back. Hope this issue get solved. Btw enableScreens()
doesnt really help.
When go back from a details screen the image wrapped inside SharedElement got stuck in the screen, here's a video:
https://user-images.githubusercontent.com/43631579/108575576-58069800-72e0-11eb-97f7-ffe6e9005160.mov
And this is my code of ScrollView:
and code in the DetailsScreen
my stackNavigator:
versions:
I hope anyone can help me :( im very stuck at this moment (haha)