Hide poster at the right time ie in onReadyForDisplay

Video.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle,Animated} from 'react-native';
+import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle} from 'react-native';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import TextTrackType from './TextTrackType';
 import FilterType from './FilterType';
@@ -20,8 +20,7 @@ export default class Video extends Component {
     super(props);
 
     this.state = {
-      showPoster: !!props.poster,
-      posterFadeAnim: new Animated.Value(1),
+      showPoster: !!props.poster
     };
   }
 
@@ -88,15 +87,7 @@ export default class Video extends Component {
   };
 
   _hidePoster = () => {
-    Animated.timing(
-      this.state.posterFadeAnim,
-      {
-        toValue: 0,
-        delay: 200, // Not ideal but need to wait for the first frame to be rendered
-        duration: 100,
-        useNativeDriver: true
-      }
-    ).start(() => this.setState({showPoster: false}));
+    this.setState({showPoster: false});
   }
 
   _onLoadStart = (event) => {
@@ -106,9 +97,6 @@ export default class Video extends Component {
   };
 
   _onLoad = (event) => {
-    if (this.state.showPoster) {
-      this._hidePoster();
-    }
     if (this.props.onLoad) {
       this.props.onLoad(event.nativeEvent);
     }
@@ -175,6 +163,9 @@ export default class Video extends Component {
   };
 
   _onReadyForDisplay = (event) => {
+    if (this.state.showPoster) {
+      this._hidePoster();
+    }
     if (this.props.onReadyForDisplay) {
       this.props.onReadyForDisplay(event.nativeEvent);
     }
@@ -323,7 +314,7 @@ export default class Video extends Component {
           style={StyleSheet.absoluteFill}
         />
         {this.state.showPoster && (
-          <Animated.Image style={[posterStyle, {opacity: this.state.posterFadeAnim}]} source={{ uri: this.props.poster }} />
+          <Image style={posterStyle} source={{ uri: this.props.poster }} />
         )}
       </View>
     );