Question 35113 in React native Question posted in
The official React Native documentation can be found here.

Set rgba value for statusbar background React Native iOS/Android

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
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search