How add prop statusBarTranslucent to presentation: 'transparentModal'?

[anatooly]

Hi.

For Android transparent StatusBar I use prop statusBarTranslucent

<Modal
      visible
      transparent
      animationType="fade"
      statusBarTranslucent
    >

how do that for Stack.Screen?

<Stack.Group screenOptions={{ presentation: 'transparentModal' }}>
  <Stack.Screen name='MyModal' component={MyComponent} />
</Stack.Group>

it's StatusBar not transparent, need add some code inside MyComponent like this:

 <StatusBar backgroundColor={palette.statusBarTransparent} />

but color on modal screen & status bar render on different time, it's not nice.

[anatoolybinerals]

Your example for @react-navigation/stack if use @react-navigation/native-stack we has other mistake

<Stack.Group
          screenOptions={{
            presentation: 'transparentModal',
            statusBarTranslucent: true,
          }}
        >
  <Stack.Screen name='MyModal' component={MyComponent} />
</Stack.Group>

Statusbar not transparent, cropped main content.

statusBarColor: palette.statusBarTransparent work but like 1 second freeze, status bar render of other time that content.

[anatooly]

Solution use global statusbar

<StatusBar
          barStyle="dark-content"
          backgroundColor="transparent"
          translucent
        />

and add statusbar height for u Header component

  height: HEADER_NAVBAR_HEIGHT,
   marginTop: StatusBar.currentHeight,

or

   height: HEADER_NAVBAR_HEIGHT + StatusBar.currentHeight,