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

ive developed kindof same thing for adding opacity to my HEX values, its fairly simple:

export const OPACITY_PERCENTAGES = {
  PER100: 'FF',
  PER90: 'E6',
  PER80: 'CC',
  PER70: 'B3',
  PER60: '99',
  PER50: '80',
  PER40: '66',
  PER30: '4D',
  PER20: '33',
  PER10: '1A',
  PER00: '00'
};

export const opacityAddedHex = (hex, opac = OPACITY_PERCENTAGES.PER100) => {
  const hexRegex = /^#([0-9a-f]{3}){1,2}$/i;

  if (hexRegex.test(hex)) {
    return `${hex}${opac}`;
  }

  return hex;
};

basically you need to pass the HEX and also opacity in terms of OPACITY_PERCENTAGES .

Hope it clears, feel free for doubts

Answer 2

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}}