Some Questions about Bottomsheets

[RajAkash01]

Versions

"@gorhom/bottom-sheet": "^2.3.0",
"@gorhom/portal": "^1.0.7",

Q.1 How to set background opacity after expanding bottomsheets?

Q.2 how to change Bottomsheets pill colour and pill container colour and I am not asking about bottomsheets item container style.

Q.3 how to fix slider in bottom sheets .

1629212495959.mp4

Code here:-

<BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={snapPoints}
        activeOffsetY={[-1, 1]} 
        failOffsetX={[-5, 5]} 
        animateOnMount={true} 
        onChange={handleSheetChanges}>
        <View style={{backgroundColor:"#e5e5e5",flex:1,borderRadius:25}}>
          <Text style={{alignSelf:"center",paddingTop:20,fontWeight:"bold",fontSize:20,color:"#3E5481"}}>Add a Filter</Text>
          <Text style={{paddingTop:20,fontWeight:"bold",fontSize:20,paddingLeft:15,color:"#3E5481" }}>Category</Text>
          <View style={{flexDirection:"row"}}>
         <Touchme onPress={()=> chipselected==true?setchipselected(false):setchipselected(true)}>
           <Text style={{marginTop:12,paddingTop:5,
            paddingLeft:14,marginLeft:15,backgroundColor: chipselected==true?colors.primary:colors.white,
            borderRadius:15,borderWidth:1
            ,borderColor:colors.Outline,color:chipselected==true?colors.white:colors.Outline,width:45,height:31}}>All</Text>
          </Touchme>
         <Touchme onPress={()=> chipselected2==true?setchipselected2(false):setchipselected2(true)}>
         <Text style={{marginTop:12,paddingTop:5,
            paddingLeft:14,marginLeft:15,backgroundColor:chipselected2==true?colors.primary:colors.white,
            borderRadius:15,borderColor:colors.Outline,color:chipselected2==true?colors.white:colors.Outline,width:58,height:31}}>Food</Text>
          </Touchme>
         <Touchme onPress={()=> chipselected3==true?setchipselected3(false):setchipselected3(true)}>
         <Text style={{marginTop:12,paddingTop:5,
            paddingLeft:14,marginLeft:15,backgroundColor:chipselected3==true?colors.primary:colors.white,
            borderRadius:15,borderColor:colors.Outline,color:chipselected3==true?colors.white:colors.Outline,width:58,height:31}}>Drink</Text>
          </Touchme>
          </View>
          <View style={{flexDirection:"row",marginTop:19}}>
    <Text style={{color:"#3E5481",fontSize:18,marginLeft:18,marginTop:2,fontWeight:"bold"}}>Cooking Duration</Text>
    <Text style={{color:"#9FA5C0",fontSize:18,marginLeft:5,marginTop:2}}>{"(in minutes)"}</Text>
    </View>
    <View style={{flexDirection:"row",width:360,marginLeft:15,marginBottom:10,marginTop:10,justifyContent:"space-between"}}>
        <Text style={{color:colors.primary}}>{"<10"}</Text>
        <Text style={{color:colors.primary}}>30</Text>
        <Text style={{color:colors.primary}}>{">60"}</Text>
    </View>
    <View style={{paddingLeft:93,paddingRight:93}}>
    <NativeViewGestureHandler disallowInterruption={true}>

    <Slider style={{transform: [{ scaleX: 1.9 }, { scaleY: 1.9 }]}} 
    thumbTintColor={colors.primary}
     minimumTrackTintColor={colors.primary}
      maximumTrackTintColor="darkgrey"
      step={30}
      maximumValue={60}
      minimumValue={10}
      />
      </NativeViewGestureHandler>
    </View>
     <View style={{flexDirection:"row"}}>
       <View style={{marginRight:25,marginLeft:25,marginTop:35,width:155}}>
    <AppButton2 title="Cancel" backgroundColor="form" textcolor="#2E3E5C" elevate={false}/>
    </View>
    <View style={{width:155,marginTop:35}}>
      <Touchme onPress={()=>bottomSheetRef.current.close()}>
    <AppButton2 title="Done" elevate={false} />
    </Touchme>
    </View>
    </View>
        </View>
      </BottomSheet>

Q.4 how to get bottomsheets in behind the bottom navigator (it should not cover bottom navigator and still shows some part of bottom sheets behind bottom navigator).

1629212495926.mp4

Like this one :-

Code here:-

Bottom nav:-

import React, { useCallback, useMemo, useRef} from 'react';
import { View,StyleSheet,Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../Screens/HomeScreen';
import UploadScreen from '../Screens/UploadScreen';
import ProfileScreen from '../Screens/ProfileScreen';
import colors from '../colors';
import Homeicon from '../Svg/HomeIcon';
import Tabicon from '../components/Tabicon';
import Profileicon from '../Svg/Profileicon';
import Uploadicon from '../Svg/Uploadicon';
import Notificationicon from '../Svg/Notificationicon';
import NewListingButton from '../NewListingButton';
import ScanScreen from '../Screens/ScanScreen';
import Topnav from './Topnav';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import Bottomsheetfornav from '../components/Bottomsheetfornav';
function Bottomnav({navigation,route}) {
    const bottomSheetRef = useRef(null); 
    const snapPoints = useMemo( () =>{ return ['0%', '50%']; }, []);
  const handleSheetChanges = useCallback( (index)=> {null
}, []);
  const Tab = createBottomTabNavigator();
    //   const googleuser=route.params.user+"from google sign";
    //   const googleuser3=route.params.user2+"from signin with email";
    // const googleuser2= route.params.profile+"from profile"; 
        // console.log(googleuser3);
    return (
       <Tab.Navigator tabBarOptions={{ showLabel:false , style:{position:"absolute",
    bottom:0,
    left:0,
    right:0,
    elevation:0,
    backgroundColor:colors.white,
    borderTopColor:colors.form , // can be transparent
    borderTopWidth: 1.8, 
    height:100 ,
     }}}>
       <Tab.Screen name="Home" component={HomeScreen}  options={{
         tabBarIcon:({focused})=> <Tabicon focused={focused} icon={ focused ?<Homeicon fill="#1FCC79"/>:<Homeicon fill="#9FA5C0"/>} Name="Home"/> 
    }} />
    <Tab.Screen name="Upload" component={UploadScreen}  options={{
        tabBarIcon:({focused})=> <Tabicon focused={focused} icon={focused ?<Uploadicon fill="#1FCC79"/>:<Uploadicon fill="#9FA5C0"/>} Name="Upload" />
    }}   />
    <Tab.Screen name="Scan" component={ScanScreen} options={({navigation})=>({
        tabBarButton:({focused})=>
        <Bottomsheetfornav  focused={focused} />,
         })}  />
    <Tab.Screen name="Notification" component={HomeScreen} options={{
        tabBarIcon:({focused})=> <Tabicon focused={focused} icon={focused ?<Notificationicon fill="#1FCC79"/>:<Notificationicon fill="#9FA5C0"/>} Name="Notification"/>
    }}  />
    <Tab.Screen name="Profile" component={ProfileScreen} options={{
        tabBarIcon:({focused})=> <Tabicon focused={focused} icon={focused ?<Profileicon fill="#1FCC79"/>:<Profileicon fill="#9FA5C0"/>} Name="Profile" />
    }}   />
  </Tab.Navigator>
);
}
const styles = StyleSheet.create({
    container:{},
});
export default Bottomnav;

NewListingButtom:-

import React from "react";
import { View, StyleSheet, TouchableOpacity,Text } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "./colors";
import Scanicon from "./Svg/Scanicon";

function NewListingButton({ focused, onPress }) {
  return (
    <TouchableOpacity hitSlop={{top:100,bottom:100}} onPress={onPress}>
      <View style={styles.container}>
        <Scanicon fill={colors.primary}/>
      </View>
      <View style={{
          position:"absolute",
          bottom:30,
          alignSelf:"center"
      }} >
        <Text style={{color:focused?colors.primary:colors.Secondary_Text}} >Scan</Text>
        </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    backgroundColor: colors.primary,
    borderColor: colors.white,
    borderRadius: 40,
    borderWidth: 10,
    bottom: 48,
    height: 80,
    justifyContent: "center",
    width: 80,
  },
});

export default NewListingButton;

[gorhom]

Q.1 How to set background opacity after expanding bottomsheets?

use the default BottomSheetBackdrop and configure its props.

Q.2 how to change Bottomsheets pill colour and pill container colour and I am not asking about bottomsheets item container style.

provide your custom handle to bottom sheet by handleComponent prop

Q.3 how to fix slider in bottom sheets .

https://gorhom.github.io/react-native-bottom-sheet/troubleshooting#my-component-gesture-interaction-gets-conflicted-with-bottom-sheet-interactions-

Q.4 how to get bottomsheets in behind the bottom navigator (it should not cover bottom navigator and still shows some part of bottom sheets behind bottom navigator).

move the bottom sheet to the screen component

[RajAkash01]

First of all thank you for answering me .

Q.1 How to set background opacity after expanding bottomsheets?

use the default BottomSheetBackdrop and configure its props.

it workedBottomsheetBackdrop and it changed background opacity but it make that whole screen unusable (nothing is working )

Code here:-
Bottomsheet Code

<BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        activeOffsetY={[-1, 1]} 
        failOffsetX={[-5, 5]} 
        animateOnMount={true} 
        onChange={handleSheetChanges}
        backdropComponent={CustomBackdropforBottomsheet}
      >
//All content here!!
 </BottomSheet>

CustomBackdropforBottomsheet

import React, { useMemo } from 'react';
import { View,StyleSheet, StatusBar } from 'react-native';
import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
import Animated, { Extrapolate,interpolateNode } from 'react-native-reanimated';

const CustomBackdropforBottomsheet = ({ animatedIndex, style }) => {
    // animated variables
    const animatedOpacity = useMemo(() => interpolateNode(animatedIndex, {
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: Extrapolate.CLAMP,
    }), [animatedIndex]);
    // styles
    const containerStyle = useMemo(() => [
        style,
        {
            backgroundColor: '#a8b5eb',
            opacity: animatedOpacity,
        },
    ], [style, animatedOpacity]);
    return <Animated.View style={containerStyle}/>
};

export default CustomBackdropforBottomsheet;

Q.2 how to change Bottomsheets pill colour and pill container colour and I am not asking about bottomsheets item container style.

provide your custom handle to bottom sheet by handleComponent prop

Sir! please provide me a very basic guide on how to use handleComponent prop Like and how to change pill colour and i am new to this Development field.

Q.3 how to fix slider in bottom sheets .

https://gorhom.github.io/react-native-bottom-sheet/troubleshooting#my-component-gesture-interaction-gets-conflicted-with-bottom-sheet-interactions-

Sir! i had previously used NativeViewGestureHandle but it didn't work for me .(it just make it touchable slide but not swipable)
here are some Code which i used

<Bottomsheet>
<NativeViewGestureHandler disallowInterruption={true}>

    <Slider style={{transform: [{ scaleX: 1.9 }, { scaleY: 1.9 }]}} 
    thumbTintColor={colors.primary}
     minimumTrackTintColor={colors.primary}
      maximumTrackTintColor="darkgrey"
      step={30}
      maximumValue={60}
      minimumValue={10}
      />
      </NativeViewGestureHandler>
<Bottomsheet/>

Q.4 how to get bottomsheets in behind the bottom navigator (it should not cover bottom navigator and still shows some part of bottom sheets behind bottom navigator).

move the bottom sheet to the screen component
Sir how will changing the place of Bottom sheet to screen component will change the way it looks now.please sir tell me more breifly.