My screens are getting overlapped in emulator and few mobile devices(Android) React-Native. (@react-navigation/stack": "^5.10.0")

Question

I am using stack navigation for my screens. I had connected my device initially (Android Version 10 - realme XT) and the navigation worked fine. But later the same thing I tried on the emulator (Android version 9 ) and it started overlapping the screens. The same thing happened with other devices (Android version 9 redmi note 5 pro ) also.

Navigation file code is:

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Abc from './abc';
import xyzfrom './xyz';
import {ImageBackground} from 'react-native';
import CommonBackground from '../../resource/images/StartupScreenBackground.png';
import Styles from './style';
import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import srt from './srt';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
    background: 'transparent',
  },
};

const StartScreen = createStackNavigator();

function StartScreenNavigation(props) {
  return (
    <ImageBackground source={CommonBackground} style={Styles.imageContainer}>
      <NavigationContainer theme={MyTheme}>
        <StartScreen.Navigator
          screenOptions={{
            headerShown: false,
          }}
          >
          <StartScreen.Screen name="abc" component={abc} />
          <StartScreen.Screen
            name="xyz"
            component={xyz}
          />
          <StartScreen.Screen name="srt" component={srt} />
        </StartScreen.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
}

export default StartScreenNavigation;

I am not understanding if it's the problem of Android version or the stack navigation.

Thank you!!

Answer 1

I had to create another Component and use props.children so that I could wrap it around.

Yes, it's lame, it's as good as wrapping the ImageBackground for all the individual screens but my solution helps to reduce at least a few lines of code.

Soo yep!! No need to use a theme. But that was the best solution if that had worked on the other android versions (Below 10).

Thank you!!