Status bar adding extra padding React-native

Question

I tried adding status bar to the app and it is adding extra padding on React-Navigation Header

status bar code

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 30 : StatusBar.currentHeight;
const NotificationBar = ({ backgroundColor, ...props }) => ({
  ...(Platform.OS == 'ios' ? (
    <View style={{ backgroundColor, height: 30 }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  ) : (
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  )),
});

const styles = StyleSheet.create({
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
});

app.js

 <Provider store={store}>
      <NotificationBar
        backgroundColor={Colors.SAPrimaryx}
        barStyle="light-content"
      />
      <PersistGate persistor={persistor}>
        <RootRouter />
      </PersistGate>
 </Provider>

How do i fix it?

Answer 1

Instead of adding a status bar i just changed the color of the content of the status bar

  <Provider store={store}>
      <StatusBar barStyle="dark-content" />
      <PersistGate persistor={persistor}>
        <RootRouter />
      </PersistGate>
    </Provider>