Skip to main content
Version: 6.12.2

Animations

Various UI elements can be animated by declaring animation options. You can change the default animations for various commands, like push and pop, and even animate elements in your screens during screen transitions.

Animation properties#

The following properties can be animated with our animation framework:

  • x - Translate the view to a coordinate along the x axis.
  • y - Translate the view to a coordinate along the y axis.
  • translationX - Translate the view along the x axis relative to its current x position.
  • translationY - Translate the view along the y axis relative to its current y position.
  • alpha - Apply alpha animation to the view. A value of 0 means the view is not visible, 1 means it's visible.
  • scaleX - Scale the view on the x axis. A value of 1 means that no scaling is applied.
  • scaleY - Scale the view on the y axis. A value of 1 means that no scaling is applied.
  • rotationX - Applies rotation around the x axis (in degrees, passed as a float).
  • rotationY - Applies rotation around the y axis (in degrees, passed as a float).
  • rotation - Rotates the view on all axis. Positive values result in clockwise rotation.

Layout animations#

Stack animations#

When animating screens in and out of a stack, there are three elements you can work with:

  1. content - screen being pushed or popped
  2. topBar - stack's TopBar
  3. bottomTabs - if stack is a child of a bottomTabs layout, we can control the hide and show animations of the bottomTabs.

The following example demonstrates how to replace the default push and pop animations with slide animations.

options: {
animations: {
push: {
content: {
translationX: {
from: require('react-native').Dimensions.get('window').width,
to: 0,
duration: 300
}
}
}
}
}

Modal animations#

Modal animations are declared similarly to stack animations, only this time we animate the entire view and not only part of the UI (content).

The following example demonstrates how to show a modal with a fade-in animation.

options: {
animations: {
showModal: {
alpha: {
from: 0,
to: 1,
duration: 300
}
}
}
}

Shared element transitions#

Shared element transitions allow us to provide visual continuity when navigating between destinations. This also focuses user attention on a particular significant element, which then also gives such user better context when transitioning to some other destination.

caution

At the moment, the transition is available for push and pop commands. We are working on expanding supported commands to show/dismiss modal and change BottomTabs.

Transition breakdown#

Let's take a more in-depth look at the following example, which you can find in the playground app:

Source screen and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

  • image - the item image is animated to the next screen.

    • image scale (resizeMode)
    • position on screen

  • image background - each item has a "shadow" view which transitions to the next screen and turns into a colorful header.

    • scale
    • position on screen
    • color

  • title - the title of the item is animated to the next screen.

    • font size
    • font color
    • position on screen

  • Description - the description of the item in the destination screen.

    • fade-in
    • translation y

Implementing shared element transitions#

Step 1 - set a nativeID prop to elements in the source 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'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

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#

Element transitions also allow you to animate elements during shared element transitions.

Recreating#

Step 1 - Set a nativeID prop to the element you'd like to animate#

An element can either be in the source or destination screen.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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,
},
},
],
},
},
},
},
});

Peek and Pop (iOS 11.4+)#

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

This works by passing a ref to a component you want to transform into peek view. We have included a handy 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.

Edit this page