shared element navigation component code example
Example 1: react native navigation shared element
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
const stackNavigator = createSharedElementStackNavigator(
{
List: ListScreen,
Detail: DetailScreen,
},
{
initialRouteName: 'List',
}
);
const AppContainer = createAppContainer(stackNavigator);
Example 2: react native navigation shared element
import { SharedElement } from 'react-navigation-shared-element';
class ListScreen extends React.Component {
renderItem(item) {
const { navigation } = this.props;
return (
<TouchableOpacity onPress={() => navigation.push('Detail', { item })}>
<SharedElement id={`item.${item.id}.photo`}>
<Image source={item.photoUrl} />
</SharedElement>
</TouchableOpacity>
);
}
}