EdgeLight: Screen borders are not going beyond the notch and softkeys

I am just trying to implement “edge light” Ref in react native.

Environment: It happens in Android. System: OS: Windows 10 10.0.18362 CPU: (4) x64 Intel® Core™ i5-7200U CPU @ 2.50GHz Memory: 5.31 GB / 11.89 GB Binaries: Node: 10.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.2 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897 npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5

I have this below code to achieve it. <Layout style={{ flex: 1, paddingTop: 18, paddingBottom: 18, paddingLeft: 28, paddingRight: 28, borderWidth: 10, borderColor: '#36ABA5', justifyContent: 'center', backgroundColor: '#000', color: '#fff' }}> // All my code </Layout> This seems to be working fine for the mobiles which are having straigh screens. But I am facing 2 issues,

1. The same is not working when the mobile has notch or the mobile’s softkeys are enabled.
2. in Honor 8x the border itself is not coming when softkeys are disabled, when those are enabled, the border comes above the softkeys,

I tried calculating the window height, screen height and put the border. It seems to be not happening.

In Straight phone:

In Notch phone:

In Softkeys enabled:

In Softkeys disabled:

Wanted similar to this, but not colorful/ Expected Results:

[sanjeevkse]

Hi, Please help me here.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community’s attention? This issue may be closed if no further activity occurs. You may also label this issue as a “Discussion” or add it to the “Backlog” and I will leave it open. Thank you for your contributions.