title: Why is there a white "loading screen" before my page transitions in React Native?
body: <p>I finally got my page transition animation working correctly (it slides from the bottom to the top of the screen) but for some reason there is a blank white "loading screen" that appears before the page does and it is ruining the whole point of the sliding animation!  Can someone please tell me how to get rid of this white screen?!</p>
  
  <p>Please see a video I made of this:  <a href="https://youtu.be/92XGji7L-RU" rel="noreferrer">https://youtu.be/92XGji7L-RU</a></p>
  
  <pre><code>const { height: deviceHeight } = Dimensions.get('window');
  
  class OrdersScreen extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              offset: new Animated.Value(deviceHeight),
          };
      }
  
      componentDidMount() {
          Animated.timing(this.state.offset, {
            duration: 350,
            toValue: 0,
          }).start();
      }
  
      closeModal() {
          Animated.timing(this.state.offset, {
            duration: 350,
            toValue: -deviceHeight,
          }).start(Actions.pop);
      }
  
      searchOrders = searchTerm =&gt; {
          this.props.dispatch(searchOrdersWithStatus(this.props.orderStatus, searchTerm))
      }
  
      render() {
          // default to Active Orders
          const status = this.props.orderStatus || ORDER_TYPE_DELIVERIES;
          let title = 'Order History';
  
          if (ORDER_TYPE_DELIVERIES == status) {
              title = 'Orders';
          }
  
          if (ORDER_TYPE_ISSUES == status) {
              title = 'Item Alerts';
          }
  
          return (
              &lt;Animated.View style={[styles.wrapper, { transform: [{ translateY: this.state.offset }] }]}&gt;
                  &lt;OrderHeader title={title} enableBack={false} /&gt;
  
                  &lt;FullWidthSearchBar placeholder='Search Orders' changeCallback={this.searchOrders} timeoutMillis={500} /&gt;
  
                  &lt;OrderSummaryList orderStatus={status} /&gt;
              &lt;/Animated.View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      wrapper: {
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          alignItems: 'center',
          justifyContent: 'flex-start'
      }
  });
  </code></pre>