Skip to main content
Version: 0.7.x

AnimatedContainer

This component is built on top of Reanimated custom animations and let us animate the entry and exitFrom of the container, honouring the [Reduce Motion] (https://reactnative.dev/docs/accessibilityinfo) preference.

Example

import {AnimatedContainer} from 'react-native-ama';

<AnimatedContainer
from={{transform: [{translateY: 'targetHeight'}]}}
to={{transform: [{translateY: 0}]}}
exitFrom={{transform: [{translateY: 'currentHeight'}]}}
style={styles.timedContent}
duration={300}
autofocus/>

When the component is mounted, it will animate it from: from -> to, and when it is unmounted, it will animate it from: exitFrom -> to. If the property exitFrom from is not specified, it will then play the animation in reverse: to -> from.

Accessibility

For both, enter and exitFrom animation, the component will use a duration={0} for each motion property when Reduce Motion option is enabled.

Props

autofocus

If set to true, wraps the child inside the AutofocusContainer

TypeDefault
booleanfalse

duration

The preferred animation duration.

TypeDefault
number300
note

The component will use a duration={0} for each motion property when Reduce Motion option is enabled.

Required from

The initial value of the animation.

Type
ViewStyle | ReanimatedEntryValues

This parameter sets the initial values for the Reanimated custom animations. In additional to ViewStyle, this property also allows access to special values available by Reanimated:

ValueDescription
targetOriginXX coordinate of top left corner in parent's coordinate system
targetOriginYY coordinate of top left corner in parent's coordinate system
targetWidthview's width
targetHeightview's height
targetGlobalOriginXX coordinate of top left corner in global coordinate system
targetGlobalOriginYY coordinate of top left corner in global coordinate system

Example

import {AnimatedContainer} from 'react-native-ama';

<AnimatedContainer
from={{transform: [{translateY: 'targetHeight'}]}}
to={{transform: [{translateY: 0}]}}
/>

In this example, translateY is assigned the value of the view's height when the container is animated.

Required to

The final (or initial) value of the animation.

Type
ViewStyle

This value is used for both entering and exiting animation. For the entering animation, this is used as the final state; for the exitFrom one, as the initial state.

import {AnimatedContainer} from 'react-native-ama';

<AnimatedContainer
from={ {opacity: 0} }
to={{ opacity: 1 }}
/>

In this case, the view will fade In when mounted and fade out when unmounted.

exitFrom

The initial value for the unmounting animation.

Type
ViewStyle | ReanimatedExitValues

In additional to ViewStyle this property also allows to access to special values available by Reanimated:

ValueDescription
currentOriginXX coordinate of top left corner in parent's coordinate system
currentOriginYY coordinate of top left corner in parent's coordinate system
currentWidthview's width
currentHeightview's height
currentGlobalOriginXX coordinate of top left corner in global coordinate system
currentGlobalOriginYY coordinate of top left corner in global coordinate system
import {AnimatedContainer} from 'react-native-ama';

<AnimatedContainer
from={{transform: [{translateY: 'targetHeight'}]}}
to={{transform: [{translateY: 0}]}}
exitFrom={{transform: [{translateY: 'currentHeight'}]}}
/>

Because in the from animation, we did specify the special value targetHeight we need to provide a "different" value for the exiting animation as that special name does not exist for the exitFrom animation.

note

If not specified, the from value is used as the final one for the unmounting animation.

style

The container style

Type
ViewStyle