Image under the Navigationbar & StatusBar

[salisuabubakar]

Hello,

Thanks once again for your time. I would like to know if i can achieve the image below with The Navigation Router on Both android and ios. Thanks

[grahammendick]

You mean edge 2 edge, right?

On iOS, that's the default. So don't use a SafeAreaView and don't set contentInsetAdjustmentBehavior to 'automatic' on ScrollView/FlatList and the content will go under the status bar and notch. Also set the barTintColor of the NavigationBar to 'transparent' so the content shows through.

On Android, you need to turn on some native settings. I don't think you need the Navigation router to do this for you but I'm pretty sure it would be easier if it did. I plan to look into this soon. If you're interested in contributing to the Navigation router then it might be something you could investigate? No pressure, of course.

[salisuabubakar]

Hi @grahammendick ,
I have got it working on ios. Yet to try it on android. I would like to say thank you once again. However, i couldnt get the transluscent to work. Can i use The Navigation Router to achieve that . Thanks

[salisuabubakar]

Hi, still waiting for your response. Thanks

[grahammendick]

Hey, you only updated me yesterday. It's on my list

[grahammendick]

I got it working on Android. I turned on edge to edge in the Activity

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

Then I made the NavigationBar and StatusBar transparent and shifted the content up with -60 margin top.

<View collapsable={false} style={{flex: 1}}>
  <NavigationBar title="Home" barTintColor="transparent">
    <StatusBar barTintColor="transparent" tintStyle="dark" />
  </NavigationBar>
  <ScrollView style={{ marginTop: -60}}>
</View>

[salisuabubakar]

Hi @grahammendick ,
Yes it works but the NavigationBar will be hidden. On ios you will see the navigation bar with the back icon. I hope you got what am trying to say. Thanks

[grahammendick]

Give the ScrollView content a 'zIndex' of -1 so the NavigationBar appears on top

[grahammendick]

I released navigation-react-native v9.25.0 with edge-to-edge support.

To enable edge-to-edge call enableEdgeToEdge from within the MainActivity

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge();
    super.onCreate(savedInstanceState)
}