title: How to remove the blank white screen in my android phone in a react native project?
body: <p>I am new to react-native. </p>
  
  <p>I am making a project in react-native with my android phone connected to my laptop at the USB port. When I run the project I see a blank screen on my phone. My phone is android version 9.</p>
  
  <p>First I ran <code>npm start</code> and then I ran <code>npm run android</code>. </p>
  
  <p>I ran adb -s device-name reverse tcp:8081 tcp:8081. Still the screen on my phone is blank.</p>
  
  <p>This is my App.tsx file:</p>
  
  <pre><code>import "./i18n"
  import React, { useState, useEffect, useRef } from "react"
  import { YellowBox } from "react-native"
  import { NavigationContainerRef } from "@react-navigation/native";
  import { contains } from "ramda"
  import { enableScreens } from "react-native-screens"
  import { SafeAreaProvider, initialWindowSafeAreaInsets } from "react-native-safe-area-context";
  
  import { RootNavigator, exitRoutes, setRootNavigation } from "./navigation" 
  import { useBackButtonHandler } from "./navigation/use-back-button-handler"
  import { RootStore, RootStoreProvider, setupRootStore } from "./models/root-store"
  import * as storage from "./utils/storage"
  import getActiveRouteName from "./navigation/get-active-routename"
  import { ThemeProvider } from 'react-native-elements';
  import * as theme from 'theme';
  import { AuthScreensWelcomeScreen } from './screens/auth-screens/welcome-screen';
  
  enableScreens()
  
  YellowBox.ignoreWarnings([
  "componentWillMount is deprecated",
  "componentWillReceiveProps is deprecated",
  "Require cycle:",
  ])
  
  const canExit = (routeName: string) =&gt; contains(routeName, exitRoutes)
  
  export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"
  
  const App: React.FunctionComponent&lt;{}&gt; = () =&gt; {
  const navigationRef = useRef&lt;NavigationContainerRef&gt;()
  const [rootStore, setRootStore] = useState&lt;RootStore | undefined&gt;(undefined)
  const [initialNavigationState, setInitialNavigationState] = useState()
  const [isRestoringNavigationState, setIsRestoringNavigationState] = useState(true)
  
  setRootNavigation(navigationRef)
  useBackButtonHandler(navigationRef, canExit)
  
      const routeNameRef = useRef()
      const onNavigationStateChange = state =&gt; {
      const previousRouteName = routeNameRef.current
      const currentRouteName = getActiveRouteName(state)
  
      if (previousRouteName !== currentRouteName) {
          // track screens.
          __DEV__ &amp;&amp; console.tron.log(currentRouteName)
      }
  
      // Save the current route name for later comparision
      routeNameRef.current = currentRouteName
  
      // Clear the storage if we are navigating to auth stack
      if ( ['register', 'login', 'forgotpassword'].includes(currentRouteName) ) {
          storage.remove(NAVIGATION_PERSISTENCE_KEY);
      } else {
          // Persist navigation state to storage
          storage.save(NAVIGATION_PERSISTENCE_KEY, state)
      }
  }
  
  useEffect(() =&gt; {
      (async () =&gt; {
          setupRootStore().then(setRootStore)
      })()
  }, [])
  
  useEffect(() =&gt; {
      const restoreState = async () =&gt; {
          try {
              const state = await storage.load(NAVIGATION_PERSISTENCE_KEY)
  
              if (state) {
                  setInitialNavigationState(state)
              }
          } finally {
              setIsRestoringNavigationState(false)
          }
      }
  
      if (isRestoringNavigationState) {
          restoreState()
      }
  }, [isRestoringNavigationState])
  
  if (!rootStore) {
      return null
  }
  
  return (
      &lt;SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}&gt;
          &lt;AuthScreensWelcomeScreen /&gt;
      &lt;/SafeAreaProvider&gt;
  )
  }
  
  export default App
  </code></pre>
  
  <p>Here is the welcome screen that should appear: </p>
  
  <pre><code>import React, { FunctionComponent, useState } from "react"
  import { observer } from "mobx-react-lite"
  import { Dimensions, Image } from "react-native"
  import { Screen, Button } from "components"
  import Carousel, { Pagination } from 'react-native-snap-carousel';
  import { Block } from "components/block/block"
  const { width: ScreenWidth } = Dimensions.get('screen');
  import { NavigationProp, NavigationState } from "@react-navigation/native";
  
  export interface AuthScreensWelcomeScreenProps {
  navigation?: NavigationProp&lt;Record&lt;string, object&gt;, string, NavigationState, 
  {}, {}&gt;
  }
  
  export const AuthScreensWelcomeScreen: 
  FunctionComponent&lt;AuthScreensWelcomeScreenProps&gt; = observer((props) =&gt; {
  
  const {
      navigation
  } = props;
  const [activeSlide, setActiveSlide ] = useState(0);
  
  const items = [
      { image: require('../../../assets/splash1.jpg') },
      { image: require('../../../assets/splash2.jpg') },
      { image: require('../../../assets/splash3.jpg') }
  ];
  
  function renderItem ( { item, index } ) {
      return (
          &lt;Image style={{ alignSelf: 'center', flex: 1, resizeMode: 'contain', width: ScreenWidth / 1.25 }} source={item.image}&gt;&lt;/Image&gt;
      )
  }
  
  return (
      &lt;Screen preset="fixed"&gt;
          &lt;Block flex&gt;
              &lt;Carousel
                  sliderWidth={ScreenWidth}
                  itemWidth={ScreenWidth}
                  data={ items }
                  layout="default"
                  renderItem={ renderItem }
                  onSnapToItem={ index =&gt; { setActiveSlide( index ) } }/&gt;
              &lt;Block&gt;
                  &lt;Pagination 
                      activeDotIndex={activeSlide}
                      dotsLength={items.length} 
                      dotStyle={{
                          width: 10,
                          height: 10
                      }}/&gt;
              &lt;/Block&gt;
          &lt;/Block&gt;
          &lt;Block row my={20} space="evenly" px={20}&gt;
              &lt;Button title="Continue" containerStyle={{ flex: 1 }} onPress={ ( ) =&gt; navigation.navigate('login') }/&gt;
          &lt;/Block&gt;
      &lt;/Screen&gt;
  )
  })
  </code></pre>
  
  <p>Can anyone help?</p>