diff --git a/Examples/FlatList.js b/Examples/FlatList.js
index 027142e..84edce1 100644
--- a/Examples/FlatList.js
+++ b/Examples/FlatList.js
@@ -6,7 +6,7 @@ import {
   Image,
   TouchableOpacity,
   FlatList,
-  Dimensions,
+  Dimensions
 } from 'react-native';
 
 import { Transition, FluidNavigator } from '../lib';
@@ -15,23 +15,26 @@ class ListScreen extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      items: [],
+      items: []
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const items = [];
     const imageSize = 80;
     const numberOfImages = 40;
     const randMax = 100;
     for (let i = 0; i < numberOfImages; i++) {
-      let randomNumber = Math.floor((Math.random() * randMax) + 1);
-      const idExists = (e) => e.id === randomNumber;
+      let randomNumber = Math.floor(Math.random() * randMax + 1);
+      const idExists = e => e.id === randomNumber;
       while (items.findIndex(idExists) > -1) {
-        randomNumber = Math.floor((Math.random() * randMax) + 1);
+        randomNumber = Math.floor(Math.random() * randMax + 1);
       }
 
-      items.push({ url: `https://picsum.photos/${imageSize}/${imageSize}?image=${randomNumber}`, id: randomNumber });
+      items.push({
+        url: `https://picsum.photos/${imageSize}/${imageSize}?image=${randomNumber}`,
+        id: randomNumber
+      });
     }
     this.setState({ ...this.state, items });
   }
@@ -51,7 +54,9 @@ class ListScreen extends React.Component {
   renderItem = ({ item, index }) => (
     <TouchableOpacity
       style={styles.row}
-      onPress={() => { this.props.navigation.navigate('details', { item, index }); }}
+      onPress={() => {
+        this.props.navigation.navigate('details', { item, index });
+      }}
     >
       <Transition shared={`image${index}`}>
         <Image style={styles.image} source={{ uri: item.url }} />
@@ -61,8 +66,7 @@ class ListScreen extends React.Component {
         <Text>{item.url}</Text>
       </View>
     </TouchableOpacity>
-
-  )
+  );
 }
 
 class DetailsScreen extends React.Component {
@@ -81,7 +85,10 @@ class DetailsScreen extends React.Component {
               <Text style={styles.caption}>Image URI:</Text>
               <Text>{this.props.navigation.state.params.item.url}</Text>
             </View>
-            <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.goBack()}>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => this.props.navigation.goBack()}
+            >
               <Text>Back</Text>
             </TouchableOpacity>
           </View>
@@ -93,7 +100,7 @@ class DetailsScreen extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
   },
   row: {
     margin: 10,
@@ -106,57 +113,58 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 5 },
     shadowOpacity: 0.4,
     flexDirection: 'row',
-    elevation: 3,
+    elevation: 3
   },
   textContainer: {
     flexDirection: 'column',
     marginLeft: 18,
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   image: {
     width: 80,
     height: 80,
-    borderRadius: 40,
+    borderRadius: 40
   },
   caption: {
     fontWeight: 'bold',
-    fontSize: 14,
+    fontSize: 14
   },
   largeImage: {
     width: Dimensions.get('window').width,
-    height: Dimensions.get('window').width,
+    height: Dimensions.get('window').width
   },
   bottomContainer: {
     backgroundColor: '#ECECEC',
     flex: 1,
-    padding: 20,
+    padding: 20
   },
   button: {
     padding: 12,
     backgroundColor: '#CECECE',
     justifyContent: 'center',
-    alignItems: 'center',
-  },
+    alignItems: 'center'
+  }
 });
 
-const Navigator = FluidNavigator({
-  list: { screen: ListScreen },
-  details: { screen: DetailsScreen },
-}, {
-  defaultNavigationOptions: {
-    gesturesEnabled: true,
+const Navigator = FluidNavigator(
+  {
+    list: { screen: ListScreen },
+    details: { screen: DetailsScreen }
   },
-});
+  {
+    defaultNavigationOptions: {
+      gesturesEnabled: true
+    }
+  }
+);
 
 class FlatListScreen extends React.Component {
   static router = Navigator.router;
 
   render() {
     const { navigation } = this.props;
-    return (
-      <Navigator navigation={navigation} />
-    );
+    return <Navigator navigation={navigation} />;
   }
 }
 
diff --git a/Examples/ImageTransition.js b/Examples/ImageTransition.js
index 1a52866..f245dd1 100644
--- a/Examples/ImageTransition.js
+++ b/Examples/ImageTransition.js
@@ -1,71 +1,83 @@
 import React, { Component } from 'react';
-import { View, Text, Dimensions, Button, TouchableOpacity, FlatList, Image, StyleSheet } from 'react-native';
+import {
+  View,
+  Text,
+  Dimensions,
+  Button,
+  TouchableOpacity,
+  FlatList,
+  Image,
+  StyleSheet
+} from 'react-native';
 import chunk from 'lodash.chunk';
 import { FluidNavigator, Transition } from '../lib';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
   },
   detailsImage: {
     width: Dimensions.get('window').width,
-    height: Dimensions.get('window').width * 0.5,
+    height: Dimensions.get('window').width * 0.5
   },
   detailsView: {
     padding: 10,
     backgroundColor: '#ECECEC',
-    flex: 1,
+    flex: 1
   },
   buttonContainer: {
     flex: 1,
-    justifyContent: 'flex-end',
+    justifyContent: 'flex-end'
   },
   text: {
-    paddingBottom: 40,
+    paddingBottom: 40
   },
   row: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   cell: {
-    margin: 2,
+    margin: 2
   },
   header: {
     height: 65,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#0000FA',
+    backgroundColor: '#0000FA'
   },
   headerText: {
     fontWeight: 'bold',
     fontSize: 18,
-    color: '#FFF',
+    color: '#FFF'
   },
   imageContainer: {
-    flexDirection: 'row',
-  },
+    flexDirection: 'row'
+  }
 });
 
 class ImageListScreen extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      items: [],
+      items: []
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const items = [];
     const size = Dimensions.get('window').width;
     const max = 39;
     const randMax = 100;
     for (let i = 0; i < max; i++) {
-      let randomNumber = Math.floor((Math.random() * randMax) + 1);
-      const idExists = (e) => e.id === randomNumber;
+      let randomNumber = Math.floor(Math.random() * randMax + 1);
+      const idExists = e => e.id === randomNumber;
       while (items.findIndex(idExists) > -1) {
-        randomNumber = Math.floor((Math.random() * randMax) + 1);
+        randomNumber = Math.floor(Math.random() * randMax + 1);
       }
 
-      items.push({ url: `https://picsum.photos/${size}/${size}?image=${randomNumber}`, id: randomNumber });
+      items.push({
+        url: `https://picsum.photos/${size}/${size}?image=${randomNumber}`,
+        id: randomNumber
+      });
     }
     this.setState({ ...this.state, items });
   }
@@ -75,9 +87,12 @@ class ImageListScreen extends React.Component {
       <View style={styles.container}>
         <ImageGrid
           images={this.state.items}
-          imageSelected={(image) => this.props.navigation.navigate('imageDetails', { url: image.url })}
+          imageSelected={image =>
+            this.props.navigation.navigate('imageDetails', { url: image.url })
+          }
         />
-      </View>);
+      </View>
+    );
   }
 }
 
@@ -101,7 +116,7 @@ class ImageDetailsScreen extends React.Component {
           <View style={styles.detailsView}>
             <Text style={styles.text}>{uri}</Text>
             <View style={styles.buttonContainer}>
-              <Button title="Back" onPress={() => navigation.goBack()} />
+              <Button title='Back' onPress={() => navigation.goBack()} />
             </View>
           </View>
         </Transition>
@@ -116,20 +131,24 @@ class ImageGrid extends Component {
     this._colCount = 3;
     const { width: windowWidth } = Dimensions.get('window');
     this._margin = 2;
-    this._photoSize = (windowWidth - this._margin * this._colCount * 2) / this._colCount;
+    this._photoSize =
+      (windowWidth - this._margin * this._colCount * 2) / this._colCount;
     this.state = { chunkedImages: chunk(props.images, this._colCount) };
   }
 
-  _colCount
+  _colCount;
 
-  _photoSize
+  _photoSize;
 
-  _margin
+  _margin;
 
-  _chunkedImages
+  _chunkedImages;
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ ...this.state, chunkedImages: chunk(nextProps.images, this._colCount) });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    this.setState({
+      ...prevState,
+      chunkedImages: chunk(nextProps.images, this._colCount)
+    });
   }
 
   render() {
@@ -138,7 +157,8 @@ class ImageGrid extends Component {
         data={this.state.chunkedImages}
         keyExtractor={this.keyExtractor}
         renderItem={this.renderItem.bind(this)}
-      />);
+      />
+    );
   }
 
   keyExtractor(item, index) {
@@ -155,11 +175,14 @@ class ImageGrid extends Component {
 
   renderCell(image) {
     return (
-      <TouchableOpacity onPress={() => this.props.imageSelected(image)} key={image.url}>
+      <TouchableOpacity
+        onPress={() => this.props.imageSelected(image)}
+        key={image.url}
+      >
         <View style={styles.cell}>
           <Transition shared={image.url}>
             <Image
-              resizeMode="cover"
+              resizeMode='cover'
               source={{ uri: image.url }}
               style={{ width: this._photoSize, height: this._photoSize }}
             />
@@ -170,23 +193,24 @@ class ImageGrid extends Component {
   }
 }
 
-const Navigator = FluidNavigator({
-  imageList: { screen: ImageListScreen },
-  imageDetails: { screen: ImageDetailsScreen },
-}, {
-  defaultNavigationOptions: {
-    gesturesEnabled: true,
+const Navigator = FluidNavigator(
+  {
+    imageList: { screen: ImageListScreen },
+    imageDetails: { screen: ImageDetailsScreen }
   },
-});
+  {
+    defaultNavigationOptions: {
+      gesturesEnabled: true
+    }
+  }
+);
 
 class ImageTransitions extends React.Component {
   static router = Navigator.router;
 
   render() {
     const { navigation } = this.props;
-    return (
-      <Navigator navigation={navigation} />
-    );
+    return <Navigator navigation={navigation} />;
   }
 }
 
diff --git a/lib/TransitionItemsView.js b/lib/TransitionItemsView.js
index c6a975b..79116cb 100644
--- a/lib/TransitionItemsView.js
+++ b/lib/TransitionItemsView.js
@@ -6,7 +6,7 @@ import {
   Easing,
   InteractionManager,
   Animated,
-  findNodeHandle,
+  findNodeHandle
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { ScreenContainer } from 'react-native-screens';
@@ -23,7 +23,7 @@ type State = {
   index: number,
   sharedElements: ?Array<any>,
   transitionElements: ?Array<TransitionItem>
-}
+};
 
 type Props = {
   children: Array<any>,
@@ -33,11 +33,10 @@ type Props = {
   index: ?number,
   navigation: any,
   style: StyleSheet.Styles,
-  onLayout: (evt: any) => void,
-}
+  onLayout: (evt: any) => void
+};
 
-export default class TransitionItemsView extends React.Component<
-  Props, State> {
+export default class TransitionItemsView extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this._isMounted = false;
@@ -49,7 +48,7 @@ export default class TransitionItemsView extends React.Component<
       direction: NavigationDirection.Unknown,
       sharedElements: null,
       transitionElements: null,
-      index: -1,
+      index: -1
     };
 
     this._transitionItems = new TransitionItems();
@@ -58,7 +57,7 @@ export default class TransitionItemsView extends React.Component<
     // this._transitionProgress.addListener(console.log);
 
     this._interactionDonePromise = new Promise(
-      resolve => this._interactionDonePromiseDone = resolve,
+      resolve => (this._interactionDonePromiseDone = resolve)
     );
   }
 
@@ -80,40 +79,47 @@ export default class TransitionItemsView extends React.Component<
 
   _shouldRunStartAnimation: boolean = true;
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateFromProps(nextProps, this.props);
-  }
-
   updateFromProps(props, prevProps) {
     if (!this._isMounted) return;
 
     const { fromRoute, toRoute } = props;
-    const direction = props.index >= (prevProps ? prevProps.index : Number.MIN_SAFE_INTEGER)
-      ? NavigationDirection.forward : NavigationDirection.back;
+    const direction =
+      props.index >= (prevProps ? prevProps.index : Number.MIN_SAFE_INTEGER)
+        ? NavigationDirection.forward
+        : NavigationDirection.back;
 
     const index = prevProps ? props.index : 0;
 
-    if (toRoute !== this.state.toRoute
-      || fromRoute !== this.state.fromRoute
-      || index !== this.state.index
-      || direction !== this.state.direction) {
+    if (
+      toRoute !== this.state.toRoute ||
+      fromRoute !== this.state.fromRoute ||
+      index !== this.state.index ||
+      direction !== this.state.direction
+    ) {
       this.setState({
         toRoute,
         fromRoute,
         direction,
-        index,
+        index
       });
     }
   }
 
   render() {
     const { style, children } = this.props;
-    const { direction, fromRoute, toRoute, index, sharedElements, transitionElements } = this.state;
+    const {
+      direction,
+      fromRoute,
+      toRoute,
+      index,
+      sharedElements,
+      transitionElements
+    } = this.state;
     return (
       <View
         {...this.props}
         style={[styles.container, style]}
-        ref={(ref) => this._viewRef = ref}
+        ref={ref => (this._viewRef = ref)}
         collapsable={false}
       >
         <ScreenContainer style={{ ...StyleSheet.absoluteFillObject }}>
@@ -133,50 +139,70 @@ export default class TransitionItemsView extends React.Component<
 
   getDirectionForRoute = (name: string, route: string): RouteDirection => {
     const { fromRoute, toRoute } = this.state;
-    if (!fromRoute && !toRoute) { return RouteDirection.unknown; }
-    if (!fromRoute) { return RouteDirection.to; } // First screen, always direction to
+    if (!fromRoute && !toRoute) {
+      return RouteDirection.unknown;
+    }
+    if (!fromRoute) {
+      return RouteDirection.to;
+    } // First screen, always direction to
     if (route === fromRoute) {
       return RouteDirection.from;
-    } if (route === toRoute) {
+    }
+    if (route === toRoute) {
       return RouteDirection.to;
     }
     return RouteDirection.unknown;
-  }
+  };
 
   getTransitionProgress = (useNative = true) => {
     if (useNative) return this._transitionProgress;
 
     if (!this._nonNativeTransitionProgress) {
       this._nonNativeTransitionProgress = new Animated.Value(-1);
-      this._transitionProgress.addListener(Animated.event([{
-        value: this._nonNativeTransitionProgress }],
-      { useNativeDriver: false }));
+      this._transitionProgress.addListener(
+        Animated.event(
+          [
+            {
+              value: this._nonNativeTransitionProgress
+            }
+          ],
+          { useNativeDriver: false }
+        )
+      );
     }
     return this._nonNativeTransitionProgress;
-  }
+  };
 
   getRoutes = () => {
     const { fromRoute, toRoute } = this.state;
     return [fromRoute, toRoute].filter(r => r !== null);
-  }
+  };
 
   getIsAnchored = (name: string, route: string) => {
     const item = this._transitionItems.getItemByNameAndRoute(name, route);
     if (!item) return false;
 
     const { fromRoute, toRoute } = this.state;
-    const sharedElements = this._transitionItems.getSharedElements(fromRoute, toRoute);
-    if (sharedElements
-      && (sharedElements.find(p => p.fromItem.name === item.anchor && p.fromItem.route === route))
-      || sharedElements.find(p => p.toItem.name === item.anchor && p.toItem.route === route)) {
+    const sharedElements = this._transitionItems.getSharedElements(
+      fromRoute,
+      toRoute
+    );
+    if (
+      (sharedElements &&
+        sharedElements.find(
+          p => p.fromItem.name === item.anchor && p.fromItem.route === route
+        )) ||
+      sharedElements.find(
+        p => p.toItem.name === item.anchor && p.toItem.route === route
+      )
+    ) {
       return true;
     }
     return false;
-  }
+  };
 
-  getItemByNameAndRoute = (
-    name: string, route: string,
-  ) => this._transitionItems.getItemByNameAndRoute(name, route)
+  getItemByNameAndRoute = (name: string, route: string) =>
+    this._transitionItems.getItemByNameAndRoute(name, route);
 
   getItemDelayInfo = (name: string, route: string) => {
     const { fromRoute, toRoute } = this.state;
@@ -197,54 +223,71 @@ export default class TransitionItemsView extends React.Component<
 
     for (let i = 0; i < transitionElements.length; i++) {
       delayIndex += delayFactor;
-      if (transitionElements[i].name === name
-        && transitionElements[i].route === route) {
+      if (
+        transitionElements[i].name === name &&
+        transitionElements[i].route === route
+      ) {
         break;
       }
     }
 
     return { delayCount, delayIndex };
-  }
+  };
 
   getIsPartOfSharedTransition = (name: string, route: string) => {
     const item = this._transitionItems.getItemByNameAndRoute(name, route);
     if (!item || !item.shared) return false;
 
     const { fromRoute, toRoute } = this.state;
-    const sharedElements = this._transitionItems.getSharedElements(fromRoute, toRoute);
+    const sharedElements = this._transitionItems.getSharedElements(
+      fromRoute,
+      toRoute
+    );
 
-    if (sharedElements.find(pair => (pair.fromItem.name === item.name
-      && pair.fromItem.route === item.route)
-      || (pair.toItem.name === item.name && pair.toItem.route === item.route))) {
+    if (
+      sharedElements.find(
+        pair =>
+          (pair.fromItem.name === item.name &&
+            pair.fromItem.route === item.route) ||
+          (pair.toItem.name === item.name && pair.toItem.route === item.route)
+      )
+    ) {
       return true;
     }
     return false;
-  }
+  };
 
   getDirection = () => {
     const { direction } = this.state;
     return direction;
-  }
+  };
 
   getIndex = () => {
     const { index } = this.state;
     return index;
-  }
+  };
 
   getIsPartOfTransition = (name: string, route: string) => {
     const item = this._transitionItems.getItemByNameAndRoute(name, route);
     if (!item || !(item.appear || item.disappear)) return false;
 
     const { fromRoute, toRoute } = this.state;
-    const transitionElements = this._transitionItems.getTransitionElements(fromRoute, toRoute);
+    const transitionElements = this._transitionItems.getTransitionElements(
+      fromRoute,
+      toRoute
+    );
 
-    if (transitionElements.find(o => item.name === o.name && item.route === o.route)) {
+    if (
+      transitionElements.find(
+        o => item.name === o.name && item.route === o.route
+      )
+    ) {
       return true;
     }
     return false;
-  }
+  };
 
-  async getViewMetrics():Metrics {
+  async getViewMetrics(): Metrics {
     const nodeHandle = findNodeHandle(this._viewRef);
     let viewMetrics: Metrics;
     if (!nodeHandle) return viewMetrics;
@@ -261,7 +304,7 @@ export default class TransitionItemsView extends React.Component<
 
   async measureItems(
     sharedElements: Map<TransitionItem, TransitionItem>,
-    transitionElements: Array<TransitionItem>,
+    transitionElements: Array<TransitionItem>
   ) {
     const promises = [];
     const viewMetrics = await this.getViewMetrics();
@@ -272,12 +315,16 @@ export default class TransitionItemsView extends React.Component<
         promises.push(this.measureItem(viewMetrics, pair.toItem));
         if (pair.fromItem && pair.fromItem.anchors) {
           for (let n = 0; n < pair.fromItem.anchors.length; n++) {
-            promises.push(this.measureItem(viewMetrics, pair.fromItem.anchors[n]));
+            promises.push(
+              this.measureItem(viewMetrics, pair.fromItem.anchors[n])
+            );
           }
         }
         if (pair.toItem && pair.toItem.anchors) {
           for (let n = 0; n < pair.toItem.anchors.length; n++) {
-            promises.push(this.measureItem(viewMetrics, pair.toItem.anchors[n]));
+            promises.push(
+              this.measureItem(viewMetrics, pair.toItem.anchors[n])
+            );
           }
         }
       }
@@ -305,8 +352,8 @@ export default class TransitionItemsView extends React.Component<
   }
 
   _inUpdate: boolean = false;
-
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
+    this.updateFromProps(this.props, prevProps);
     if (this._inUpdate) return;
     const { fromRoute, toRoute } = this.state;
     if (!fromRoute && !toRoute) return;
@@ -315,14 +362,22 @@ export default class TransitionItemsView extends React.Component<
 
     // Wait a little bit to give the layout system some time to reconcile
     let measureAndUpdateFunc = async () => {
-      const sharedElements = this._transitionItems.getSharedElements(fromRoute, toRoute);
-      const transitionElements = this._transitionItems.getTransitionElements(fromRoute, toRoute);
+      const sharedElements = this._transitionItems.getSharedElements(
+        fromRoute,
+        toRoute
+      );
+      const transitionElements = this._transitionItems.getTransitionElements(
+        fromRoute,
+        toRoute
+      );
 
       await this._interactionDonePromise;
       await this.measureItems(sharedElements, transitionElements);
 
-      if (!sharedElements.find(p => !p.fromItem.metrics || !p.toItem.metrics)
-        && !transitionElements.find(i => !i.metrics)) {
+      if (
+        !sharedElements.find(p => !p.fromItem.metrics || !p.toItem.metrics) &&
+        !transitionElements.find(i => !i.metrics)
+      ) {
         // Update style based on calculation by re-rendering all transition elements.
         // Ref, https://github.com/fram-x/FluidTransitions/issues/8
         this._transitionItems.getItems().forEach(item => item.forceUpdate());
@@ -331,16 +386,19 @@ export default class TransitionItemsView extends React.Component<
         // this is the only way we can notify the transitioner that we are
         // ready to move along with the transition and we're trying to be nice
         // by waiting a few milliseconds
-        this.setState((prevState) => ({
-          ...prevState,
-          sharedElements,
-          transitionElements,
-        }), () => {
-          const { onLayout } = this.props;
-          if (onLayout) onLayout();
-          this._runStartAnimation(transitionElements.length);
-          this._inUpdate = false;
-        });
+        this.setState(
+          prevState => ({
+            ...prevState,
+            sharedElements,
+            transitionElements
+          }),
+          () => {
+            const { onLayout } = this.props;
+            if (onLayout) onLayout();
+            this._runStartAnimation(transitionElements.length);
+            this._inUpdate = false;
+          }
+        );
       }
     };
 
@@ -349,7 +407,9 @@ export default class TransitionItemsView extends React.Component<
   }
 
   async _runStartAnimation(numberOfTransitions: number) {
-    if (!this._shouldRunStartAnimation) { return; }
+    if (!this._shouldRunStartAnimation) {
+      return;
+    }
 
     this._shouldRunStartAnimation = false;
     const { getTransitionConfig } = this.context;
@@ -360,13 +420,14 @@ export default class TransitionItemsView extends React.Component<
     }
 
     const transitionSpec = getTransitionConfig
-      ? getTransitionConfig(toRoute, navigation) : {
-        timing: Animated.timing,
-        duration: 650,
-        easing: Easing.inOut(Easing.poly(4)),
-        isInteraction: true,
-        useNativeDriver: true,
-      };
+      ? getTransitionConfig(toRoute, navigation)
+      : {
+          timing: Animated.timing,
+          duration: 650,
+          easing: Easing.inOut(Easing.poly(4)),
+          isInteraction: true,
+          useNativeDriver: true
+        };
 
     const { timing } = transitionSpec;
     delete transitionSpec.timing;
@@ -374,8 +435,8 @@ export default class TransitionItemsView extends React.Component<
       timing(this._transitionProgress, {
         ...transitionSpec,
         duration: numberOfTransitions === 0 ? 25 : transitionSpec.duration,
-        toValue: index,
-      }),
+        toValue: index
+      })
     ];
 
     Animated.parallel(animations).start();
@@ -411,27 +472,27 @@ export default class TransitionItemsView extends React.Component<
     getRoutes: PropTypes.func,
     getIsAnchored: PropTypes.func,
     getItemByNameAndRoute: PropTypes.func,
-    getItemDelayInfo: PropTypes.func,
-  }
+    getItemDelayInfo: PropTypes.func
+  };
 
   static contextTypes = {
-    getTransitionConfig: PropTypes.func,
-  }
+    getTransitionConfig: PropTypes.func
+  };
 
   getChildContext() {
     return {
-      register: (item) => this._transitionItems.add(item),
+      register: item => this._transitionItems.add(item),
       unregister: (name, route) => this._transitionItems.remove(name, route),
       getTransitionProgress: this.getTransitionProgress,
       getDirectionForRoute: this.getDirectionForRoute,
       getIndex: () => this.getIndex(),
-      getDirection: () => (this.getDirection() || NavigationDirection.unknown),
+      getDirection: () => this.getDirection() || NavigationDirection.unknown,
       getIsPartOfSharedTransition: this.getIsPartOfSharedTransition,
       getIsPartOfTransition: this.getIsPartOfTransition,
       getIsAnchored: this.getIsAnchored,
       getRoutes: this.getRoutes,
       getItemByNameAndRoute: this.getItemByNameAndRoute,
-      getItemDelayInfo: this.getItemDelayInfo,
+      getItemDelayInfo: this.getItemDelayInfo
     };
   }
 }
@@ -439,6 +500,6 @@ export default class TransitionItemsView extends React.Component<
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    overflow: 'hidden',
-  },
+    overflow: 'hidden'
+  }
 });
diff --git a/lib/TransitionView.js b/lib/TransitionView.js
index 59ad377..e2f21eb 100644
--- a/lib/TransitionView.js
+++ b/lib/TransitionView.js
@@ -22,8 +22,8 @@ type TransitionProps = {
   innerRef: ?any,
   children: Array<any>,
   zIndex: Number,
-  inline: ?boolean,
-}
+  inline: ?boolean
+};
 
 class Transition extends React.Component<TransitionProps> {
   static contextTypes = {
@@ -39,8 +39,8 @@ class Transition extends React.Component<TransitionProps> {
     getIsAnchored: PropTypes.func,
     getItemByNameAndRoute: PropTypes.func,
     getRoutes: PropTypes.func,
-    getItemDelayInfo: PropTypes.func,
-  }
+    getItemDelayInfo: PropTypes.func
+  };
 
   constructor(props: TransitionProps, context: any) {
     super(props, context);
@@ -48,9 +48,9 @@ class Transition extends React.Component<TransitionProps> {
     this._animatedComponent = null;
   }
 
-  _name: string
+  _name: string;
 
-  _route: string
+  _route: string;
 
   _isMounted: boolean;
 
@@ -61,35 +61,42 @@ class Transition extends React.Component<TransitionProps> {
   _outerAnimatedComponent: any;
 
   shouldComponentUpdate(nextProps) {
-    return (this.props !== nextProps);
+    return this.props !== nextProps;
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
+    this._isMounted = true;
     const { route, register } = this.context;
-    const { shared, appear, disappear, delay, zIndex, anchor,
-      animated, inline = false } = this.props;
+    const {
+      shared,
+      appear,
+      disappear,
+      delay,
+      zIndex,
+      anchor,
+      animated,
+      inline = false
+    } = this.props;
     if (register) {
       this._route = route;
-      register(new TransitionItem(
-        this._getName(),
-        route,
-        this,
-        shared !== undefined,
-        appear,
-        disappear,
-        delay !== undefined,
-        zIndex || _zIndex++,
-        anchor,
-        animated,
-        inline,
-      ));
+      register(
+        new TransitionItem(
+          this._getName(),
+          route,
+          this,
+          shared !== undefined,
+          appear,
+          disappear,
+          delay !== undefined,
+          zIndex || _zIndex++,
+          anchor,
+          animated,
+          inline
+        )
+      );
     }
   }
 
-  componentDidMount() {
-    this._isMounted = true;
-  }
-
   componentWillUnmount() {
     this._isMounted = false;
     const { unregister } = this.context;
@@ -108,8 +115,12 @@ class Transition extends React.Component<TransitionProps> {
 
   _getName(): string {
     const { shared, name } = this.props;
-    if (shared) { return shared; }
-    if (name) { return name; }
+    if (shared) {
+      return shared;
+    }
+    if (name) {
+      return name;
+    }
     return this._name;
   }
 
@@ -117,10 +128,16 @@ class Transition extends React.Component<TransitionProps> {
     const { children, innerRef } = this.props;
 
     let element = React.Children.only(children);
-    if (!element) { return null; }
+    if (!element) {
+      return null;
+    }
 
-    if (!this._animatedComponent) { this._animatedComponent = createAnimated(); }
-    if (!this._outerAnimatedComponent) { this._outerAnimatedComponent = createAnimated(); }
+    if (!this._animatedComponent) {
+      this._animatedComponent = createAnimated();
+    }
+    if (!this._outerAnimatedComponent) {
+      this._outerAnimatedComponent = createAnimated();
+    }
 
     const visibilityStyle = this.getVisibilityStyle();
     const transitionStyle = this.getTransitionStyle();
@@ -129,7 +146,7 @@ class Transition extends React.Component<TransitionProps> {
     element = React.createElement(element.type, {
       ...element.props,
       key,
-      ref: this.setViewRef,
+      ref: this.setViewRef
     });
 
     return createAnimatedWrapper({
@@ -139,36 +156,50 @@ class Transition extends React.Component<TransitionProps> {
       cached: this._animatedComponent,
       innerRef,
       log: true,
-      logPrefix: `TV ${this._getName()}/${this._route}`,
+      logPrefix: `TV ${this._getName()}/${this._route}`
     });
   }
 
   setViewRef = (ref: any) => {
     this._viewRef = ref;
-  }
+  };
 
   getTransitionStyle() {
     const { inline = false } = this.props;
     if (!inline) return {};
 
-    const { getTransitionProgress, getIndex, getIsAnchored,
-      getIsPartOfSharedTransition, getIsPartOfTransition, getRoutes,
-      getItemByNameAndRoute, getDirectionForRoute, getItemDelayInfo } = this.context;
-    if (!getTransitionProgress
-      || !getIndex
-      || !getIsAnchored
-      || !getIsPartOfSharedTransition
-      || !getIsPartOfTransition
-      || !getItemByNameAndRoute
-      || !getDirectionForRoute
-      || !getItemDelayInfo
-      || !getRoutes) return {};
+    const {
+      getTransitionProgress,
+      getIndex,
+      getIsAnchored,
+      getIsPartOfSharedTransition,
+      getIsPartOfTransition,
+      getRoutes,
+      getItemByNameAndRoute,
+      getDirectionForRoute,
+      getItemDelayInfo
+    } = this.context;
+    if (
+      !getTransitionProgress ||
+      !getIndex ||
+      !getIsAnchored ||
+      !getIsPartOfSharedTransition ||
+      !getIsPartOfTransition ||
+      !getItemByNameAndRoute ||
+      !getDirectionForRoute ||
+      !getItemDelayInfo ||
+      !getRoutes
+    )
+      return {};
 
     const progress = getTransitionProgress();
     const index = getIndex();
-    if (!progress || index === undefined) return { };
+    if (!progress || index === undefined) return {};
 
-    const isPartOfTransition = getIsPartOfTransition(this._getName(), this._route);
+    const isPartOfTransition = getIsPartOfTransition(
+      this._getName(),
+      this._route
+    );
     if (isPartOfTransition) {
       const item = getItemByNameAndRoute(this._getName(), this._route);
       const routeDirection = getDirectionForRoute(this._getName(), this._route);
@@ -180,7 +211,7 @@ class Transition extends React.Component<TransitionProps> {
         index,
         routeDirection,
         progress,
-        getRoutes().length === 1,
+        getRoutes().length === 1
       );
       return transitionStyle;
     }
@@ -189,28 +220,57 @@ class Transition extends React.Component<TransitionProps> {
 
   getVisibilityStyle() {
     const { inline = false } = this.props;
-    const { getTransitionProgress, getIndex, getIsAnchored,
-      getIsPartOfSharedTransition, getIsPartOfTransition,
-      getItemByNameAndRoute, getDirectionForRoute } = this.context;
-    if (!getTransitionProgress || !getIndex || !getIsAnchored
-      || !getIsPartOfSharedTransition || !getIsPartOfTransition
-      || !getItemByNameAndRoute || !getDirectionForRoute) return {};
+    const {
+      getTransitionProgress,
+      getIndex,
+      getIsAnchored,
+      getIsPartOfSharedTransition,
+      getIsPartOfTransition,
+      getItemByNameAndRoute,
+      getDirectionForRoute
+    } = this.context;
+    if (
+      !getTransitionProgress ||
+      !getIndex ||
+      !getIsAnchored ||
+      !getIsPartOfSharedTransition ||
+      !getIsPartOfTransition ||
+      !getItemByNameAndRoute ||
+      !getDirectionForRoute
+    )
+      return {};
 
     const progress = getTransitionProgress();
     const index = getIndex();
-    if (!progress || index === undefined) return { };
-
-    const inputRange = [index - 1, (index - 1) + Constants.OP, index - Constants.OP, index];
+    if (!progress || index === undefined) return {};
+
+    const inputRange = [
+      index - 1,
+      index - 1 + Constants.OP,
+      index - Constants.OP,
+      index
+    ];
     const outputRange = [1, 0, 0, 1];
 
-    const isPartOfSharedTransition = getIsPartOfSharedTransition(this._getName(), this._route);
-    const isPartOfTransition = getIsPartOfTransition(this._getName(), this._route);
+    const isPartOfSharedTransition = getIsPartOfSharedTransition(
+      this._getName(),
+      this._route
+    );
+    const isPartOfTransition = getIsPartOfTransition(
+      this._getName(),
+      this._route
+    );
     const isAnchored = getIsAnchored(this._getName(), this._route);
-    const visibilityProgress = progress.interpolate({ inputRange, outputRange });
+    const visibilityProgress = progress.interpolate({
+      inputRange,
+      outputRange
+    });
 
-    if (isPartOfSharedTransition
-      || (isPartOfTransition && !inline)
-      || isAnchored) {
+    if (
+      isPartOfSharedTransition ||
+      (isPartOfTransition && !inline) ||
+      isAnchored
+    ) {
       return { opacity: visibilityProgress };
     }
     return {};
@@ -222,7 +282,7 @@ const styles = StyleSheet.create({
     // backgroundColor: '#0000EF22',
     // borderColor: '#FF0000',
     // borderWidth: 1,
-  },
+  }
 });
 
 export default Transition;