<h3 dir="auto"><strong>bug</strong></h3>
<p dir="auto">You can find the code : <a href="https://codesandbox.io/s/j3233w91xw" rel="nofollow">https://codesandbox.io/s/j3233w91xw</a><br>
<strong>Code explanation :</strong></p>
<ul dir="auto">
<li>The Parent component called "ManageEvents" make an API call to get a list of Events from the backend.</li>
<li>Once the events get fetch, I use the function "map" to create the child components called "EventCard" that takes in arguments the events parameters that i fetched. (eventName, eventLocation... and EventPictureIDs)</li>
<li>In the EventCard component, I fetch the pictures url using the EventPictureIDs parameter and store the urls in the state called "picture" (  state = { picture: [] }; )</li>
<li>Then I display the pictures in the component call "CarouselComponent"</li>
</ul>
<p dir="auto">**Note : **<br>
I just added a button "delete" to delete the cards that you will create. You will get an error on the deletion ( in the javascript console) but if you refresh the page the card will be deleted.</p>
<p dir="auto"><strong>PLEASE DO NOT DELETE THE CARD THAT ALREADY EXIST OTHERWISE YOU WONT BE ABLE TO REPRODUCE THE ERROR</strong></p>
<h3 dir="auto"><strong>What is the current behavior?</strong></h3>
<p dir="auto"><strong>Issue :</strong><br>
When I create a new Event, I click on the button "Create Event" that triggers the action to create a default event as follow :<br>
let postData = {<br>
name: "New Event",<br>
location_name: "Paris",<br>
location_lat: 34.12345,<br>
location_lng: -14.12345,<br>
description: "Add the Event's Description",<br>
date: moment().format("YYYY-MM-DDThh:mm"),<br>
participant: 20,<br>
<strong>picture: []</strong><br>
};</p>
<p dir="auto">and once the event is created in the backend, I use the function "val.unshift(res.data); setstate(....);" to add the event to the ManageEvent State (I use unshift to have the new event being shown as the first Card)<br>
And then I re-render the component.<br>
The issue is that even if the new event does not have any pictures ( picture: [] ),<br>
Reactjs render the component "EventCard" showing pictures for this new event.<br>
Reactjs uses the pictures from the previous card for this new card<br>
If you refresh the page, the new card will appear correctly without pictures. but it should appear like that without to refresh the page.</p>
<p dir="auto">The state of EventCard ( (  state = { picture: [] }; ) ) is not re-init to empty at the each component creation.</p>
<p dir="auto"><strong>Note :</strong><br>
when using "unshift" the new card appears at the first place with picture (should not appears with pictures)<br>
when using "push" instead of "unshift" the new card appears at the last place without pictures (expected)</p>
<h3 dir="auto"><strong>What is the expected behavior?</strong></h3>
<p dir="auto">I want to use "unshift" to have the new card at the first place without pictures</p>
<h3 dir="auto">**Which versions of React, and which browser / OS are affected by this issue? **</h3>
<p dir="auto">"react": "^16.5.2"<br>
Chrome - Firefox</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Request a feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
<code class="notranslate">getDerivedStateFromProps</code> does not expose <code class="notranslate">prevProps</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
<code class="notranslate">getDerivedStateFromProps</code> should expose <code class="notranslate">prevProps</code> for cleaner implementation of use case mentioned below.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
react: 16.4+</p>
<p dir="auto">I know there was a similar discussion in the issues here before regarding exposing previous props in <code class="notranslate">getDerivedStateFromProps</code>, but I believe I came across a use case where this can be useful, its very specific, yet it required me to replicate a lot of previous props in the state.</p>
<p dir="auto">Below is a component I use in react-native to add an animation where screens crossfade and don't just unmount instantly, it also checks if next route is an overlay and preserves screen behind it. As you can see I had to create <code class="notranslate">prevPathname</code> <code class="notranslate">prevData</code> and <code class="notranslate">prevChildren</code> for this to work, which I think is not too terrible, yet results in a lot of repetition.</p>
<p dir="auto">Perhaps my implementation is missing something to remove the repetition or maybe I am not understanding why we are not exposing prevProps?</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// @flow
import React, { Component } from 'react'
import { Animated } from 'react-native'
import { durationNormal, easeInQuad, easeOutQuad } from '../services/Animation'
import type { Node } from 'react'

type Props = {
  pathname: string,
  data: ?{ overlay: boolean },
  children: Node,
  authenticated: boolean
}

type State = {
  prevPathname: ?string,
  prevChildren: Node,
  prevData: ?{ overlay: boolean },
  animation: Animated.Value,
  activeChildren: Node,
  pointerEvents: boolean,
  authAnimation: boolean
}

class RouteFadeAnimation extends Component&lt;Props, State&gt; {
  state = {
    prevPathname: null,
    prevChildren: null,
    prevData: null,
    animation: new Animated.Value(0),
    activeChildren: null,
    pointerEvents: true,
    authAnimation: true
  }

  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
    const { pathname, data, children } = nextProps
    const { prevPathname, prevData, prevChildren } = prevState
    // This will be returned always to store &quot;previous&quot; props in state, so we can compare against them in
    // future getDerivedStateFromProps, this is where I'd like to use prevProps
    const prevPropsState = {
      prevChildren: children,
      prevPathname: pathname,
      prevData: data
    }
    // Check if pathname changed, i.e we are going to another view
    if (pathname !== prevPathname) {
      // Check if current visible view is a modal, if it is, we go to default return
      if (!prevData || !prevData.overlay) {
        // Check if future view is not a modal
        if (!data || !data.overlay) {
          // Preserve current view while we are animationg out (even though pathname changed)
          return {
            activeChildren: prevChildren,
            pointerEvents: false,
            ...prevPropsState
          }
        // If future view is a modal, preserve current view, so it is visible behind it
        } else if (data.overlay) {
          return {
            activeChildren: prevChildren,
            ...prevPropsState
          }
        }
      }
      // If previous view was a modal (only normal view can follow after modal) reset our view persistance
      // and use children as opposed to activeChildren
      return {
        activeChildren: null,
        ...prevPropsState
      }
    }
    // Persist prevProps in state
    return {
      ...prevPropsState
    }
  }

  // This just handles animation based on cases above
  componentDidUpdate(prevProps: Props) {
    const { pathname, data, authenticated } = this.props
    const { authAnimation } = this.state
    if (authenticated &amp;&amp; authAnimation) this.animate(1)
    else if (pathname !== prevProps.pathname) {
      if (!prevProps.data || !prevProps.data.overlay) {
        if (!data || !data.overlay) this.animate(0)
      }
    }
  }

  animate = (value: 0 | 1) =&gt; {
    let delay = value === 1 ? 60 : 0
    const { authAnimation } = this.state
    if (authAnimation) delay = 2000
    Animated.timing(this.state.animation, {
      toValue: value,
      duration: durationNormal,
      delay,
      easing: value === 0 ? easeInQuad : easeOutQuad,
      useNativeDriver: true
    }).start(() =&gt; this.animationLogic(value))
  }

  animationLogic = (value: 0 | 1) =&gt; {
    if (value === 0) this.setState({ activeChildren: null }, () =&gt; this.animate(1))
    else this.setState({ pointerEvents: true, authAnimation: false })
  }

  render() {
    const { animation, pointerEvents, activeChildren } = this.state
    const { children } = this.props
    return (
      &lt;Animated.View
        pointerEvents={pointerEvents ? 'auto' : 'none'}
        style={{
          opacity: animation.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),
          transform: [
            {
              scale: animation.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] })
            }
          ]
        }}
      &gt;
        {activeChildren || children}
      &lt;/Animated.View&gt;
    )
  }
}

export default RouteFadeAnimation"><pre class="notranslate"><span class="pl-c">// <span class="pl-k">@flow</span></span>
<span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Animated</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-native'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">durationNormal</span><span class="pl-kos">,</span> <span class="pl-s1">easeInQuad</span><span class="pl-kos">,</span> <span class="pl-s1">easeOutQuad</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../services/Animation'</span>
<span class="pl-k">import</span> <span class="pl-s1">type</span> <span class="pl-kos">{</span> <span class="pl-v">Node</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-s1">type</span> <span class="pl-v">Props</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">pathname</span>: <span class="pl-s1">string</span><span class="pl-kos">,</span>
  <span class="pl-c1">data</span>: ?<span class="pl-kos">{</span> <span class="pl-c1">overlay</span>: <span class="pl-s1">boolean</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-v">Node</span><span class="pl-kos">,</span>
  <span class="pl-c1">authenticated</span>: <span class="pl-s1">boolean</span>
<span class="pl-kos">}</span>

<span class="pl-s1">type</span> <span class="pl-v">State</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">prevPathname</span>: ?<span class="pl-s1">string</span><span class="pl-kos">,</span>
  <span class="pl-c1">prevChildren</span>: <span class="pl-v">Node</span><span class="pl-kos">,</span>
  <span class="pl-c1">prevData</span>: ?<span class="pl-kos">{</span> <span class="pl-c1">overlay</span>: <span class="pl-s1">boolean</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">animation</span>: <span class="pl-v">Animated</span><span class="pl-kos">.</span><span class="pl-c1">Value</span><span class="pl-kos">,</span>
  <span class="pl-c1">activeChildren</span>: <span class="pl-v">Node</span><span class="pl-kos">,</span>
  <span class="pl-c1">pointerEvents</span>: <span class="pl-s1">boolean</span><span class="pl-kos">,</span>
  <span class="pl-c1">authAnimation</span>: <span class="pl-s1">boolean</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">RouteFadeAnimation</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span><span class="pl-c1">&lt;</span><span class="pl-v">Props</span><span class="pl-kos">,</span> <span class="pl-v">State</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
  state <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">prevPathname</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-c1">prevChildren</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-c1">prevData</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-c1">animation</span>: <span class="pl-k">new</span> <span class="pl-v">Animated</span><span class="pl-kos">.</span><span class="pl-c1">Value</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">activeChildren</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-c1">pointerEvents</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">authAnimation</span>: <span class="pl-c1">true</span>
  <span class="pl-kos">}</span>

  <span class="pl-s1">static</span> <span class="pl-s1">getDerivedStateFromProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span>: <span class="pl-v">Props</span><span class="pl-kos">,</span> <span class="pl-s1">prevState</span>: <span class="pl-v">State</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> <span class="pl-s1">pathname</span><span class="pl-kos">,</span> data<span class="pl-kos">,</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">nextProps</span>
    <span class="pl-s1">const</span> <span class="pl-kos">{</span> <span class="pl-c1">prevPathname</span><span class="pl-kos">,</span> <span class="pl-s1">prevData</span><span class="pl-kos">,</span> <span class="pl-c1">prevChildren</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">prevState</span>
    <span class="pl-c">// This will be returned always to store "previous" props in state, so we can compare against them in</span>
    <span class="pl-c">// future getDerivedStateFromProps, this is where I'd like to use prevProps</span>
    <span class="pl-k">const</span> <span class="pl-s1">prevPropsState</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c1">prevChildren</span>: <span class="pl-s1">children</span><span class="pl-kos">,</span>
      <span class="pl-c1">prevPathname</span>: <span class="pl-s1">pathname</span><span class="pl-kos">,</span>
      <span class="pl-c1">prevData</span>: <span class="pl-s1">data</span>
    <span class="pl-kos">}</span>
    <span class="pl-c">// Check if pathname changed, i.e we are going to another view</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">pathname</span> <span class="pl-c1">!==</span> <span class="pl-s1">prevPathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-c">// Check if current visible view is a modal, if it is, we go to default return</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">prevData</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">prevData</span><span class="pl-kos">.</span><span class="pl-c1">overlay</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// Check if future view is not a modal</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">data</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">overlay</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-c">// Preserve current view while we are animationg out (even though pathname changed)</span>
          <span class="pl-k">return</span> <span class="pl-kos">{</span>
            <span class="pl-c1">activeChildren</span>: <span class="pl-s1">prevChildren</span><span class="pl-kos">,</span>
            <span class="pl-c1">pointerEvents</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
            ...<span class="pl-s1">prevPropsState</span>
          <span class="pl-kos">}</span>
        <span class="pl-c">// If future view is a modal, preserve current view, so it is visible behind it</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">overlay</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-k">return</span> <span class="pl-kos">{</span>
            <span class="pl-c1">activeChildren</span>: <span class="pl-s1">prevChildren</span><span class="pl-kos">,</span>
            ...<span class="pl-s1">prevPropsState</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
      <span class="pl-c">// If previous view was a modal (only normal view can follow after modal) reset our view persistance</span>
      <span class="pl-c">// and use children as opposed to activeChildren</span>
      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">activeChildren</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
        ...<span class="pl-s1">prevPropsState</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
    <span class="pl-c">// Persist prevProps in state</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      ...<span class="pl-s1">prevPropsState</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c">// This just handles animation based on cases above</span>
  <span class="pl-en">componentDidUpdate</span><span class="pl-kos">(</span><span class="pl-s1">prevProps</span>: <span class="pl-v">Props</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> pathname<span class="pl-kos">,</span> data<span class="pl-kos">,</span> authenticated <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> authAnimation <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">authenticated</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">authAnimation</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span>
    <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">pathname</span> <span class="pl-c1">!==</span> <span class="pl-s1">prevProps</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">prevProps</span><span class="pl-kos">.</span><span class="pl-c1">data</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">prevProps</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">overlay</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">data</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">overlay</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-s1">animate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-c1">0</span> <span class="pl-c1">|</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">delay</span> <span class="pl-c1">=</span> <span class="pl-s1">value</span> <span class="pl-c1">===</span> <span class="pl-c1">1</span> ? <span class="pl-c1">60</span> : <span class="pl-c1">0</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> authAnimation <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">authAnimation</span><span class="pl-kos">)</span> <span class="pl-s1">delay</span> <span class="pl-c1">=</span> <span class="pl-c1">2000</span>
    <span class="pl-v">Animated</span><span class="pl-kos">.</span><span class="pl-en">timing</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">animation</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">toValue</span>: <span class="pl-s1">value</span><span class="pl-kos">,</span>
      <span class="pl-c1">duration</span>: <span class="pl-s1">durationNormal</span><span class="pl-kos">,</span>
      delay<span class="pl-kos">,</span>
      <span class="pl-c1">easing</span>: <span class="pl-s1">value</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span> ? <span class="pl-s1">easeInQuad</span> : <span class="pl-s1">easeOutQuad</span><span class="pl-kos">,</span>
      <span class="pl-c1">useNativeDriver</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">animationLogic</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-s1">animationLogic</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-c1">0</span> <span class="pl-c1">|</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">value</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">activeChildren</span>: <span class="pl-c1">null</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-k">else</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">pointerEvents</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">authAnimation</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> animation<span class="pl-kos">,</span> pointerEvents<span class="pl-kos">,</span> activeChildren <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">Animated</span><span class="pl-kos">.</span><span class="pl-v">View</span>
        <span class="pl-c1">pointerEvents</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pointerEvents</span> ? <span class="pl-s">'auto'</span> : <span class="pl-s">'none'</span><span class="pl-kos">}</span>
        <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
          <span class="pl-c1">opacity</span>: <span class="pl-s1">animation</span><span class="pl-kos">.</span><span class="pl-en">interpolate</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">inputRange</span>: <span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">outputRange</span>: <span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
          <span class="pl-c1">transform</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">scale</span>: <span class="pl-s1">animation</span><span class="pl-kos">.</span><span class="pl-en">interpolate</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">inputRange</span>: <span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">outputRange</span>: <span class="pl-kos">[</span><span class="pl-c1">0.94</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">]</span>
        <span class="pl-kos">}</span><span class="pl-kos">}</span>
      <span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-s1">activeChildren</span> <span class="pl-c1">||</span> <span class="pl-s1">children</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">Animated</span><span class="pl-kos">.</span><span class="pl-v">View</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">RouteFadeAnimation</span></pre></div>
<h3 dir="auto">Usage example and explanation</h3>
<p dir="auto">This component is used to wrap several routes and on pathname change preserve previous view, animate it out, replace it with new view and animate it in. Idea itself comes from react-router's documentation <a href="https://reacttraining.com/react-router/native/guides/animation/page-transitions" rel="nofollow">https://reacttraining.com/react-router/native/guides/animation/page-transitions</a> but they use <code class="notranslate">componentWillMount</code> there.</p>
<p dir="auto">basic implementation can look like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;RouterFadeAnimation 
  pathname={routerProps.pathname} 
  data={routerProps.data} 
  authenticated={authProps.auth}&gt;
     
     {routerProps.pathname === &quot;/home&quot; &amp;&amp; &lt;HomePage /&gt;}
     {routerProps.pathname === &quot;/about&quot; &amp;&amp; &lt;AboutPage /&gt;}

&lt;/RouterFadeAnimation&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">RouterFadeAnimation</span> 
  <span class="pl-c1">pathname</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">routerProps</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">}</span> 
  <span class="pl-c1">data</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">routerProps</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">}</span> 
  <span class="pl-c1">authenticated</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">authProps</span><span class="pl-kos">.</span><span class="pl-c1">auth</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
     
     <span class="pl-kos">{</span><span class="pl-s1">routerProps</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span> <span class="pl-c1">===</span> <span class="pl-s">"/home"</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">HomePage</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
     <span class="pl-kos">{</span><span class="pl-s1">routerProps</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span> <span class="pl-c1">===</span> <span class="pl-s">"/about"</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">AboutPage</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>

<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">RouterFadeAnimation</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Outside of this, there is similar component called <code class="notranslate">&lt;RouteModalAnimation /&gt;</code> that overlays component above, it similarly animates views in when routerProps.data has <code class="notranslate">overlay: true</code> set, you will see our original component checks for this and preserves its view so it appears behind the modal, as it would otherwise dissapear due to route change.</p>