The Transition component is used to animate components as they enter and exit the component tree.


import posed, { Transition } from 'react-native-pose';


To animate posed components as they’re added and removed from the React tree, provide them as direct children of Transition.

Set enter and exit poses to define how they should animate in and out.

Switching visibility

const Box = posed.View({
  enter: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 50 }

export default ({ isVisible }) => (
    {isVisible && <Box key="a" />}

Switching components

export default ({ toShow }) => (
    {toShow === 'a' ? <Box key="a" /> : <Box key="b" />}

Multiple children

export default ({ items }) => (
    { => <Box key={} />)}

Passing props to children

A common problem with transition components is passing props to components that have been removed from the tree. They might be animating out, but as far as React is concerned, they’ve already left (so props don’t get updated).

With Pose for React Native, any props you provide to Transition will be forwarded to all children, even ones that are leaving the tree.

This allows you to use the latest props in dynamic poses:

const Item ={
  enter: { opacity: 1, x: 0 },
  exit: {
    opacity: 0,
    x: ({ selectedItemId, id }) =>
      id === selectedItemId ? 100 : -100

export default ({ items, selectedItemId }) => (
  <Transition selectedItemId={selectedItemId}>
    {{ id }) => <Item id={id} />)}


  • Posed components must be direct children of Transition.
  • Enter and exit poses will propagate throughout posed components, allowing you to animate multiple children components when their parent enters/exits.
  • Every child must have a unique key property.
  • If components affect each other’s layout, some snapping will occur when exiting components are removed. Position with position: 'absolute' or ensure exiting components animate out before animating new components in via the enterAfterExit prop.



animateOnMount: boolean = false

By default, only children added to the Transition after it has mounted are animated to enter.

By setting animateOnMount to true, all children elements will animate in on mount.


enterPose: string = 'enter'

The name of the pose to use when a component enters.


exitPose: string = 'exit'

The name of the pose to use when a component leaves.


preEnterPose: string = 'exit'

The name of the pose to set before a component enters. This can be used to configure where a components animates in from.


enterAfterExit: boolean = false

If true, Transition will finish animating exiting components out before animating entering components in.

This can be useful when animating two or more components that affect each other’s layout, which can lead to snapping when the exiting components are removed.


onRest: Function

When a component finishes exiting, it isn’t removed immediately. Instead, it’s kept in the DOM until all currently leaving components have finished animating out to prevent expensive layout thrashing.

onRest will fire when all exit transitions are complete.

If new exit transitions begin in the meantime, onRest won’t be fired until these have also finished.


All remaining props passed to Transition will be forwarded to its immediate children, for use in dynamic props.

This is useful because if you’re removing a component, it’s impossible in React to update its props without doing a two-pass render.

By providing them to the Transition prop, Pose can pass these to the posed components to change the exit animation:

const Box = posed.View({
  enter: { x: 0 },
  exit: { x: ({ delta }) => - delta * 100 + 'vw' }

export default ({ isVisible }) => (
  <Transition delta={1}>
    {isVisible && <Box key="a" />}