Set rgba value for statusbar background React Native iOS/Android

Question

I am using React Native .68.1 and I'm trying to set the custom StatusBar that I've found on SO. It does work, however, it only uses hex values (no alpha channel). How do I set it up to where the status bar has a 50% opaque background? Here is my Custom StatusBar:

import React from 'react';
import { Platform, StatusBar, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomStatusBar = (props: any) => {
  const { backgroundColor, ...rest } = props;
  const insets = useSafeAreaInsets()
  const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? insets.top : StatusBar.currentHeight

  return (
    <View style={{ backgroundColor: backgroundColor, height: STATUS_BAR_HEIGHT }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...rest} />
    </View>
  )
}

export default CustomStatusBar

Answer 1

This is what was able to fix my issue:

import React from 'react';
import { Platform, StatusBar, View } from 'react-native'
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomStatusBar = (props: any) => {
  const { backgroundColor, ...rest } = props;
  const insets = useSafeAreaInsets()
  const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? insets.top : StatusBar.currentHeight

  return (
    <View style={{ backgroundColor, height: STATUS_BAR_HEIGHT }} {...props.style}>
      <SafeAreaView>
        <StatusBar translucent backgroundColor={backgroundColor} {...rest} />
      </SafeAreaView>
    </View>
  )
}

export default CustomStatusBar

This is the style that I used when it was called:

style={{position: 'absolute', top: 0, left: 0, right: 0, zIndex: 999}}