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

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

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: