1import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
2
3const stackNavigator = createSharedElementStackNavigator(
4  {
5    List: ListScreen,
6    Detail: DetailScreen,
7  },
8  {
9    initialRouteName: 'List',
10  }
11);
12
13const AppContainer = createAppContainer(stackNavigator);

1// ListScreen.js
2import { SharedElement } from 'react-navigation-shared-element';
3
4class ListScreen extends React.Component {
5  renderItem(item) {
6    const { navigation } = this.props;
7    return (
8      <TouchableOpacity onPress={() => navigation.push('Detail', { item })}>
9        <SharedElement id={`item.${item.id}.photo`}>
10          <Image source={item.photoUrl} />
11        </SharedElement>
12      </TouchableOpacity>
13    );
14  }
15}

1// DetailScreen.js
2const DetailScreen = (props) => {
3  const item = props.navigation.getParam('item');
4  return (
5    <SharedElement id={`item.${item.id}.photo`}>
6      <Image source={item.photoUrl} />
7    </SharedElement>
8  );
9};
10
11DetailScreen.sharedElements = (navigation, otherNavigation, showing) => {
12  const item = navigation.getParam('item');
13  return [`item.${item.id}.photo`];
14};