When transitioning in a Shared Element Transition, image resize modes squeeze for a frame before bouncing back to the correct ratio, causing an effect of the picture shaking.
Device info (Simulator/Device? OS version? Debug/Release?): Simulator & Device, iOS 15.2, Debug Version
Reproducible Demo
`import React from 'react';
import {Pressable, Text, View} from 'react-native';
import {Navigation, NavigationFunctionComponent} from 'react-native-navigation';
import FastImage from 'react-native-fast-image';
import {RootRoutes} from 'routes/RootRoutes.enum';
`import React from 'react';
import {Pressable, Text, useWindowDimensions, View} from 'react-native';
import {Navigation, NavigationFunctionComponent} from 'react-native-navigation';
import FastImage from 'react-native-fast-image';
π Bug Report
When transitioning in a Shared Element Transition, image resize modes squeeze for a frame before bouncing back to the correct ratio, causing an effect of the picture shaking.
Have you read the Contributing Guidelines on issues?
yes
To Reproduce
(Write your steps here:)
Expected behavior
expected a smooth transition without the image aspect ratio / resize mode adjusting.
Actual Behavior
https://user-images.githubusercontent.com/50343717/151049778-cc32260f-1e9b-494c-aa60-76436f73a179.mov
Your Environment
Reproducible Demo
`import React from 'react'; import {Pressable, Text, View} from 'react-native'; import {Navigation, NavigationFunctionComponent} from 'react-native-navigation'; import FastImage from 'react-native-fast-image'; import {RootRoutes} from 'routes/RootRoutes.enum';
const FirstScreen: NavigationFunctionComponent = ({ componentId, }): JSX.Element => {
const onPress = (): void => { Navigation.push(componentId, { component: { name: RootRoutes.SecondScreen, options: { animations: { push: { sharedElementTransitions: [ { fromId: 'smallImage', toId: 'largeImage', interpolation: {type: 'linear'}, }, ], }, pop: { sharedElementTransitions: [ { fromId: 'largeImage', toId: 'smallImage', interpolation: {type: 'linear'}, }, ], }, }, }, }, }).catch(err => console.log('[FirstScreen] ERROR', err)); };
return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
); };
export default FirstScreen;`
`import React from 'react'; import {Pressable, Text, useWindowDimensions, View} from 'react-native'; import {Navigation, NavigationFunctionComponent} from 'react-native-navigation'; import FastImage from 'react-native-fast-image';
const SecondScreen: NavigationFunctionComponent = ({ componentId, }): JSX.Element => { const {width} = useWindowDimensions();
return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
); };
export default SecondScreen;`
Are you willing to resolve this issue by submitting a Pull Request?