Shared element transitions allows us to provide visual continuity when navigating between destinations. It also focuses the user’s attention on a significant element which gives the user better context when transitioning to another destination.
!> At the moment, the transition is available on iOS for push and pop while on Android it’s available only for push commands. We will soon add parity and expand the supported commands to show/dismiss modal and changing BottomTabs.
In the sections below we will use the following example from the playground app:
Four elements are animated in this example.
image - the item’s image is animated to the next screen.
image background - each item has a “shadow” view which transitions to the next screen and turns into a colorful header.
title - the item’s title is animated to the next screen.
Description - the item’s description in the destination screen.
In order for RNN to be able to detect the corresponding native views of the elements,
each element must include a unique nativeID
prop.
<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'} />
<Image
source={this.props.image}
nativeID={`image${this.props.id}Dest`}
style={styles.image} />
Navigation.push(this.props.componentId, {
component: {
name: Screens.CocktailDetailsScreen,
passProps: { ...item },
options: {
animations: {
push: {
sharedElementTransitions: [
{
fromId: `image${item.id}`,
toId: `image${item.id}Dest`
}
]
}
}
}
}
});
Element transitions allow you to animate elements during shared element transitions.
In the sections below we will use the following example from the playground app:
<Text
nativeID='description'
style={styles.description}>
{this.props.description}
</Text>
Navigation.push(this.props.componentId, {
component: {
name: Screens.CocktailDetailsScreen,
passProps: { ...item },
options: {
animations: {
push: {
elementTransitions: [
{
id: 'description',
alpha: {
from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
duration: SHORT_DURATION
},
translationY: {
from: 16, // Animate translationY from 16dp to 0dp
duration: SHORT_DURATION
}
}
]
}
}
}
}
});
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.