I am trying to build a new react-native application using react-native-navigation. earlier we have an application which is using v2.x of react-native-navigation and I am able to work with the navigation properly, where the notch and statusBar was properly getting handled by the navigation. But with version 6.x i am not able to hide the statusBar, or you can say draw behind the statusBar. See the screenshot below with old and new app.

here is the code snippet from the MainActivity (same in both the applications (old and new)).

public class MainActivity extends NavigationActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
            layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
            getWindow().setAttributes(layoutParams);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
        super.onCreate(savedInstanceState);
    }
}

index.js

/**
 * @format
 */

import App from './App';

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import { Navigation } from 'react-native-navigation';
import { WelcomePage } from './src/screens/welcome.page';
import { StatusBar } from 'react-native';

Navigation.registerComponent(`Pages.WelcomePage`, () => WelcomePage);

StatusBar.setHidden(true);

Navigation.events().registerAppLaunchedListener(async () => {

  Navigation.setDefaultOptions({
    popGesture: false,
    topBar: {
      topMargin: 0,
      visible: false,
      drawBehind: true,
      animate: false,
      height: 0
    },
    layout: {
      orientation: 'portrait',
      backgroundColor: 'white',
      componentBackgroundColor: 'white',
      fitSystemWindows: true,
      topMargin: 0,
    },
    statusBar: {
      drawBehind: true,
      visible: false,
      backgroundColor: 'transparent',
      style: 'light'
    },
  });

  return Navigation.setRoot({
    root: {
      component: {
        name: 'Pages.WelcomePage',
      },
    },
  });
});

welcome.page.js

import React, { Component } from 'react';
import { StatusBar, Text, View } from 'react-native';

class WelcomePage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <StatusBar hidden={true}/>
        <View style={{backgroundColor: '#556677', justifyContent: 'center', alignItems: 'center', flex: 1}}>
          <Text>Hello World</Text>
        </View>
      </>
    );
  }
}

export { WelcomePage };

Device with Notch (New Application) RNN v6.x

Device with Notch (Old Application) RNN v2.x

Device without Notch (New Application) RNN v6.x

Device without Notch (Old Application) RNN v6.x

please help me understand what is changed between these two versions in terms of layout handling and how I can achieve, what i was able to achieve with the older version of react-native-navigation.