react-native-navigation/docs/docs/animations.md

Animations (Preview API)

Shared element

In order to animate shared element between two screens you need to wrap your element with Navigation.Element in both screens with different elementId. For example, to animate Image element wrap it in your first screen like this:

<Navigation.Element elementId='image1'>
  <Image source={require('img/icon.png')} />
</Navigation.Element>

And in your second screen:

<Navigation.Element elementId='image2'>
  <Image source={require('img/icon.png')} />
</Navigation.Element>

Then call push or showModal with customTransition.animations options:

Navigation.push(this.props.componentId, {
  component: {
    name: 'second.screen',
    options: {
      customTransition: {
        animations: [
          { type: 'sharedElement', fromId: 'image1', toId: 'image2', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
        ],
        duration: 0.8
      }
    }
  }
});

Peek and Pop (iOS 11.4+)

react-native-navigation supports the Peek and pop feature in iOS 11.4 and newer.

This works by passing a ref a componentent you would want to transform into a peek view. We have included a handly component to handle all the touches and ref for you.

const handlePress ({ reactTag }) => {
  Navigation.push(this.props.componentId, {
    component {
      name: 'previewed.screen',
      options: {
        preview: {
          reactTag,
          height: 300,
          width: 300,
          commit: true,
          actions: [{
            title: "Displayed Name",
            id: "actionId",
            style: 'default', /* or 'selected', 'destructive'*/
            actions: [/*define a submenu of actions with the same options*/]
          }]
        },
      },
    },
  });
};

const Button = (
  <Navigation.TouchablePreview
    touchableComponent={TouchableHighlight}
    onPress={handlePress}
    onPressIn={handlePress}
  >
    <Text>My button</Text>
  </Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.