related-ui-components 2.6.6 → 2.6.8

package/lib/typescript/src/components/Input/PhoneInput.d.ts

@@ -17,6 +17,7 @@ export interface PhoneInputProps extends Omit<CustomInputProps, "leftIcon" | "ri
     listTitleStyle?: StyleProp<TextStyle>;
     listTitle?: string;
     isBottomSheet?: boolean;
+    disableCountryPicker?: boolean;
 }
 declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<TextInput>>;
 export default PhoneInput;

package/lib/typescript/src/components/Input/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,SAAS,EAMT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AASxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAQD,QAAA,MAAM,UAAU,mFA0Hf,CAAC;AAkBF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,SAAS,EAIT,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAQD,QAAA,MAAM,UAAU,mFA6Hf,CAAC;AAkBF,eAAe,UAAU,CAAC"}

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts

@@ -11,7 +11,6 @@ interface RangeSliderProps {
         min: number;
         max: number;
     }) => void;
-    isRTL?: boolean;
     theme?: ThemeType;
 }
 declare const RangeSlider: React.FC<RangeSliderProps>;

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAoElD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0H3C,CAAC;AAwDF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgI3C,CAAC;AAwCF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { SafeAreaView, StyleSheet, StatusBar, I18nManager } from "react-native";
+import React, { useEffect, useState } from "react";
+import { SafeAreaView, StyleSheet, StatusBar, I18nManager, DevSettings } from "react-native";
 import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
@@ -66,22 +66,21 @@ const App = () => {
     const newProgress = Math.floor(Math.random() * 101);
     setProgress(newProgress);
   };
-  I18nManager.allowRTL(true);
-  I18nManager.forceRTL(true);
+  
   return (
     <>
-    <SafeAreaProvider>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <RelatedProvider theme={lightTheme}>
-          <BottomSheetStackProvider>
-            <StatusBar barStyle="light-content" />
-            <SafeAreaView style={styles.appContainer}>
-              {/* <CircularProgressBar
+      <SafeAreaProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <RelatedProvider theme={lightTheme}>
+            <BottomSheetStackProvider>
+              <StatusBar barStyle="light-content" />
+              <SafeAreaView style={styles.appContainer}>
+                {/* <CircularProgressBar
               progress={5}
               lineCap="round"
               textFont={""}
             /> */}
-              {/* <DateRangePicker
+                {/* <DateRangePicker
               onDatesChange={(t) => {
                 setDepartureDate(t.departure);
                 setReturnDate(t.return);
@@ -91,7 +90,7 @@ const App = () => {
               returnDate={returnDate}
               // returnDisplayValue={returnDate}
             ></DateRangePicker> */}
-              {/* <Filters
+                {/* <Filters
               bottomSheetBackgroundStyle={{
                 borderTopRightRadius: 30,
                 borderTopLeftRadius: 30,
@@ -115,20 +114,24 @@ const App = () => {
               applyButtonTextStyle={{ color: theme.secondary }}
               headerStyle={{ borderBottomWidth: 0 }}
             ></Filters> */}
-              {/* <FlightSummary></FlightSummary> */}
-              {/* <FlightForm></FlightForm> */}
-              {/* <HotelSummary></HotelSummary> */}
-              {/* <HotelForm></HotelForm> */}
-              {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
-              {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
-              {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-              {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
-              <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={100} onValueChange={console.log}></RangeSlider>
-              {/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
-            </SafeAreaView>
-          </BottomSheetStackProvider>
-        </RelatedProvider>
-      </GestureHandlerRootView>
+                {/* <FlightSummary></FlightSummary> */}
+                {/* <FlightForm></FlightForm> */}
+                {/* <HotelSummary></HotelSummary> */}
+                {/* <HotelForm></HotelForm> */}
+                {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
+                {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
+                {/* <CarouselCardStack data={DUMMY_DATA} /> */}
+                {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
+                {/* <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={100} onValueChange={console.log}></RangeSlider> */}
+                <PhoneInput
+                  value=""
+                  onChangeText={() => {}}
+                  inputContainerStyle={{ height: 55 }}
+                ></PhoneInput>
+              </SafeAreaView>
+            </BottomSheetStackProvider>
+          </RelatedProvider>
+        </GestureHandlerRootView>
       </SafeAreaProvider>
     </>
   );
@@ -137,7 +140,7 @@ const App = () => {
 const styles = StyleSheet.create({
   appContainer: {
     flex: 1,
-    backgroundColor:"grey",
+    backgroundColor: "grey",
     justifyContent: "center", // Center the carousel vertically if it's the main content
   },
 });

package/src/components/Input/CountryPickerView.tsx

@@ -4,25 +4,33 @@ import {
   View,
   TouchableOpacity,
   StyleSheet,
-  InteractionManager,
-  ActivityIndicator,
   StyleProp,
   TextStyle,
+  Keyboard,
 } from "react-native";
-import { BottomSheetFlashList, BottomSheetFlatList } from "@gorhom/bottom-sheet";
+import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
 import { useTheme } from "../../theme";
 import { iso2ToFlagEmoji } from "../../utils/flags";
 import { Country } from "./PhoneInput";
+import { allCountries } from "country-telephone-data";
+import CustomInput from "./Input"; // Import the CustomInput component
 
 interface CountryPickerViewProps {
-  countries: Country[];
+  countries?: Country[];
   onSelectCountry: (c: Country) => void;
   listTitle: string;
   listTitleStyle?: StyleProp<TextStyle>;
   countryNameStyle?: StyleProp<TextStyle>;
   countryCodeStyle?: StyleProp<TextStyle>;
+  searchPlaceholder?: string;
 }
 
+const DEFAULT_COUNTRIES: Country[] = allCountries.map((c) => ({
+  code: `+${c.dialCode}`,
+  iso2: c.iso2,
+  name: c.name,
+}));
+
 const CountryRow = React.memo(
   ({
     item,
@@ -35,7 +43,10 @@ const CountryRow = React.memo(
     nameStyle: StyleProp<TextStyle>;
     codeStyle: StyleProp<TextStyle>;
   }) => {
-    const handlePress = () => onSelectCountry(item);
+    const handlePress = () => {
+      Keyboard.dismiss(); // Dismiss keyboard on selection
+      onSelectCountry(item);
+    };
 
     return (
       <TouchableOpacity style={styles.countryRow} onPress={handlePress}>
@@ -50,27 +61,43 @@ const CountryRow = React.memo(
 );
 
 const CountryPickerView = ({
-  countries,
+  countries = DEFAULT_COUNTRIES,
   onSelectCountry,
   listTitle,
   listTitleStyle,
   countryNameStyle,
   countryCodeStyle,
+  searchPlaceholder = "Search...",
 }: CountryPickerViewProps) => {
   const { theme } = useTheme();
 
-  // ADDED: Memoize styles to pass them stably to the memoized row component
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredCountries, setFilteredCountries] = useState(countries);
+
+  useEffect(() => {
+    const lowercasedQuery = searchQuery.toLowerCase().trim();
+    if (lowercasedQuery === "") {
+      setFilteredCountries(countries);
+    } else {
+      const newFilteredData = countries.filter(
+        (country) =>
+          country.name.toLowerCase().includes(lowercasedQuery) ||
+          country.code.includes(lowercasedQuery)
+      );
+      setFilteredCountries(newFilteredData);
+    }
+  }, [searchQuery, countries]);
+
   const memoizedNameStyle = useMemo(
     () => [styles.countryName, { color: theme.text }, countryNameStyle],
     [theme.text, countryNameStyle]
   );
 
   const memoizedCodeStyle = useMemo(
-    () => [styles.countryCode, { color: theme.helper }, countryCodeStyle], // Use a different theme color for contrast
+    () => [styles.countryCode, { color: theme.helper }, countryCodeStyle],
     [theme.helper, countryCodeStyle]
   );
 
-  // CHANGED: renderCountry is now wrapped in useCallback
   const renderCountry = useCallback(
     ({ item }: { item: Country }) => (
       <CountryRow
@@ -88,14 +115,28 @@ const CountryPickerView = ({
       <Text style={[styles.popupTitle, { color: theme.text }, listTitleStyle]}>
         {listTitle}
       </Text>
+      <CustomInput
+        placeholder={searchPlaceholder}
+        value={searchQuery}
+        isBottomSheet
+        onChangeText={setSearchQuery}
+        containerStyle={styles.searchInputContainer}
+      />
       <BottomSheetFlatList
-        data={countries}
-        keyExtractor={(c: Country) => c.iso2}
+        data={filteredCountries}
+        keyExtractor={(c) => c.iso2}
         renderItem={renderCountry}
         contentContainerStyle={{ paddingBottom: 16 }}
-        initialNumToRender={10}
+        initialNumToRender={15}
         maxToRenderPerBatch={10}
-        // estimatedItemSize={56} // Provide a more accurate estimate
+        keyboardShouldPersistTaps="handled"
+        ListEmptyComponent={
+          <View style={styles.emptyListContainer}>
+            <Text style={[styles.emptyListText, { color: theme.helper }]}>
+              No countries found.
+            </Text>
+          </View>
+        }
       />
     </View>
   );
@@ -107,29 +148,27 @@ const styles = StyleSheet.create({
     width: "100%",
     paddingHorizontal: 16,
   },
-  loaderContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
   popupTitle: {
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 12,
     paddingTop: 16,
   },
+  searchInputContainer: {
+    marginBottom: 12,
+  },
   countryRow: {
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 12, // Adjusted padding
-    height: 56, // Set a fixed height
+    paddingVertical: 12,
+    // height: 56,
   },
   flag: {
     fontSize: 22,
   },
   countryText: {
     marginLeft: 12,
-    flex: 1, // Allow text to take remaining space
+    flex: 1,
   },
   countryName: {
     fontSize: 16,
@@ -137,6 +176,13 @@ const styles = StyleSheet.create({
   countryCode: {
     fontSize: 14,
   },
+  emptyListContainer: {
+    paddingVertical: 40,
+    alignItems: "center",
+  },
+  emptyListText: {
+    fontSize: 16,
+  },
 });
 
 export default CountryPickerView;

package/src/components/Input/PhoneInput.tsx

@@ -2,12 +2,11 @@ import React, { forwardRef, useMemo, useCallback } from "react";
 import {
   TextInput,
   Text,
-  View,
   TouchableOpacity,
   StyleSheet,
-  TextInputProps,
   StyleProp,
   TextStyle,
+  I18nManager,
 } from "react-native";
 import CustomInput, { CustomInputProps } from "./Input";
 import { useTheme } from "../../theme";
@@ -15,8 +14,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useBottomSheetStack } from "../../contexts";
 import { allCountries } from "country-telephone-data";
 import { iso2ToFlagEmoji } from "../../utils/flags";
-import CountryPickerView  from "./CountryPickerView";
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
+import CountryPickerView from "./CountryPickerView";
 
 export type Country = {
   code: string;
@@ -47,6 +45,8 @@ export interface PhoneInputProps
 
   listTitle?: string;
   isBottomSheet?: boolean;
+
+  disableCountryPicker?: boolean
 }
 
 const DEFAULT_COUNTRIES: Country[] = allCountries.map((c) => ({
@@ -77,6 +77,7 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
       countryCodeStyle,
       countryNameStyle,
       isBottomSheet,
+      disableCountryPicker = false,
       ...rest
     },
     ref
@@ -130,10 +131,12 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
           style={[
             styles.selector,
             {
-              backgroundColor: theme.inputBackground,
-              borderRightColor: theme.border,
+              backgroundColor: "transparent",
+              borderRightColor: I18nManager.isRTL ? undefined : theme.border,
+              borderLeftColor: I18nManager.isRTL ? theme.border : undefined,
             },
           ]}
+          disabled={disableCountryPicker}
           hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
           onPress={openCountryPicker}
           activeOpacity={0.8}
@@ -195,4 +198,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PhoneInput;
+export default PhoneInput;

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,79 +1,18 @@
 import React, { useCallback, useState } from "react";
-import { StyleSheet, View, Text, I18nManager } from "react-native";
+import { I18nManager, StyleSheet, View } 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;
@@ -82,8 +21,8 @@ interface RangeSliderProps {
   initialMinValue: number;
   initialMaxValue: number;
   onValueChange: (values: { min: number; max: number }) => void;
-  isRTL?: boolean;
-  theme?: ThemeType;
+
+  theme?: ThemeType
 }
 
 const RangeSlider: React.FC<RangeSliderProps> = ({
@@ -94,52 +33,47 @@ 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);
 
-  const railWidth = sliderWidth - THUMB_SIZE;
+  // State for label text values, passed down to the SliderLabels component
+  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
+  const [rightLabel, setRightLabel] = useState(
+    initialMaxValue.toLocaleString()
+  );
 
   const valueToPosition = useCallback(
     (value: number) => {
       "worklet";
-      const percentage = (value - min) / (max - min);
-      return isRTL
-        ? (1 - percentage) * railWidth
-        : percentage * railWidth;
+      return ((value - min) / (max - min)) * sliderWidth;
     },
-    [min, max, railWidth, isRTL]
+    [min, max, sliderWidth]
   );
 
   const positionToValue = useCallback(
     (position: number) => {
       "worklet";
-      const percentage = position / railWidth;
-      const rawValue = isRTL
-        ? max - percentage * (max - min)
-        : percentage * (max - min) + min;
+      const rawValue = (position / sliderWidth) * (max - min) + min;
       return Math.round(rawValue / step) * step;
     },
-    [min, max, step, railWidth, isRTL]
+    [min, max, step, sliderWidth]
   );
 
-  // --- 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 {
@@ -152,11 +86,17 @@ 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));
+        const clampedPos = Math.max(
+          0,
+          Math.min(newPos, rightPosition.value - THUMB_SIZE)
+        );
         leftPosition.value = clampedPos;
         runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
       } else {
-        const clampedPos = Math.min(railWidth, Math.max(newPos, leftPosition.value));
+        const clampedPos = Math.min(
+          sliderWidth,
+          Math.max(newPos, leftPosition.value + THUMB_SIZE)
+        );
         rightPosition.value = clampedPos;
         runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
       }
@@ -169,18 +109,17 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       activeThumb.value = null;
     });
 
-  // --- Animated Styles ---
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: leftPosition.value }],
   }));
 
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: rightPosition.value }],
+    transform: [{ translateX: rightPosition.value - THUMB_SIZE }],
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => ({
-    left: leftPosition.value + THUMB_SIZE / 2,
-    right: railWidth - rightPosition.value + THUMB_SIZE / 2,
+    left: leftPosition.value,
+    right: sliderWidth - rightPosition.value,
   }));
 
   return (
@@ -191,17 +130,23 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         leftPosition={leftPosition}
         rightPosition={rightPosition}
         sliderWidth={sliderWidth}
-        isRTL={isRTL}
-        theme={currTheme}
+        thumbSize={THUMB_SIZE}
       />
+
       <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>
@@ -214,7 +159,8 @@ const getStyles = (theme: ThemeType) =>
   StyleSheet.create({
     container: {
       height: LABEL_HEIGHT + THUMB_SIZE,
-      justifyContent: "flex-end",
+      justifyContent: "center",
+      marginTop: LABEL_HEIGHT, // Add margin to prevent label cutoff
     },
     railContainer: {
       justifyContent: "center",
@@ -245,23 +191,6 @@ 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/index.ts

@@ -1,11 +1,14 @@
-// import { registerRootComponent } from 'expo';
+// import { registerRootComponent } from "expo";
 // import "react-native-reanimated";
 
-
 // import App from "./app";
+// import { I18nManager } from "react-native";
+
+// I18nManager.allowRTL(true);
+// I18nManager.forceRTL(true);
 
 // registerRootComponent(App);
 
-export * from "./theme"
+export * from "./theme";
 export * from "./components";
 export * from "./contexts";