title: react native splash page warning
body: <p>I have made an splash page looks like this:</p>
  <pre><code>export default class Splash extends Component {
    performTimeConsumingTask = async () =&gt; {
      return new Promise((resolve) =&gt;
        setTimeout(() =&gt; {
          resolve('result');
        }),
      );
    };
  
    async componentDidMount() {
      const data = await this.performTimeConsumingTask();
      // const navigation = useNavigation();
      if (data !== null) {
        this.props.navigation.navigate('BottomMainNavgigation');
      }
    }
  
    render() {
      return (
        &lt;View style={styles.viewStyles}&gt;
          {/* &lt;Text style={styles.textStyles}&gt;Welcome&lt;/Text&gt; */}
          &lt;Image
            style={styles.tinyLogo}
            source={{
              uri: URL.logov2,
            }}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  <p>THen I use this like this, in my navigation:</p>
  <pre><code>const RootStackScreen = (props) =&gt; {
    const [t] = useTranslation();
    return (
      &lt;SplashRootStack.Navigator&gt;
        &lt;SplashRootStack.Screen
          name=&quot;Main&quot;
          component={Splash}
          options={{headerShown: false, headerBackTitle: t('back')}}
        /&gt;
        &lt;SplashRootStack.Screen
          name=&quot;BottomMainNavgigation&quot;
          component={BottomMainNavgigation}
          options={{headerShown: false, headerBackTitle: t('back')}}
        /&gt;
      &lt;/SplashRootStack.Navigator&gt;
    );
  };
  </code></pre>
  <p>and also:</p>
  <pre><code>&lt;PaperProvider theme={MyTheme}&gt;
    &lt;NavigationContainer linking={linking} fallback={&lt;Splash /&gt;}&gt;
      &lt;RootStackScreen /&gt;
    &lt;/NavigationContainer&gt;
  &lt;/PaperProvider&gt;
  </code></pre>
  <p>and like this in my app.js:</p>
  <pre><code>const App = () =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate loading={&lt;Splash /&gt;} persistor={persistor}&gt;
          &lt;Suspense fallback={&lt;Splash /&gt;}&gt;
            &lt;Navigation /&gt;
          &lt;/Suspense&gt;
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>when I run the application it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/KoVQk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KoVQk.png" alt="enter image description here" /></a></p>
  <p>there is a warning :</p>
  <p><a href="https://i.stack.imgur.com/lOk3e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lOk3e.png" alt="enter image description here" /></a></p>
  <p>I get this warning with id= 0, 1 and 2 and I get this warning also:</p>
  <p><a href="https://i.stack.imgur.com/wgAVK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wgAVK.png" alt="enter image description here" /></a></p>
  <p>what have I donr incorrectly ad how can I remove these warnings, also when I load the app in the emulator, I get a white screen for few seconds before I get my own splash page and then to my app.</p>
  <p>how can I do this better?</p>