related-ui-components 1.6.5 → 1.6.7

package/src/components/Filters/Filters.tsx

@@ -1,479 +1,489 @@
-  import React, { useCallback, useEffect, useRef, useState } from "react";
-  import {
-    View,
-    Text,
-    StyleSheet,
-    TouchableOpacity,
-    TextStyle,
-    ViewStyle,
-    ImageSourcePropType,
-    I18nManager,
-    TouchableWithoutFeedback,
-  } from "react-native";
-  import { GestureHandlerRootView } from "react-native-gesture-handler";
-  import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
-  import PointsRangeSelector from "./PointsRangeSelector";
-  import { BrandIcon } from "../BrandIcon";
-  import { Ionicons } from "@expo/vector-icons";
-  import Checkbox from "expo-checkbox";
-  import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextStyle,
+  ViewStyle,
+  ImageSourcePropType,
+  I18nManager,
+  // Remove TouchableWithoutFeedback as it's no longer needed for the overlay
+} from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import BottomSheet, {
+  BottomSheetView,
+  BottomSheetBackdrop, // Import BottomSheetBackdrop
+  BottomSheetBackdropProps, // Import props type for type safety
+} from "@gorhom/bottom-sheet";
+import PointsRangeSelector from "./PointsRangeSelector";
+import { BrandIcon } from "../BrandIcon";
+import { Ionicons } from "@expo/vector-icons";
+import Checkbox from "expo-checkbox";
+import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
 
-  type SortOption = {
-    name: string;
-    value: string;
-    id: number;
-    checked?: boolean;
-  };
-  export type Brand = {
-    id: string;
-    name: string;
-    logo: ImageSourcePropType;
-    checked?: boolean;
-  };
-  export type FilterResult = {
-    sort: SortOption | undefined;
-    pointsRange: { min: number; max: number };
-    selectedBrands: Brand[];
-  };
-  interface FiltersProps {
-    isRTL?: boolean;
-    sortOptions?: SortOption[];
-    sortSectionTitle?: string;
-    sectionTitleStyle?: TextStyle;
-    sortSectionStyle?: ViewStyle;
-    rangeMinLimit?: number;
-    rangeMaxLimit?: number;
-    rangeInitialMin?: number;
-    rangeInitialMax?: number;
-    showPointsRange?: boolean;
-    pointsRangeSectionTitle?: string;
-    pointsRangeContainerStyle?: ViewStyle;
-    pointsRangeInputsContainerStyle?: ViewStyle;
-    pointsRangeCustomInputContainerStyle?: ViewStyle;
-    pointsRangeCustomInputFieldStyle?: ViewStyle;
-    pointsRangeSliderContainerStyle?: ViewStyle;
-    pointsRangeMultiSliderContainerStyle?: ViewStyle;
-    pointsRangeTrackStyle?: ViewStyle;
-    pointsRangeSelectedTrackStyle?: ViewStyle;
-    pointsRangeUnselectedTrackStyle?: ViewStyle;
-    pointsRangeMarkerStyle?: ViewStyle;
-    pointsRangeMarkerEnabledStyle?: ViewStyle;
-    pointsRangeMarkerDisabledStyle?: ViewStyle;
-    pointsRangeMarkerDotStyle?: ViewStyle;
-    pointsRangeInputProps?: any;
-    pointsRangeMultiSliderProps?: any;
-    brands?: Brand[];
-    brandContainerStyle?: ViewStyle;
-    brandActiveIcon?: React.ReactNode;
-    brandActiveIconStyle?: ViewStyle;
-    brandSectionTile?: string;
-    onActionButtonPress?: (result: FilterResult) => void;
-    containerStyle?: ViewStyle;
-    headerStyle?: ViewStyle;
-    titleStyle?: TextStyle;
-    resetTextStyle?: TextStyle;
-    sectionStyle?: ViewStyle;
-    optionRowStyle?: ViewStyle;
-    optionTextStyle?: TextStyle;
-    checkboxColor?: string;
-    applyButtonStyle?: ViewStyle;
-    applyButtonTextStyle?: TextStyle;
-    bottomSheetStyle?: ViewStyle;
-    headerTitleText?: string;
-    headerResetText?: string;
-    bottomSheetIndex?: number;
-    snapPoints?: string[];
-    handleIndicatorStyle?: ViewStyle;
-    applyButtonText?: string;
-    overlayColor?: string;
-    onClose?: () => void;
-    visible?: boolean;
-  }
+// ... (Keep existing type definitions: SortOption, Brand, FilterResult) ...
+type SortOption = {
+  name: string;
+  value: string;
+  id: number;
+  checked?: boolean;
+};
+export type Brand = {
+  id: string;
+  name: string;
+  logo: ImageSourcePropType;
+  checked?: boolean;
+};
+export type FilterResult = {
+  sort: SortOption | undefined;
+  pointsRange: { min: number; max: number };
+  selectedBrands: Brand[];
+};
 
-  const Filters: React.FC<FiltersProps> = ({
-    isRTL = I18nManager.isRTL,
-    sortOptions = [],
-    sortSectionTitle = "Sort",
-    sectionTitleStyle,
-    sortSectionStyle,
-    onActionButtonPress,
-    rangeInitialMax = 1000,
-    rangeInitialMin = 0,
-    rangeMaxLimit = 1000,
-    rangeMinLimit = 0,
-    pointsRangeContainerStyle,
-    pointsRangeInputsContainerStyle,
-    pointsRangeCustomInputContainerStyle,
-    pointsRangeCustomInputFieldStyle,
-    pointsRangeSliderContainerStyle,
-    pointsRangeMultiSliderContainerStyle,
-    pointsRangeTrackStyle,
-    pointsRangeSelectedTrackStyle,
-    pointsRangeUnselectedTrackStyle,
-    pointsRangeMarkerStyle,
-    pointsRangeMarkerEnabledStyle,
-    pointsRangeMarkerDisabledStyle,
-    pointsRangeMarkerDotStyle,
-    pointsRangeInputProps,
-    pointsRangeMultiSliderProps,
-    containerStyle,
-    headerStyle,
-    titleStyle,
-    resetTextStyle,
-    sectionStyle,
-    optionRowStyle,
-    optionTextStyle,
-    checkboxColor: checkboxColorProp,
-    applyButtonStyle,
-    applyButtonTextStyle,
-    bottomSheetStyle,
-    bottomSheetIndex = 0,
-    snapPoints = ["50%", "90%"],
-    handleIndicatorStyle,
-    brands = [],
-    brandContainerStyle,
-    brandActiveIcon,
-    showPointsRange = true,
-    pointsRangeSectionTitle = "Points range",
-    brandActiveIconStyle,
-    brandSectionTile = "Brands",
-    applyButtonText = "Apply Filter",
-    headerResetText = "Reset All",
-    headerTitleText = "Filter",
-    overlayColor = "rgba(0, 0, 0, 0.5)",
-    onClose,
-    visible = true,
-  }) => {
-    const {theme, isRTL : rtl} = useTheme();
-    isRTL = rtl || isRTL;
-    const bottomSheetRef = useRef<BottomSheet>(null);
-    const styles = createStyles(theme, isRTL);
-    const checkboxColor = checkboxColorProp ?? theme.primary;
-    const [isVisible, setIsVisible] = useState(visible);
+interface FiltersProps {
+  isRTL?: boolean;
+  sortOptions?: SortOption[];
+  sortSectionTitle?: string;
+  sectionTitleStyle?: TextStyle;
+  sortSectionStyle?: ViewStyle;
+  rangeMinLimit?: number;
+  rangeMaxLimit?: number;
+  rangeInitialMin?: number;
+  rangeInitialMax?: number;
+  showPointsRange?: boolean;
+  pointsRangeSectionTitle?: string;
+  pointsRangeContainerStyle?: ViewStyle;
+  pointsRangeInputsContainerStyle?: ViewStyle;
+  pointsRangeCustomInputContainerStyle?: ViewStyle;
+  pointsRangeCustomInputFieldStyle?: ViewStyle;
+  pointsRangeSliderContainerStyle?: ViewStyle;
+  pointsRangeMultiSliderContainerStyle?: ViewStyle;
+  pointsRangeTrackStyle?: ViewStyle;
+  pointsRangeSelectedTrackStyle?: ViewStyle;
+  pointsRangeUnselectedTrackStyle?: ViewStyle;
+  pointsRangeMarkerStyle?: ViewStyle;
+  pointsRangeMarkerEnabledStyle?: ViewStyle;
+  pointsRangeMarkerDisabledStyle?: ViewStyle;
+  pointsRangeMarkerDotStyle?: ViewStyle;
+  pointsRangeInputProps?: any;
+  pointsRangeMultiSliderProps?: any;
+  brands?: Brand[];
+  brandContainerStyle?: ViewStyle;
+  brandActiveIcon?: React.ReactNode;
+  brandActiveIconStyle?: ViewStyle;
+  brandSectionTile?: string;
+  onActionButtonPress?: (result: FilterResult) => void;
+  containerStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  resetTextStyle?: TextStyle;
+  sectionStyle?: ViewStyle;
+  optionRowStyle?: ViewStyle;
+  optionTextStyle?: TextStyle;
+  checkboxColor?: string;
+  applyButtonStyle?: ViewStyle;
+  applyButtonTextStyle?: TextStyle;
+  bottomSheetStyle?: ViewStyle;
+  headerTitleText?: string;
+  headerResetText?: string;
+  bottomSheetIndex?: number;
+  handleIndicatorStyle?: ViewStyle;
+  applyButtonText?: string;
+  overlayColor?: string;
+  onClose?: () => void;
+  visible?: boolean;
+}
 
-    // Sync the internal isVisible state with the visible prop
-    useEffect(() => {
-      setIsVisible(visible);
-      if (visible && bottomSheetRef.current) {
-        bottomSheetRef.current.snapToIndex(0);
-      }
-    }, [visible]);
+const Filters: React.FC<FiltersProps> = ({
+  isRTL: isRTLProp,
+  sortOptions = [],
+  sortSectionTitle = "Sort",
+  sectionTitleStyle,
+  sortSectionStyle,
+  onActionButtonPress,
+  rangeInitialMax = 1000,
+  rangeInitialMin = 0,
+  rangeMaxLimit = 1000,
+  rangeMinLimit = 0,
+  pointsRangeContainerStyle,
+  pointsRangeInputsContainerStyle,
+  pointsRangeCustomInputContainerStyle,
+  pointsRangeCustomInputFieldStyle,
+  pointsRangeSliderContainerStyle,
+  pointsRangeMultiSliderContainerStyle,
+  pointsRangeTrackStyle,
+  pointsRangeSelectedTrackStyle,
+  pointsRangeUnselectedTrackStyle,
+  pointsRangeMarkerStyle,
+  pointsRangeMarkerEnabledStyle,
+  pointsRangeMarkerDisabledStyle,
+  pointsRangeMarkerDotStyle,
+  pointsRangeInputProps,
+  pointsRangeMultiSliderProps,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  resetTextStyle,
+  sectionStyle,
+  optionRowStyle,
+  optionTextStyle,
+  checkboxColor: checkboxColorProp,
+  applyButtonStyle,
+  applyButtonTextStyle,
+  bottomSheetStyle,
+  bottomSheetIndex = 0,
+  handleIndicatorStyle,
+  brands = [],
+  brandContainerStyle,
+  brandActiveIcon,
+  showPointsRange = true,
+  pointsRangeSectionTitle = "Points range",
+  brandActiveIconStyle,
+  brandSectionTile = "Brands",
+  applyButtonText = "Apply Filter",
+  headerResetText = "Reset All",
+  headerTitleText = "Filter",
+  onClose,
+  visible = true,
+}) => {
+  const { theme, isRTL: themeIsRTL } = useTheme();
+  const isRTL = isRTLProp ?? themeIsRTL ?? I18nManager.isRTL; 
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const styles = createStyles(theme, isRTL);
+  const checkboxColor = checkboxColorProp ?? theme.primary;
+  const [isVisible, setIsVisible] = useState(visible);
+
+  useEffect(() => {
+    if (visible) {
+      setIsVisible(true);
+      setTimeout(() => bottomSheetRef.current?.snapToIndex(bottomSheetIndex), 0);
+    } else {
+      bottomSheetRef.current?.close();
+      setIsVisible(false); 
+    }
+  }, [visible, bottomSheetIndex]);
 
-    const handleSheetChanges = useCallback((index: number) => {
+  const handleSheetChanges = useCallback(
+    (index: number) => {
       if (index === -1) {
         setIsVisible(false);
+        if (onClose) {
+          onClose();
+        }
       }
-    }, []);
-
-    const [resetCounter, setResetCounter] = useState(0);
+    },
+    [onClose]
+  );
 
+  const [resetCounter, setResetCounter] = useState(0);
 
-    const [checkedItem, setCheckedItem] = useState<number | null>(
-      sortOptions.find(option => option.checked)?.id || null
-    );
+  const [checkedItem, setCheckedItem] = useState<number | null>(
+    sortOptions.find((option) => option.checked)?.id || null
+  );
 
-    const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
-      brands.reduce((acc, option) => {
-        acc[option.id] = option.checked || false;
-        return acc;
-      }, {} as Record<string, boolean>)
-    );
-    const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
+  const [selectedBrands, setSelectedBrands] = useState<
+    Record<string, boolean>
+  >(
+    brands.reduce((acc, option) => {
+      acc[option.id] = option.checked || false;
+      return acc;
+    }, {} as Record<string, boolean>)
+  );
+  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>(
+    {
       min: rangeInitialMin,
       max: rangeInitialMax,
-    });
+    }
+  );
 
-    const handleCheckboxChange = (id: number) => {
-      setCheckedItem(id);
-    };
+  const handleCheckboxChange = (id: number) => {
+    setCheckedItem(id);
+  };
 
-    const handleBrandSelect = (id: string) => {
-      setSelectedBrands((prevState) => ({
-        ...prevState,
-        [id]: !prevState[id],
-      }));
-    };
+  const handleBrandSelect = (id: string) => {
+    setSelectedBrands((prevState) => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }));
+  };
 
-    const handleApplyFilter = () => {
-      if (onActionButtonPress) {
-        const selectedSortOption = sortOptions.find(
-          (option) => option.id == checkedItem
-        );
+  const closeBottomSheet = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, [/* onClose */]);
 
-        const selectedBrandsList = brands.filter(
-          (brand) => selectedBrands[brand.id]
-        );
+  const handleApplyFilter = () => {
+    if (onActionButtonPress) {
+      const selectedSortOption = sortOptions.find(
+        (option) => option.id == checkedItem
+      );
 
-        const filterResult: FilterResult = {
-          sort: selectedSortOption,
-          pointsRange: pointsRange,
-          selectedBrands: selectedBrandsList,
-        };
+      const selectedBrandsList = brands.filter(
+        (brand) => selectedBrands[brand.id]
+      );
 
-        onActionButtonPress(filterResult);
-        closeBottomSheet(); // Close the filter after applying
-      }
-    };
+      const filterResult: FilterResult = {
+        sort: selectedSortOption,
+        pointsRange: pointsRange,
+        selectedBrands: selectedBrandsList,
+      };
 
-    const handleResetAll = () => {
-      const resetBrands = brands.reduce((acc, option) => {
-        acc[option.id] = false;
-        return acc;
-      }, {} as Record<string, boolean>);
+      onActionButtonPress(filterResult);
+    }
+    closeBottomSheet();
+  };
 
-      setCheckedItem(null);
-      setSelectedBrands(resetBrands);
-      setPointsRange({ min: rangeMinLimit, max: rangeInitialMax });
-      setResetCounter((prev) => prev + 1);
-    };
+  const handleResetAll = () => {
+    const resetBrands = brands.reduce((acc, option) => {
+      acc[option.id] = false;
+      return acc;
+    }, {} as Record<string, boolean>);
 
-    const closeBottomSheet = useCallback(() => {
-      if (bottomSheetRef.current) {
-        bottomSheetRef.current.close();
-      }
-      setIsVisible(false);
-      if (onClose) {
-        onClose();
-      }
-    }, [onClose]);
+    setCheckedItem(null);
+    setSelectedBrands(resetBrands);
+    setPointsRange({ min: rangeMinLimit, max: rangeInitialMax });
+    setResetCounter((prev) => prev + 1);
+  };
 
-    // If not visible, don't render anything
-    if (!isVisible) {
-      return null;
-    }
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={0} 
+        disappearsOnIndex={-1}
+        pressBehavior="close"
+        opacity={0.5}
+      />
+    ),
+    []
+  );
+
+  if (!visible) {
+    return null;
+  }
 
-    return (
-      <GestureHandlerRootView style={styles.overlayContainer}>
-        {/* Semi-transparent overlay */}
-        <TouchableWithoutFeedback onPress={closeBottomSheet}>
-          <View style={[styles.overlay, { backgroundColor: overlayColor }]} />
-        </TouchableWithoutFeedback>
-        
-        <BottomSheet
-          ref={bottomSheetRef}
-          index={bottomSheetIndex}
-          handleComponent={() => null}
-          onChange={handleSheetChanges}
-          style={bottomSheetStyle}
-          backgroundStyle={{ backgroundColor: theme.surface }}
-          handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
-          // snapPoints={snapPoints}
-          enablePanDownToClose={true}
-          onClose={() => {
-            setIsVisible(false);
-            if (onClose) onClose();
-          }}
-        >
-          <View style={[styles.container, containerStyle]}>
-            <View style={[styles.header, headerStyle]}>
-              <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
-              <TouchableOpacity onPress={handleResetAll}>
-                <Text style={[styles.resetText, resetTextStyle]}>
-                  {headerResetText}
+  return (
+    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={isVisible ? bottomSheetIndex : -1} 
+        onChange={handleSheetChanges}
+        handleComponent={() => null}
+        style={bottomSheetStyle}
+        backgroundStyle={{ backgroundColor: theme.surface }}
+        handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
+        enablePanDownToClose={true}
+        backdropComponent={renderBackdrop}
+      >
+        <View style={[styles.container, containerStyle]}>
+          <View style={[styles.header, headerStyle]}>
+            <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
+            <TouchableOpacity onPress={handleResetAll}>
+              <Text style={[styles.resetText, resetTextStyle]}>
+                {headerResetText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <BottomSheetView style={{ paddingBottom: 75 }}>
+            {sortOptions && sortOptions.length > 0 && (
+              <View style={[styles.section, sectionStyle, sortSectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {sortSectionTitle}
                 </Text>
-              </TouchableOpacity>
-            </View>
-            <BottomSheetView style={{ paddingBottom: 75 }}>
-              {sortOptions && sortOptions.length > 0 && (
-                <View style={[styles.section, sectionStyle, sortSectionStyle]}>
-                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                    {sortSectionTitle}
-                  </Text>
-                  {sortOptions.map((option) => (
-                    <View
-                      style={[styles.optionRow, optionRowStyle]}
-                      key={option.id}
-                    >
-                      <Checkbox
-                        value={option.id == checkedItem}
-                        color={checkboxColor}
-                        hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-                        onValueChange={() =>
-                          handleCheckboxChange(option.id)
-                        }
-                      />
-                      <Text style={[styles.optionText, optionTextStyle]}>
-                        {option.name}
-                      </Text>
-                    </View>
-                  ))}
-                </View>
-              )}
+                {sortOptions.map((option) => (
+                  <View
+                    style={[styles.optionRow, optionRowStyle]}
+                    key={option.id}
+                  >
+                    <Checkbox
+                      value={option.id == checkedItem}
+                      color={checkboxColor}
+                      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+                      onValueChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Text style={[styles.optionText, optionTextStyle]}>
+                      {option.name}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            )}
 
-              {showPointsRange && (
-                <View style={[styles.section, sectionStyle]}>
-                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                    {pointsRangeSectionTitle}
-                  </Text>
-                  <PointsRangeSelector
-                    resetKey={resetCounter}
-                    initialMax={rangeInitialMax}
-                    initialMin={rangeInitialMin}
-                    minLimit={rangeMinLimit}
-                    maxLimit={rangeMaxLimit}
-                    isRTL={isRTL}
-                    containerStyle={pointsRangeContainerStyle}
-                    inputsContainerStyle={pointsRangeInputsContainerStyle}
-                    customInputContainerStyle={
-                      pointsRangeCustomInputContainerStyle
-                    }
-                    customInputFieldStyle={pointsRangeCustomInputFieldStyle}
-                    sliderContainerStyle={pointsRangeSliderContainerStyle}
-                    multiSliderContainerStyle={
-                      pointsRangeMultiSliderContainerStyle
-                    }
-                    trackStyle={pointsRangeTrackStyle}
-                    selectedTrackStyle={pointsRangeSelectedTrackStyle}
-                    unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
-                    markerStyle={pointsRangeMarkerStyle}
-                    markerEnabledStyle={pointsRangeMarkerEnabledStyle}
-                    markerDisabledStyle={pointsRangeMarkerDisabledStyle}
-                    markerDotStyle={pointsRangeMarkerDotStyle}
-                    inputProps={pointsRangeInputProps}
-                    multiSliderProps={pointsRangeMultiSliderProps}
-                    onChange={(min: number, max: number) => {
-                      setPointsRange({ min, max });
-                    }}
-                  />
-                </View>
-              )}
+            {showPointsRange && (
+              <View style={[styles.section, sectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {pointsRangeSectionTitle}
+                </Text>
+                <PointsRangeSelector
+                  resetKey={resetCounter}
+                  initialMax={rangeInitialMax}
+                  initialMin={rangeInitialMin}
+                  minLimit={rangeMinLimit}
+                  maxLimit={rangeMaxLimit}
+                  isRTL={isRTL}
+                  containerStyle={pointsRangeContainerStyle}
+                  inputsContainerStyle={pointsRangeInputsContainerStyle}
+                  customInputContainerStyle={
+                    pointsRangeCustomInputContainerStyle
+                  }
+                  customInputFieldStyle={pointsRangeCustomInputFieldStyle}
+                  sliderContainerStyle={pointsRangeSliderContainerStyle}
+                  multiSliderContainerStyle={
+                    pointsRangeMultiSliderContainerStyle
+                  }
+                  trackStyle={pointsRangeTrackStyle}
+                  selectedTrackStyle={pointsRangeSelectedTrackStyle}
+                  unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
+                  markerStyle={pointsRangeMarkerStyle}
+                  markerEnabledStyle={pointsRangeMarkerEnabledStyle}
+                  markerDisabledStyle={pointsRangeMarkerDisabledStyle}
+                  markerDotStyle={pointsRangeMarkerDotStyle}
+                  inputProps={pointsRangeInputProps}
+                  multiSliderProps={pointsRangeMultiSliderProps}
+                  onChange={(min: number, max: number) => {
+                    setPointsRange({ min, max });
+                  }}
+                />
+              </View>
+            )}
 
-              {brands && brands.length > 0 && (
-                <View style={[styles.section, sectionStyle]}>
-                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                    {brandSectionTile}
-                  </Text>
-                  <View style={[styles.brandsGrid, brandContainerStyle]}>
-                    {brands.map((brand) => (
-                      <BrandIcon
-                        key={brand.id}
-                        size={50}
-                        selected={selectedBrands[brand.id]}
-                        onPress={() => handleBrandSelect(brand.id.toString())}
-                        brand={{
-                          id: brand.id,
-                          name: brand.name,
-                          logo: brand.logo,
-                        }}
-                        selectionIndicatorIcon={
-                          brandActiveIcon || (
-                            <Ionicons
-                              name="checkmark-outline"
-                              color={theme.onPrimary}
-                            />
-                          )
-                        }
-                        selectionIndicatorStyle={brandActiveIconStyle}
-                      />
-                    ))}
-                  </View>
+            {brands && brands.length > 0 && (
+              <View style={[styles.section, sectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {brandSectionTile}
+                </Text>
+                <View style={[styles.brandsGrid, brandContainerStyle]}>
+                  {brands.map((brand) => (
+                    <BrandIcon
+                      key={brand.id}
+                      size={50}
+                      selected={selectedBrands[brand.id]}
+                      onPress={() => handleBrandSelect(brand.id.toString())}
+                      brand={{
+                        id: brand.id,
+                        name: brand.name,
+                        logo: brand.logo,
+                      }}
+                      selectionIndicatorIcon={
+                        brandActiveIcon || (
+                          <Ionicons
+                            name="checkmark-outline"
+                            color={theme.onPrimary}
+                          />
+                        )
+                      }
+                      selectionIndicatorStyle={brandActiveIconStyle}
+                    />
+                  ))}
                 </View>
-              )}
+              </View>
+            )}
 
-              <TouchableOpacity
-                style={[styles.applyButton, applyButtonStyle]}
-                onPress={handleApplyFilter}
-              >
-                <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
-                  {applyButtonText}
-                </Text>
-              </TouchableOpacity>
-            </BottomSheetView>
-          </View>
-        </BottomSheet>
-      </GestureHandlerRootView>
-    );
-  };
+            <TouchableOpacity
+              style={[styles.applyButton, applyButtonStyle]}
+              onPress={handleApplyFilter}
+            >
+              <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
+                {applyButtonText}
+              </Text>
+            </TouchableOpacity>
+          </BottomSheetView>
+        </View>
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+};
 
-  const createStyles = (theme: ThemeType, isRTL: boolean) =>
-    StyleSheet.create({
-      overlayContainer: {
-        flex: 1,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1000,
-      },
-      overlay: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      },
-      container: {
-        flex: 1,
-        paddingHorizontal: 25,
-        backgroundColor: theme.surface,
-      },
-      handleIndicator: {
-        width: 40,
-        height: 4,
-        backgroundColor: theme.border,
-        alignSelf: "center",
-        marginTop: 8,
-        borderRadius: 2,
-      },
-      header: {
-        flexDirection: isRTL ? "row-reverse" : "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingVertical: 15,
-        borderBottomWidth: 1,
-        borderBottomColor: theme.border,
-      },
-      title: {
-        fontSize: 18,
-        fontWeight: "bold",
-        color: theme.text,
-        textAlign: isRTL ? "right" : "left",
-      },
-      resetText: {
-        fontSize: 14,
-        color: theme.primary,
-        fontWeight: "500",
-        textAlign: isRTL ? "left" : "right",
-      },
-      section: {
-        marginTop: 20,
-      },
-      sectionTitle: {
-        fontSize: 16,
-        fontWeight: "500",
-        color: theme.helper,
-        marginBottom: 15,
-        textAlign: isRTL ? "right" : "left",
-      },
-      optionRow: {
-        flexDirection: isRTL ? "row-reverse" : "row",
-        alignItems: "center",
-        marginBottom: 15,
-        gap: 5,
-      },
-      optionText: {
-        fontSize: 15,
-        color: theme.text,
-        textAlign: isRTL ? "right" : "left",
-        marginLeft: isRTL ? 0 : 8,
-        marginRight: isRTL ? 8 : 0,
-      },
-      brandsGrid: {
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: 10,
-        justifyContent: isRTL ? "flex-end" : "flex-start",
-      },
-      applyButton: {
-        backgroundColor: theme.primary,
-        borderRadius: 30,
-        paddingVertical: 15,
-        alignItems: "center",
-        marginTop: 30,
-      },
-      applyButtonText: {
-        color: theme.onPrimary,
-        fontSize: 16,
-        fontWeight: "bold",
-      },
-    });
+const createStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    // overlayContainer is likely not needed anymore
+    // overlay: { ... }, // Removed - handled by backdropComponent
+    gestureHandlerRoot: {
+      // Style needed for GestureHandlerRootView if it needs specific layout,
+      // often just flex: 1 or position absolute covering the screen
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000, // Ensure it's above other content
+    },
+    container: {
+      flex: 1,
+      paddingHorizontal: 25,
+      backgroundColor: theme.surface, // Background is set on BottomSheet backgroundStyle now
+    },
+    handleIndicator: {
+      width: 40,
+      height: 4,
+      backgroundColor: theme.border,
+      alignSelf: "center",
+      marginTop: 8,
+      borderRadius: 2,
+    },
+    header: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingVertical: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.border,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: theme.text,
+      textAlign: isRTL ? "right" : "left",
+    },
+    resetText: {
+      fontSize: 14,
+      color: theme.primary,
+      fontWeight: "500",
+      textAlign: isRTL ? "left" : "right",
+    },
+    section: {
+      marginTop: 20,
+    },
+    sectionTitle: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: theme.helper,
+      marginBottom: 15,
+      textAlign: isRTL ? "right" : "left",
+    },
+    optionRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "center",
+      marginBottom: 15,
+      gap: 5,
+    },
+    optionText: {
+      fontSize: 15,
+      color: theme.text,
+      textAlign: isRTL ? "right" : "left",
+      marginLeft: isRTL ? 0 : 8,
+      marginRight: isRTL ? 8 : 0,
+    },
+    brandsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 10,
+      justifyContent: isRTL ? "flex-end" : "flex-start",
+    },
+    applyButton: {
+      backgroundColor: theme.primary,
+      borderRadius: 30,
+      paddingVertical: 15,
+      alignItems: "center",
+      marginTop: 30,
+      // Consider adding marginBottom if needed, especially inside BottomSheetView
+      // marginBottom: 20,
+    },
+    applyButtonText: {
+      color: theme.onPrimary,
+      fontSize: 16,
+      fontWeight: "bold",
+    },
+  });
 
-  export default Filters;
+export default Filters;