statusBarTranslucent not working

[Ladvace]

This is how I'm using my keyboardProvider, I'm using "expo": "~52.0.32" with "expo-router": "~4.0.17", despite settings statusBarTranslucent I still see the statusbar, removing KeyboardProvider it disappear so I'm pretty sure that's where it's coming from. not sure if I'm using it wrong

      <GestureHandlerRootView style={{ flex: 1 }}>
        <KeyboardProvider
          statusBarTranslucent
        >
          <SafeAreaProvider>
            <BottomSheetModalProvider>
              <PortalProvider>
                <Host>
                  <ClerkProvider
                    {...other propsÏ}
                  >
                    <StatusBar style="dark" hidden />
                    <App />
                  </ClerkProvider>
                </Host>
              </PortalProvider>
            </BottomSheetModalProvider>
          </SafeAreaProvider>
        </KeyboardProvider>
      </GestureHandlerRootView>
      ```

[kirillzyusko]

@Ladvace can you attach a screenshot how it looks like?

Can you remove all other components in the tree and keep only KeyboardProvider and StatusBar and check what the behavior will be in this case?

Which version of keyboard-controller do you use?

[Ladvace]

I'm using "react-native-keyboard-controller": "^1.16.2",

leaving only keyboardProvider and statusBar (and SafeAreaProvider) I still see the statusbar

    <SafeAreaProvider>
      <KeyboardProvider statusBarTranslucent={true}>
        <StatusBar style="dark" hidden />
        <View
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "white",
          }}
        >
          <Text>hi</Text>
        </View>
      </KeyboardProvider>

    </SafeAreaProvider>

[Ladvace]

removing the keyboardProvider I can see it correctly(without the statusbar)

[kirillzyusko]

I use your code in my example app:

import "react-native-gesture-handler";

import * as React from "react";
import { ActivityIndicator, StatusBar, StyleSheet, Text, View } from "react-native";
import { KeyboardProvider } from "react-native-keyboard-controller";
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from "react-native-safe-area-context";

export default function App() {
  return (
    <SafeAreaProvider>
      <KeyboardProvider statusBarTranslucent={true}>
        <StatusBar hidden style="dark" />
        <View
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "white",
          }}
        >
          <Text style={{color: "black"}}>hi</Text>
        </View>
      </KeyboardProvider>
    </SafeAreaProvider>
  );
}

The result I get:

Please, add reproduction repo so that I can help further 😊

Also which emulator and which OS version do you use?

[Ladvace]

I'm gonna try doing some more test in these days, I'm using this android emulator:

[Ladvace]

on ios I don't get that either, the problem it's on android

[Ladvace]

At the end I found the problem, it was coming from the hidden prop on the statusBar, removing it, it works fine

<StatusBar style="dark" hidden />