React

Shared Element Navigation

Sharing Elements

The Navigation router lets you smoothly transition between elements that are shared across two scenes when the user navigates from one scene to the other. It's a technique common to native apps, for example, zooming into an enlarged image when a user clicks on a thumbnail in a gallery. To identify elements you want to share across two scenes, you wrap each one in a SharedElement component and give them both the same name.

In our email example app, we can smooth out the navigation when a user opens an email by sharing the subject of the email between the 'inbox' scene and the 'mail' scene. We wrap the subject elements on each scene inside a SharedElement and name them the same.

import {SharedElement} from 'navigation-react-mobile';

// The 'inbox' scene
<SharedElement name={`mail${mail.id}`}>
  <span>{mail.subject}</span>
</SharedElement>

// The 'mail' scene
<SharedElement name={`mail${mail.id}`}>
  <span>{mail.subject}</span>
</SharedElement>

When you navigate between two States, the Navigation router calls the function you assign to the sharedElements prop of the destination Scene component. You return the shared names of the views that will participate in the transition. In our email example, we return the name we gave to the selected email.

<Scene stateKey="mail" sharedElements={data => [`mail${data.id}`]}><Mail /></Scene>