related-ui-components 2.6.4 → 2.6.6

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,18 +1,79 @@
 import React, { useCallback, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, Text, I18nManager } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import { SliderLabels } from "./SliderLabel";
 import { ThemeType, useTheme } from "../../theme";
 
 const THUMB_SIZE = 28;
 const RAIL_HEIGHT = 6;
 const LABEL_HEIGHT = 26;
 
+
+/**
+ * Renders the floating labels above the thumbs.
+ */
+const SliderLabels = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  isRTL,
+  theme,
+}: {
+  leftValue: string;
+  rightValue: string;
+  leftPosition: Animated.SharedValue<number>;
+  rightPosition: Animated.SharedValue<number>;
+  sliderWidth: number;
+  isRTL: boolean;
+  theme: ThemeType;
+}) => {
+  const styles = getStyles(theme);
+
+  const animatedLeftLabelStyle = useAnimatedStyle(() => {
+    const labelWidth = leftValue.length * 8; 
+    const centeredPosition =
+      leftPosition.value + THUMB_SIZE / 2 - labelWidth / 2;
+    const clampedPosition = Math.max(
+      0,
+      Math.min(centeredPosition, sliderWidth - labelWidth)
+    );
+    return { transform: [{ translateX: clampedPosition }] };
+  });
+
+  const animatedRightLabelStyle = useAnimatedStyle(() => {
+    const labelWidth = rightValue.length * 8; 
+    const centeredPosition =
+      rightPosition.value + THUMB_SIZE / 2 - labelWidth / 2;
+    const clampedPosition = Math.max(
+      0,
+      Math.min(centeredPosition, sliderWidth - labelWidth)
+    );
+    return { transform: [{ translateX: clampedPosition }] };
+  });
+
+  const minLabel = isRTL ? rightValue : leftValue;
+  const maxLabel = isRTL ? leftValue : rightValue;
+  const minStyle = isRTL ? animatedRightLabelStyle : animatedLeftLabelStyle;
+  const maxStyle = isRTL ? animatedLeftLabelStyle : animatedRightLabelStyle;
+
+  return (
+    <View style={styles.labelRow}>
+      <Animated.View style={[styles.labelContainer, minStyle]}>
+        <Text style={styles.labelText}>{minLabel}</Text>
+      </Animated.View>
+      <Animated.View style={[styles.labelContainer, maxStyle]}>
+        <Text style={styles.labelText}>{maxLabel}</Text>
+      </Animated.View>
+    </View>
+  );
+};
+
 interface RangeSliderProps {
   min: number;
   max: number;
@@ -21,8 +82,8 @@ interface RangeSliderProps {
   initialMinValue: number;
   initialMaxValue: number;
   onValueChange: (values: { min: number; max: number }) => void;
-
-  theme?: ThemeType
+  isRTL?: boolean;
+  theme?: ThemeType;
 }
 
 const RangeSlider: React.FC<RangeSliderProps> = ({
@@ -33,47 +94,52 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   initialMinValue,
   initialMaxValue,
   onValueChange,
-  theme
+  theme,
 }) => {
-  const { theme: defaultTheme} = useTheme();
-
+  const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
-
+  const isRTL = I18nManager.isRTL;
   const styles = getStyles(currTheme);
 
-  // State for label text values, passed down to the SliderLabels component
-  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
-  const [rightLabel, setRightLabel] = useState(
-    initialMaxValue.toLocaleString()
-  );
+  const railWidth = sliderWidth - THUMB_SIZE;
 
   const valueToPosition = useCallback(
     (value: number) => {
       "worklet";
-      return ((value - min) / (max - min)) * sliderWidth;
+      const percentage = (value - min) / (max - min);
+      return isRTL
+        ? (1 - percentage) * railWidth
+        : percentage * railWidth;
     },
-    [min, max, sliderWidth]
+    [min, max, railWidth, isRTL]
   );
 
   const positionToValue = useCallback(
     (position: number) => {
       "worklet";
-      const rawValue = (position / sliderWidth) * (max - min) + min;
+      const percentage = position / railWidth;
+      const rawValue = isRTL
+        ? max - percentage * (max - min)
+        : percentage * (max - min) + min;
       return Math.round(rawValue / step) * step;
     },
-    [min, max, step, sliderWidth]
+    [min, max, step, railWidth, isRTL]
   );
 
+  // --- Shared Values for Animation ---
   const leftPosition = useSharedValue(valueToPosition(initialMinValue));
   const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
+  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
+  const [rightLabel, setRightLabel] = useState(initialMaxValue.toLocaleString());
   const context = useSharedValue({ x: 0 });
   const activeThumb = useSharedValue<"left" | "right" | null>(null);
 
+  // --- Gesture Handler ---
   const panGesture = Gesture.Pan()
     .onBegin((e) => {
       const distToLeft = Math.abs(e.x - leftPosition.value);
       const distToRight = Math.abs(e.x - rightPosition.value);
-      if (distToLeft <= distToRight) {
+      if (distToLeft < distToRight) {
         activeThumb.value = "left";
         context.value = { x: leftPosition.value };
       } else {
@@ -86,17 +152,11 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       const newPos = context.value.x + e.translationX;
 
       if (activeThumb.value === "left") {
-        const clampedPos = Math.max(
-          0,
-          Math.min(newPos, rightPosition.value - THUMB_SIZE)
-        );
+        const clampedPos = Math.max(0, Math.min(newPos, rightPosition.value));
         leftPosition.value = clampedPos;
         runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
       } else {
-        const clampedPos = Math.min(
-          sliderWidth,
-          Math.max(newPos, leftPosition.value + THUMB_SIZE)
-        );
+        const clampedPos = Math.min(railWidth, Math.max(newPos, leftPosition.value));
         rightPosition.value = clampedPos;
         runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
       }
@@ -109,17 +169,18 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       activeThumb.value = null;
     });
 
+  // --- Animated Styles ---
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: leftPosition.value }],
   }));
 
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: rightPosition.value - THUMB_SIZE }],
+    transform: [{ translateX: rightPosition.value }],
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => ({
-    left: leftPosition.value,
-    right: sliderWidth - rightPosition.value,
+    left: leftPosition.value + THUMB_SIZE / 2,
+    right: railWidth - rightPosition.value + THUMB_SIZE / 2,
   }));
 
   return (
@@ -130,23 +191,17 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         leftPosition={leftPosition}
         rightPosition={rightPosition}
         sliderWidth={sliderWidth}
-        thumbSize={THUMB_SIZE}
+        isRTL={isRTL}
+        theme={currTheme}
       />
-
       <GestureDetector gesture={panGesture}>
         <View style={styles.railContainer}>
           <View style={styles.rail} />
           <Animated.View style={[styles.activeRail, animatedActiveRailStyle]} />
-
-          <Animated.View
-            style={[styles.thumbContainer, animatedLeftThumbStyle]}
-          >
+          <Animated.View style={[styles.thumbContainer, animatedLeftThumbStyle]}>
             <View style={styles.thumb} />
           </Animated.View>
-
-          <Animated.View
-            style={[styles.thumbContainer, animatedRightThumbStyle]}
-          >
+          <Animated.View style={[styles.thumbContainer, animatedRightThumbStyle]}>
             <View style={styles.thumb} />
           </Animated.View>
         </View>
@@ -159,8 +214,7 @@ const getStyles = (theme: ThemeType) =>
   StyleSheet.create({
     container: {
       height: LABEL_HEIGHT + THUMB_SIZE,
-      justifyContent: "center",
-      marginTop: LABEL_HEIGHT, // Add margin to prevent label cutoff
+      justifyContent: "flex-end",
     },
     railContainer: {
       justifyContent: "center",
@@ -191,6 +245,23 @@ const getStyles = (theme: ThemeType) =>
       borderColor: theme.primary,
       borderWidth: 5,
     },
+    labelRow: {
+      position: "absolute",
+      top: 0,
+      width: "100%",
+    },
+    labelContainer: {
+      position: "absolute",
+      backgroundColor: theme.primary,
+      borderRadius: 4,
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      height: LABEL_HEIGHT,
+    },
+    labelText: {
+      color: theme.onPrimary,
+      fontSize: 12,
+    },
   });
 
-export default RangeSlider;
+export default RangeSlider;

package/src/contexts/BottomSheetStackContext.tsx

@@ -6,7 +6,6 @@ export interface BottomSheetStackItem {
   snapPoints?: string[] | number[];
   initialSnapIndex?: number;
   dynamicSizing?: boolean;
-  isModal?: boolean;
   bottomSheetProps?: Partial<Omit<BottomSheetProps, "children">>;
 }
 

package/src/contexts/BottomSheetStackProvider.tsx

@@ -1,8 +1,6 @@
 import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetModalProvider,
 } from "@gorhom/bottom-sheet";
 import React, {
   ReactNode,
@@ -12,7 +10,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { BackHandler, StyleSheet, View } from "react-native";
+import { BackHandler, StyleSheet } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
@@ -24,10 +22,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const [stack, setStack] = useState<BottomSheetStackItem[]>([]);
-
   const sheetRef = useRef<BottomSheet>(null);
-  const modalRef = useRef<BottomSheetModal>(null);
-
   const { top } = useSafeAreaInsets();
 
   const push = useCallback((item: BottomSheetStackItem) => {
@@ -36,7 +31,6 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
 
   const clear = useCallback(() => {
     sheetRef.current?.close();
-    modalRef.current?.dismiss();
     setStack([]);
   }, []);
 
@@ -58,30 +52,26 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
 
   useEffect(() => {
     if (isOpen && currentItem) {
-      if (currentItem.isModal) {
-        sheetRef.current?.close();
-        modalRef.current?.present();
-      } else {
-        modalRef.current?.dismiss();
-        sheetRef.current?.snapToIndex(currentItem.initialSnapIndex ?? 0);
-      }
+      sheetRef.current?.snapToIndex(currentItem.initialSnapIndex ?? 0);
     }
 
     const backHandlerSubscription = BackHandler.addEventListener(
       "hardwareBackPress",
       () => {
-        if (!isOpen) return false;
         if (canGoBack) {
           pop();
-        } else {
-          clear();
+          return true;
         }
-        return true;
+        if (!canGoBack && stack.length === 1) {
+          sheetRef.current?.close();
+          return true;
+        }
+        return false;
       }
     );
 
     return () => backHandlerSubscription.remove();
-  }, [isOpen, canGoBack, currentItem, pop, clear]);
+  }, [isOpen, canGoBack, currentItem, pop, stack]);
 
   const AnimatedView = Animated.View;
   const enteringAnimation = FadeIn.duration(200);
@@ -92,6 +82,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
       <BottomSheetBackdrop
         {...props}
         disappearsOnIndex={-1}
+        style={[props.style, { backgroundColor: "rgba(0,0,0,0,1)" }]}
         appearsOnIndex={0}
         pressBehavior={"close"}
       />
@@ -99,61 +90,50 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
     []
   );
 
-  const currentSheetContent = currentItem ? (
-    <AnimatedView
-      key={stack.length}
-      entering={enteringAnimation}
-      exiting={exitingAnimation}
-      style={styles.animatedView}
-    >
-      {currentItem.component}
-    </AnimatedView>
-  ) : null;
-
   return (
-    <BottomSheetModalProvider>
-      <BottomSheetStackContext.Provider
-        value={{ push, pop, replace, clear, canGoBack }}
+    <BottomSheetStackContext.Provider
+      value={{ push, pop, replace, clear, canGoBack }}
+    >
+      {children}
+      <BottomSheet
+        {...currentItem?.bottomSheetProps}
+        ref={sheetRef}
+        index={-1}
+        snapPoints={currentItem?.snapPoints || ["100%"]}
+        enableDynamicSizing={currentItem?.dynamicSizing ?? false}
+        enablePanDownToClose
+        android_keyboardInputMode="adjustResize"
+        enableBlurKeyboardOnGesture
+        keyboardBlurBehavior="restore"
+        keyboardBehavior="fillParent"
+        onClose={clear}
+        backdropComponent={renderBackdrop}
+        topInset={top}
+        handleIndicatorStyle={{ backgroundColor: "#CCCCCC" }}
+        style={styles.sheetContainer}
       >
-        {children}
-
-        <BottomSheet
-          {...currentItem?.bottomSheetProps}
-          ref={sheetRef}
-          index={-1}
-          snapPoints={currentItem?.isModal ? ["1%"] : (currentItem?.snapPoints || ["100%"])}
-          enablePanDownToClose
-          onClose={clear}
-          backdropComponent={renderBackdrop}
-          topInset={top}
-          handleIndicatorStyle={{ backgroundColor: "#CCCCCC" }}
-          style={styles.sheetContainer}
-        >
-          {!currentItem?.isModal ? currentSheetContent : <View />}
-        </BottomSheet>
-
-        <BottomSheetModal
-          {...currentItem?.bottomSheetProps}
-          ref={modalRef}
-          index={0}
-          snapPoints={currentItem?.isModal ? (currentItem?.snapPoints || ["100%"]) : ["1%"]}
-          onDismiss={clear}
-          topInset={top}
-          handleIndicatorStyle={{ backgroundColor: "#CCCCCC" }}
-          style={styles.sheetContainer}
-        >
-          {currentItem?.isModal ? currentSheetContent : <View />}
-        </BottomSheetModal>
-      </BottomSheetStackContext.Provider>
-    </BottomSheetModalProvider>
+        {currentItem && (
+          <AnimatedView
+            key={stack.length}
+            entering={enteringAnimation}
+            exiting={exitingAnimation}
+            style={styles.animatedView}
+          >
+            {currentItem.component}
+          </AnimatedView>
+        )}
+      </BottomSheet>
+    </BottomSheetStackContext.Provider>
   );
 };
 
 const styles = StyleSheet.create({
   sheetContainer: {
-    // Styles for the sheet container can be added here
+    // backgroundColor: "#FFFFFF",
+    // borderTopLeftRadius: 20,
+    // borderTopRightRadius: 20,
   },
   animatedView: {
     flex: 1,
   },
-});
+});

package/src/index.ts

@@ -8,4 +8,4 @@
 
 export * from "./theme"
 export * from "./components";
-export * from "./contexts";
+export * from "./contexts";