Set rgba value for statusbar background React Native iOS/Android-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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