statusbar translucent

[Jayasrirameshbabu]

Feature Request

This feature need to implement because most of the bottom sheet packages supports this feature

Why it is needed

when bottom sheet is opened at that time we need statusBarTranslucent true for better ui

Possible implementation

import React, {useCallback, useRef, useMemo, useEffect} from 'react';
import {
View,
Text,
StyleSheet,
Pressable,
StatusBar,
TouchableWithoutFeedback,
BackHandler,
} from 'react-native';
import BottomSheet, {
BottomSheetBackdrop,
BottomSheetBackdropProps,
BottomSheetFlatList,
} from '@gorhom/bottom-sheet';
import {useTheme} from '../../../theme/ThemeContext';
import {VariantsCardsData} from '../../../redux/types/detailsType';
import FastImage from 'react-native-fast-image';
import {SizeConfig} from '../../../assets/size/size';
import {FlatList} from 'react-native-gesture-handler';
import {BottomSheetFlatListProps} from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
import {Theme} from '../../../theme/Theme';

interface Props {
isVisible: boolean;
onHide: () => void;
cardsData: VariantsCardsData[];
onClick: (id: number, title: string, variantId: number) => void;
}

const VariantModalSheet: React.FC = ({
isVisible,
onHide,
cardsData,
onClick,
}) => {
const {theme} = useTheme();
const styles = createStyles(theme);
const bottomSheetRef = useRef(null);

const snapPoints = useMemo(() => ['42%'], []);

useEffect(() => {
if (bottomSheetRef.current) {
if (isVisible) {
bottomSheetRef.current.snapToIndex(0);
// StatusBar.setHidden(true);
StatusBar.setTranslucent(true);
StatusBar.setBarStyle('light-content');
// StatusBar.setBackgroundColo r('rgba(0,0,0,0.4)');
} else {
bottomSheetRef.current.close();
StatusBar.setHidden(false);
}
}
}, [isVisible]);

useEffect(() => {
const backAction = () => {
bottomSheetRef.current?.close();
return true;
};

const backHandler = BackHandler.addEventListener(
  'hardwareBackPress',
  backAction,
);

return () => backHandler.remove();

}, []);

const handleSheetChanges = useCallback(
(index: number) => {
if (index === -1) {
onHide();
}
},
[onHide],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);

const renderItem = ({item}: {item: VariantsCardsData}) => (
<Pressable
onPress={() => {
onHide();
onClick(item.id, item.title, item.itemlist.id);
}}>


{item.title}

<FastImage
source={{uri: item.images[0]}}
style={styles.cardImage}
resizeMode="contain"
/>
{item.ex_price}


);

return (
<BottomSheet
ref={bottomSheetRef}
index={-1}
snapPoints={snapPoints}
onChange={handleSheetChanges}
topInset={StatusBar.currentHeight}
enablePanDownToClose={true}
enableContentPanningGesture={true}
handleIndicatorStyle={{
width: SizeConfig.width * 18,
height: SizeConfig.height * 0.4,
backgroundColor: theme.dark ? '#fff' : '#D9D9D9',
alignItems: 'center',
}}
backdropComponent={renderBackdrop}
backgroundStyle={{
backgroundColor: theme.colors.background,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
}}>

VARIANTS
<FlatList
scrollEnabled={true}
data={cardsData}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
paddingVertical: SizeConfig.height * 2,
paddingHorizontal: SizeConfig.width * 3,
gap: SizeConfig.width * 3,
}}
/>


);
};

const createStyles = (theme: Theme) =>
StyleSheet.create({
modalContent: {
alignItems: 'center',
},
divder: {
width: SizeConfig.width * 20,
height: SizeConfig.height * 0.4,
backgroundColor: theme.dark ? theme.colors.cardBg02 : '#D9D9D9',
alignItems: 'center',
marginBottom: SizeConfig.height * 2,
},
header: {
fontSize: SizeConfig.width * 4.1,
color: '#8484DF',
fontFamily: 'Outfit-SemiBold',
fontWeight: '600',
textAlign: 'center',
paddingVertical: SizeConfig.height,
},
card: {
width: SizeConfig.width * 45,
alignItems: 'center',
borderRadius: SizeConfig.width * 3.5,
borderColor: theme.colors.textFiledBg,
backgroundColor: theme.colors.textFiledBg,
shadowColor: '#000000',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.25,
elevation: 4,
shadowRadius: 1,
textAlign: 'center',
paddingVertical: SizeConfig.height * 2,
paddingHorizontal: SizeConfig.width * 2,
alignContent: 'center',
},
cardImage: {
width: SizeConfig.width * 38,
height: SizeConfig.width * 19,
resizeMode: 'contain',
},
cardText: {
fontSize: SizeConfig.width * 3.3,
color: theme.colors.text,
fontFamily: 'Outfit-Medium',
fontWeight: '500',
textAlign: 'center',
},
cardPrice: {
fontSize: SizeConfig.width * 3.6,
color: theme.colors.text,
fontFamily: 'Outfit-SemiBold',
fontWeight: '600',
textAlign: 'center',
paddingTop: SizeConfig.height * 1.5,
},
});

export default VariantModalSheet;

Code sample