react-native-country-select 0.2.2 → 0.2.3

package/README.md

@@ -271,6 +271,7 @@ export default function App() {
 | disabledBackdropPress        | boolean                                                                 | No       | false                | Whether to disable backdrop press to close                       |
 | removedBackdrop              | boolean                                                                 | No       | false                | Whether to remove the backdrop completely                        |
 | onBackdropPress              | () => void                                                              | No       | -                    | Custom callback for backdrop press                               |
+| dragHandleIndicatorComponent | () => ReactElement                                                      | -        | -                    | Custom component for drag handle indicator on bottom sheet       |
 | countryItemComponent         | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement           | No       | -                    | Custom component for country items                               |
 | sectionTitleComponent        | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No       | -                    | Custom component for section titles                              |
 | closeButtonComponent         | () => ReactElement                                                      | No       | -                    | Custom component for closeButton                                 |

package/lib/components/CountrySelect/index.tsx

@@ -61,6 +61,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   disabledBackdropPress,
   removedBackdrop,
   onBackdropPress,
+  dragHandleIndicatorComponent,
   sectionTitleComponent,
   countryItemComponent,
   closeButtonComponent,
@@ -70,15 +71,15 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   countryNotFoundMessage,
   ...props
 }) => {
-  const {height: windowHeight} = useWindowDimensions();
+  const [modalHeight, setModalHeight] = useState(useWindowDimensions().height);
   const styles = createStyles(theme, modalType, isFullScreen);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const [bottomSheetSize, setBottomSheetSize] = useState({
-    minHeight: MIN_HEIGHT_PERCENTAGE * windowHeight,
-    maxHeight: MAX_HEIGHT_PERCENTAGE * windowHeight,
-    initialHeight: INITIAL_HEIGHT_PERCENTAGE * windowHeight,
+    minHeight: MIN_HEIGHT_PERCENTAGE * modalHeight,
+    maxHeight: MAX_HEIGHT_PERCENTAGE * modalHeight,
+    initialHeight: INITIAL_HEIGHT_PERCENTAGE * modalHeight,
   });
 
   const sheetHeight = useRef(
@@ -93,7 +94,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     }
 
     const DRAG_HANDLE_HEIGHT = 20;
-    const availableHeight = windowHeight - DRAG_HANDLE_HEIGHT;
+    const availableHeight = modalHeight - DRAG_HANDLE_HEIGHT;
 
     const parsedMinHeight = parseHeight(minBottomsheetHeight, availableHeight);
     const parsedMaxHeight = parseHeight(maxBottomsheetHeight, availableHeight);
@@ -112,7 +113,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     minBottomsheetHeight,
     maxBottomsheetHeight,
     initialBottomsheetHeight,
-    windowHeight,
+    modalHeight,
     modalType,
   ]);
 
@@ -134,12 +135,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     }
 
     if (isKeyboardVisible) {
-      sheetHeight.setValue(
-        parseHeight(bottomSheetSize.maxHeight, windowHeight),
-      );
+      sheetHeight.setValue(parseHeight(bottomSheetSize.maxHeight, modalHeight));
       lastHeight.current = bottomSheetSize.maxHeight;
     } else {
-      sheetHeight.setValue(parseHeight(lastHeight.current, windowHeight));
+      sheetHeight.setValue(parseHeight(lastHeight.current, modalHeight));
     }
   }, [isKeyboardVisible, modalType]);
 
@@ -572,7 +571,11 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           styles.backdrop,
           countrySelectStyle?.backdrop,
           removedBackdrop && {backgroundColor: 'transparent'},
-        ]}>
+        ]}
+        onLayout={event => {
+          const {height} = event.nativeEvent.layout;
+          setModalHeight(height);
+        }}>
         <Pressable
           testID="countrySelectBackdrop"
           accessibilityRole="button"
@@ -585,8 +588,22 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         <View
           style={[styles.container, countrySelectStyle?.container]}
           pointerEvents="auto">
-          <View {...handlePanResponder.panHandlers} style={styles.dragHandle}>
-            <View style={styles.dragIndicator} />
+          <View
+            {...handlePanResponder.panHandlers}
+            style={[
+              styles.dragHandleContainer,
+              countrySelectStyle?.dragHandleContainer,
+            ]}>
+            {dragHandleIndicatorComponent ? (
+              dragHandleIndicatorComponent()
+            ) : (
+              <View
+                style={[
+                  styles.dragHandleIndicator,
+                  countrySelectStyle?.dragHandleIndicator,
+                ]}
+              />
+            )}
           </View>
           <Animated.View
             style={[

package/lib/components/styles.js

@@ -42,7 +42,7 @@ export const createStyles = (theme, modalType, isFullScreen) =>
             padding: 16,
             paddingTop: 0,
           },
-    dragHandle: {
+    dragHandleContainer: {
       width: '100%',
       height: 24,
       justifyContent: 'center',
@@ -52,7 +52,7 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       borderTopRightRadius: 20,
       marginBottom: -1,
     },
-    dragIndicator: {
+    dragHandleIndicator: {
       width: 40,
       height: 4,
       backgroundColor: theme === 'dark' ? '#FFFFFF40' : '#00000040',

package/lib/interface/countrySelectProps.ts

@@ -29,6 +29,7 @@ export interface ICountrySelectProps extends ModalProps {
   disabledBackdropPress?: boolean;
   removedBackdrop?: boolean;
   onBackdropPress?: () => void;
+  dragHandleIndicatorComponent?: () => React.ReactElement;
   countryItemComponent?: (item: ICountry) => React.ReactElement;
   sectionTitleComponent?: (item: ISectionTitle) => React.ReactElement;
   closeButtonComponent?: () => React.ReactElement;

package/lib/interface/countrySelectStyles.ts

@@ -4,6 +4,8 @@ export interface ICountrySelectStyle {
   backdrop?: StyleProp<ViewStyle>;
   container?: StyleProp<ViewStyle>;
   content?: StyleProp<ViewStyle>;
+  dragHandleContainer?: StyleProp<ViewStyle>;
+  dragHandleIndicator?: StyleProp<ViewStyle>;
   closeButton?: StyleProp<ViewStyle>;
   closeButtonText?: StyleProp<TextStyle>;
   searchContainer?: StyleProp<ViewStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "🌍 A lightweight and customizable country picker for React Native with modern UI, flags, search engine, and i18n support. Includes TypeScript types, offline support and no dependencies.",
   "main": "lib/index.tsx",
   "types": "lib/index.d.ts",