related-ui-components 2.5.2 → 2.5.3

package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA0GtE,CAAC"}
+{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA4GtE,CAAC"}

package/package.json

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

package/src/app.tsx

@@ -1,140 +1,140 @@
-// import React, { useState } from "react";
-// import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
-// import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
-// import { GestureHandlerRootView } from "react-native-gesture-handler";
-// import {
-//   CarRentalForm,
-//   DateRangePicker,
-//   FlightForm,
-//   FlightSummary,
-//   HotelForm,
-//   HotelSummary,
-//   Filters,
-// } from "./components";
-// import { lightTheme, RelatedProvider, useTheme } from "./theme";
-// import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
-// import PhoneInput from "./components/Input/PhoneInput";
-// import { BottomSheetStackProvider } from "./contexts";
-// import { SafeAreaProvider } from "react-native-safe-area-context";
+import React, { useState } from "react";
+import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
+import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import {
+  CarRentalForm,
+  DateRangePicker,
+  FlightForm,
+  FlightSummary,
+  HotelForm,
+  HotelSummary,
+  Filters,
+} from "./components";
+import { lightTheme, RelatedProvider, useTheme } from "./theme";
+import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
+import PhoneInput from "./components/Input/PhoneInput";
+import { BottomSheetStackProvider } from "./contexts";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-// // Sample data - replace with your actual image URLs
-// const DUMMY_DATA = [
-//   {
-//     id: "1",
-//     image:
-//       "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Mountain Lake",
-//   },
-//   // {
-//   //   id: "2",
-//   //   image:
-//   //     "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//   //   title: "Sunset Cruise",
-//   // },
-//   {
-//     id: "3",
-//     image:
-//       "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Ocean Horizon",
-//   },
-//   {
-//     id: "4",
-//     image:
-//       "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Forest Trail",
-//   },
-//   // {
-//   //   id: "5",
-//   //   image:
-//   //     "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//   //   title: "City Lights",
-//   // },
-// ];
+// Sample data - replace with your actual image URLs
+const DUMMY_DATA = [
+  {
+    id: "1",
+    image:
+      "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Mountain Lake",
+  },
+  // {
+  //   id: "2",
+  //   image:
+  //     "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  //   title: "Sunset Cruise",
+  // },
+  {
+    id: "3",
+    image:
+      "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Ocean Horizon",
+  },
+  {
+    id: "4",
+    image:
+      "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Forest Trail",
+  },
+  // {
+  //   id: "5",
+  //   image:
+  //     "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  //   title: "City Lights",
+  // },
+];
 
-// const App = () => {
-//   const { theme } = useTheme();
+const App = () => {
+  const { theme } = useTheme();
 
-//   const [departureDate, setDepartureDate] = useState<string | undefined>(
-//     undefined
-//   );
-//   const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
+  const [departureDate, setDepartureDate] = useState<string | undefined>(
+    undefined
+  );
+  const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
 
-//   const [progress, setProgress] = useState(25);
-//   const handleAnimate = () => {
-//     // Set progress to a new random value between 0 and 100
-//     const newProgress = Math.floor(Math.random() * 101);
-//     setProgress(newProgress);
-//   };
-//   return (
-//     <>
-//     <SafeAreaProvider>
-//       <GestureHandlerRootView style={{ flex: 1 }}>
-//         <RelatedProvider theme={lightTheme}>
-//           <BottomSheetStackProvider>
-//             <StatusBar barStyle="light-content" />
-//             <SafeAreaView style={styles.appContainer}>
-//               {/* <CircularProgressBar
-//               progress={5}
-//               lineCap="round"
-//               textFont={""}
-//             /> */}
-//               {/* <DateRangePicker
-//               onDatesChange={(t) => {
-//                 setDepartureDate(t.departure);
-//                 setReturnDate(t.return);
-//               }}
-//               departureDate={departureDate}
-//               // departureDisplayValue={departureDate}
-//               returnDate={returnDate}
-//               // returnDisplayValue={returnDate}
-//             ></DateRangePicker> */}
-//               {/* <Filters
-//               bottomSheetBackgroundStyle={{
-//                 borderTopRightRadius: 30,
-//                 borderTopLeftRadius: 30,
-//                 padding: 10,
-//                 backgroundColor: "white",
-//               }}
-//               containerStyle={{
-//                 backgroundColor: "white",
-//                 borderTopRightRadius: 60,
-//                 borderTopLeftRadius: 60,
-//               }}
-//               resetTextStyle={{ color: theme.primary }}
-//               sectionTitleStyle={{ color: "black" }}
-//               titleStyle={{ color: "black" }}
-//               onActionButtonPress={(result) => {
-//                 // setFiltersResult(result);
-//               }}
-//               sortOptions={[{ id: 1, name: "test", value: "test" }]}
-//               // onClose={() => setDisplayFilters(false)}
-//               applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
-//               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} /> */}
-//               <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
-//             </SafeAreaView>
-//           </BottomSheetStackProvider>
-//         </RelatedProvider>
-//       </GestureHandlerRootView>
-//       </SafeAreaProvider>
-//     </>
-//   );
-// };
+  const [progress, setProgress] = useState(25);
+  const handleAnimate = () => {
+    // Set progress to a new random value between 0 and 100
+    const newProgress = Math.floor(Math.random() * 101);
+    setProgress(newProgress);
+  };
+  return (
+    <>
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <RelatedProvider theme={lightTheme}>
+          <BottomSheetStackProvider>
+            <StatusBar barStyle="light-content" />
+            <SafeAreaView style={styles.appContainer}>
+              {/* <CircularProgressBar
+              progress={5}
+              lineCap="round"
+              textFont={""}
+            /> */}
+              {/* <DateRangePicker
+              onDatesChange={(t) => {
+                setDepartureDate(t.departure);
+                setReturnDate(t.return);
+              }}
+              departureDate={departureDate}
+              // departureDisplayValue={departureDate}
+              returnDate={returnDate}
+              // returnDisplayValue={returnDate}
+            ></DateRangePicker> */}
+              {/* <Filters
+              bottomSheetBackgroundStyle={{
+                borderTopRightRadius: 30,
+                borderTopLeftRadius: 30,
+                padding: 10,
+                backgroundColor: "white",
+              }}
+              containerStyle={{
+                backgroundColor: "white",
+                borderTopRightRadius: 60,
+                borderTopLeftRadius: 60,
+              }}
+              resetTextStyle={{ color: theme.primary }}
+              sectionTitleStyle={{ color: "black" }}
+              titleStyle={{ color: "black" }}
+              onActionButtonPress={(result) => {
+                // setFiltersResult(result);
+              }}
+              sortOptions={[{ id: 1, name: "test", value: "test" }]}
+              // onClose={() => setDisplayFilters(false)}
+              applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
+              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} /> */}
+              <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
+            </SafeAreaView>
+          </BottomSheetStackProvider>
+        </RelatedProvider>
+      </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </>
+  );
+};
 
-// const styles = StyleSheet.create({
-//   appContainer: {
-//     flex: 1,
-//     backgroundColor: "#212121", // Match carousel background or choose another
-//     justifyContent: "center", // Center the carousel vertically if it's the main content
-//   },
-// });
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+    backgroundColor: "#212121", // Match carousel background or choose another
+    justifyContent: "center", // Center the carousel vertically if it's the main content
+  },
+});
 
-// export default App;
+export default App;

package/src/components/Input/CountryPickerView.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from "react";
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  InteractionManager,
+  ActivityIndicator,
+  StyleProp,
+  TextStyle,
+} from "react-native";
+import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
+import { useTheme } from "../../theme";
+import { iso2ToFlagEmoji } from "../../utils/flags";
+import { Country } from "./PhoneInput"; // Assuming you export this type
+
+interface CountryPickerViewProps {
+  countries: Country[];
+  onSelectCountry: (c: Country) => void;
+  listTitle: string;
+  listTitleStyle?: StyleProp<TextStyle>;
+  countryNameStyle?: StyleProp<TextStyle>;
+  countryCodeStyle?: StyleProp<TextStyle>;
+}
+
+export const CountryPickerView = ({
+  countries,
+  onSelectCountry,
+  listTitle,
+  listTitleStyle,
+  countryNameStyle,
+  countryCodeStyle,
+}: CountryPickerViewProps) => {
+  const { theme } = useTheme();
+  const [isReady, setIsReady] = useState(false);
+
+  // Defer rendering of the list until after the bottom sheet has animated in
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => {
+      setIsReady(true);
+    });
+  }, []);
+
+  const renderCountry = ({ item }: { item: Country }) => (
+    <TouchableOpacity
+      style={styles.countryRow}
+      onPress={() => onSelectCountry(item)}
+    >
+      <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
+      <View style={styles.countryText}>
+        <Text style={[styles.countryName, { color: theme.text }, countryNameStyle]}>
+          {item.name}
+        </Text>
+        <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={styles.popup}>
+      <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
+        {listTitle}
+      </Text>
+      {isReady ? (
+        <BottomSheetFlatList
+          data={countries}
+          keyExtractor={(c) => c.iso2} // Use a stable key like iso2
+          renderItem={renderCountry}
+          contentContainerStyle={{ paddingBottom: 16 }}
+          initialNumToRender={15} // Performance tuning
+          maxToRenderPerBatch={15} // Performance tuning
+        />
+      ) : (
+        // Show a loading spinner while interactions are completing
+        <View style={styles.loaderContainer}>
+          <ActivityIndicator size="large" color={theme.primary} />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  popup: {
+    flex: 1, // Ensure the view takes full height
+    width: "100%",
+    padding: 16,
+  },
+  loaderContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  popupTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  countryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+  },
+  flag: {
+    fontSize: 18,
+  },
+  countryText: {
+    marginLeft: 12,
+  },
+  countryName: {
+    fontSize: 16,
+  },
+  countryCode: {
+    fontSize: 14,
+    color: "#666",
+  },
+});

package/src/components/Input/PhoneInput.tsx

@@ -1,28 +1,24 @@
-import React, { forwardRef, useState, useMemo, useCallback } from "react";
+import React, { forwardRef, useMemo, useCallback } from "react";
 import {
   TextInput,
   Text,
-  View,
   TouchableOpacity,
   StyleSheet,
-  FlatList,
-  TextInputProps,
   StyleProp,
   TextStyle,
 } from "react-native";
 import CustomInput, { CustomInputProps } from "./Input";
 import { useTheme } from "../../theme";
-import { Popup } from "../Popup";
 import { Ionicons } from "@expo/vector-icons";
 import { useBottomSheetStack } from "../../contexts";
-import { BottomSheetFlatList, BottomSheetView } from "@gorhom/bottom-sheet";
-import { allCountries } from 'country-telephone-data';
+import { allCountries } from "country-telephone-data";
 import { iso2ToFlagEmoji } from "../../utils/flags";
+import { CountryPickerView } from "./CountryPickerView"; 
 
 export type Country = {
-  code: string; 
+  code: string;
   iso2: string;
-  name: string; 
+  name: string;
 };
 
 export interface PhoneInputProps
@@ -41,15 +37,15 @@ export interface PhoneInputProps
   onSelectCountry?: (c: Country) => void;
   countries?: Country[];
 
-  //styles 
+  //styles
   countryNameStyle?: StyleProp<TextStyle>;
   countryCodeStyle?: StyleProp<TextStyle>;
   listTitleStyle?: StyleProp<TextStyle>;
 
-  listTitle?: string
+  listTitle?: string;
 }
 
-const DEFAULT_COUNTRIES: Country[] = allCountries.map(c => ({
+const DEFAULT_COUNTRIES: Country[] = allCountries.map((c) => ({
   code: `+${c.dialCode}`,
   iso2: c.iso2,
   name: c.name,
@@ -81,7 +77,7 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
     ref
   ) => {
     const { theme } = useTheme();
-    const { push, clear} = useBottomSheetStack();
+    const { push, clear } = useBottomSheetStack();
 
     const sel = useMemo(
       () =>
@@ -98,44 +94,38 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
           clear();
         }
       },
-      [onSelectCountry]
+      [onSelectCountry, clear] // Add clear to dependency array
     );
 
-    const renderCountry = ({ item }: { item: Country }) => (
-      <TouchableOpacity
-        style={styles.countryRow}
-        onPress={() => handleCountryPress(item)}
-      >
-        <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
-        <View style={styles.countryText}>
-          <Text style={[styles.countryName, countryNameStyle]}>{item.name}</Text>
-          <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
-        </View>
-      </TouchableOpacity>
-    );
+    const openCountryPicker = useCallback(() => {
+      push({
+        component: (
+          <CountryPickerView
+            countries={countries}
+            onSelectCountry={handleCountryPress}
+            listTitle={listTitle}
+            listTitleStyle={listTitleStyle}
+            countryNameStyle={countryNameStyle}
+            countryCodeStyle={countryCodeStyle}
+          />
+        ),
+        snapPoints: ["100%"],
+      });
+    }, [
+      push,
+      countries,
+      handleCountryPress,
+      listTitle,
+      listTitleStyle,
+      countryNameStyle,
+      countryCodeStyle,
+    ]);
 
     const leftIcon = (
       <TouchableOpacity
         style={[styles.selector, { backgroundColor: theme.inputBackground }]}
-        hitSlop={{left: 30, top: 30, right: 30, bottom: 30}}
-        onPress={() =>
-          push({
-            component: (
-              <BottomSheetView style={styles.popup}>
-                <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
-                  {listTitle}
-                </Text>
-                <BottomSheetFlatList
-                  data={countries}
-                  keyExtractor={(c, i) => i.toString()}
-                  renderItem={renderCountry}
-                  contentContainerStyle={{ paddingBottom: 16 }}
-                />
-              </BottomSheetView>
-            ),
-            snapPoints: ["100%"]
-          })
-        }
+        hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
+        onPress={openCountryPicker}
         activeOpacity={0.8}
       >
         <Text style={[styles.flag, { color: theme.inputText }]}>
@@ -144,31 +134,33 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
         <Text style={[styles.code, { color: theme.inputText }]}>
           {sel.code}
         </Text>
-        <Ionicons name="chevron-down" size={16} style={{marginHorizontal: 4}}></Ionicons>
+        <Ionicons
+          name="chevron-down"
+          size={16}
+          style={{ marginHorizontal: 4 }}
+        ></Ionicons>
       </TouchableOpacity>
     );
 
     return (
-      <>
-        <CustomInput
-          ref={ref}
-          label={label}
-          value={value}
-          onChangeText={onChangeText}
-          keyboardType="phone-pad"
-          placeholder="123 456 7890"
-          leftIcon={leftIcon}
-          containerStyle={containerStyle}
-          inputContainerStyle={inputContainerStyle}
-          inputStyle={inputStyle}
-          labelStyle={labelStyle}
-          error={error}
-          errorStyle={errorStyle}
-          helper={helper}
-          helperStyle={helperStyle}
-          {...rest}
-        />
-      </>
+      <CustomInput
+        ref={ref}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        keyboardType="phone-pad"
+        placeholder="123 456 7890"
+        leftIcon={leftIcon}
+        containerStyle={containerStyle}
+        inputContainerStyle={inputContainerStyle}
+        inputStyle={inputStyle}
+        labelStyle={labelStyle}
+        error={error}
+        errorStyle={errorStyle}
+        helper={helper}
+        helperStyle={helperStyle}
+        {...rest}
+      />
     );
   }
 );
@@ -178,7 +170,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     borderRightWidth: 1,
-    borderRightColor: "grey"
+    borderRightColor: "grey",
   },
   flag: {
     fontSize: 18,
@@ -187,31 +179,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     marginLeft: 4,
   },
-  popup: {
-    // maxHeight: 400,
-    width: "100%",
-    padding: 16,
-  },
-  popupTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  countryRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 10,
-  },
-  countryText: {
-    marginLeft: 12,
-  },
-  countryName: {
-    fontSize: 16,
-  },
-  countryCode: {
-    fontSize: 14,
-    color: "#666",
-  },
 });
 
-export default PhoneInput;
+export default PhoneInput;

package/src/contexts/BottomSheetStackProvider.tsx

@@ -90,6 +90,8 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
     []
   );
 
+  console.log(stack, isOpen)
+
   return (
     <BottomSheetStackContext.Provider
       value={{ push, pop, replace, clear, canGoBack }}