Yes, @react-navigation/native-stack allows you to create a sliding animation from left for Stack Screen on iOS. This can be achieved by setting the transition property of the Stack.Screen component to a custom animation function like slideFromLeft. Here is an example:
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
const Stack = createStackNavigator();
function slideFromLeft(transitionProps, prevTransitionProps) {
return {
cardStyleInterpolator: ({ current, next, inverted, layouts: { screen } }) => {
const progress = Animated.add(
current.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
}),
next
? next.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
})
: 0
);
return {
cardStyle: {
transform: [
{
translateX: Animated.multiply(
progress.interpolate({
inputRange: [0, 1, 2],
outputRange: [
screen.width, // Focused, but offscreen in the beginning
0, // Fully focused
screen.width * -0.3, // Fully unfocused
],
}),
inverted
),
},
],
},
};
},
};
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
options={{ ...TransitionPresets.SlideFromRightIOS, ...slideFromLeft() }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
In this example, we have created a custom animation function called slideFromLeft that uses the cardStyleInterpolator
to create a sliding animation from left for the stack screen. We have then added this animation function to the options property of the Stack.Screen component for the Details screen along with the TransitionPresets.SlideFromRightIOS
animation to create a more seamless transition.
Asked: 2023-05-08 03:07:10 +0000
Seen: 10 times
Last updated: May 08 '23