Shared Element Transition Distorts Image

Hi guys! Thank you for the awesome work!

I'm trying to achieve this kind of transition based on Udacity's tutorial on Shared Element Transitions (https://www.youtube.com/watch?v=Z1Ilz-v1yF0). I'm only interested in the image transition and not the exploding part.

## My Goal


## My Accomplishment


## My Code

Based on the boilerplate here - https://github.com/lelandrichardson/native-navigation-boilerplate.

### ScreenOne

```javascript
import React from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Dimensions, ScrollView } from 'react-native';
import Navigator, { SharedElement, SharedElementGroup } from 'native-navigation';

const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1,
},

scrollView: {
flexWrap: 'wrap',
flexDirection: 'row',
alignItems: 'flex-start',
},

photo: {
width: width/2,
height: 200,
resizeMode: 'cover',
borderWidth: 1,
borderColor: 'white',
}
});

export const images = [
require('./images/0.jpeg'),
require('./images/1.jpeg'),
require('./images/2.jpeg'),
require('./images/3.jpeg')
];

const onPress = (index) => {
const id = 'photo' + index;

Navigator.push('ScreenTwo', { index }, {
transitionGroup: id
});
};

export default class ScreenOne extends React.Component {
render() {
return (

{
images.map((image, index) => (

onPress(index)}>





))
}



)
}
}
```

### ScreenTwo

```javascript
import React from 'react';
import { StyleSheet, View, Image, Dimensions, Text } from 'react-native';
import Navigator, { SharedElement } from 'native-navigation';
import { images } from './ScreenOne';

const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1,
},

photo: {
width: width,
height: 200,
resizeMode: 'cover',
},

text: {
padding: 20,
},
});

export default class ScreenTwo extends React.Component {

render() {
const id = 'photo' + this.props.index;
const imageSource = images[this.props.index];

return(

Some text here...



)
}
}
```

## My Questions

1. Is the distortion the expected behavior?
2. Is the goal achievable?
3. Where did I screw up?

Thanks!

_Images from Unsplash_

Start by reproducing the distortion using the ScreenOne and ScreenTwo examples from the issue, then compare their SharedElement and transitionGroup usage with the linked native-navigation-boilerplate. No test or source file is named; completion would require determining whether the behavior is expected and identifying the correct usage or a confirmed fix.

Written by the indexing model from the issue text.