fix(bottom_sheets): Handle textInput in bottom sheets

ejaro · Jun 30, 2024 · 7c4280c · 7c4280c
1 parent ccd16fc
commit 7c4280c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -30,6 +30,7 @@ export interface PhoneInputProps {
   layout?: "first" | "second";
   filterProps?: CountryFilterProps;
   countryPickerProps?: any;
+  isBottomSheetInput?: boolean;
 }
 export interface PhoneInputState {
   code: CallingCode | undefined;
@@ -299,9 +300,15 @@ export default class PhoneInput extends Component<
   getCallingCode: () => string | undefined;
   isValidNumber: (number: string) => boolean;
   onSelect: (country: Country) => void;
-  getNumberAfterPossiblyEliminatingZero: () => {number: string , formattedNumber: string };
+  getNumberAfterPossiblyEliminatingZero: () => {
+    number: string;
+    formattedNumber: string;
+  };
   onChangeText: (text: string) => void;
   render(): JSX.Element;
 }
 
-export function isValidNumber(number: string, countryCode: CountryCode ): boolean;
+export function isValidNumber(
+  number: string,
+  countryCode: CountryCode
+): boolean;
diff --git a/lib/index.js b/lib/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from "react";
 import { View, Text, TouchableOpacity, Image, TextInput } from "react-native";
+import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import CountryPicker, {
   getCallingCode,
   DARK_THEME,
@@ -32,13 +33,16 @@ export default class PhoneInput extends PureComponent {
 
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.disabled !== prevState.disabled) {
-      if ((nextProps.value || nextProps.value === "") && nextProps.value !== prevState.number) {
-        return ({ disabled: nextProps.disabled, number: nextProps.value });
+      if (
+        (nextProps.value || nextProps.value === "") &&
+        nextProps.value !== prevState.number
+      ) {
+        return { disabled: nextProps.disabled, number: nextProps.value };
       }
-      return ({ disabled: nextProps.disabled });
+      return { disabled: nextProps.disabled };
     }
     return null;
-  };
+  }
 
   async componentDidMount() {
     const { defaultCode } = this.props;
@@ -159,8 +163,14 @@ export default class PhoneInput extends PureComponent {
       filterProps = {},
       countryPickerButtonStyle,
       layout = "first",
+      isBottomSheetInput = false,
     } = this.props;
     const { modalVisible, code, countryCode, number, disabled } = this.state;
+
+    const TextInputComponent = isBottomSheetInput
+      ? BottomSheetTextInput
+      : TextInput;
+
     return (
       <CountryModalProvider>
         <View
@@ -219,7 +229,7 @@ export default class PhoneInput extends PureComponent {
                 style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
               >{`+${code}`}</Text>
             )}
-            <TextInput
+            <TextInputComponent
               style={[styles.numberText, textInputStyle ? textInputStyle : {}]}
               placeholder={placeholder ? placeholder : "Phone Number"}
               onChangeText={this.onChangeText}
@@ -245,4 +255,4 @@ export const isValidNumber = (number, countryCode) => {
   } catch (err) {
     return false;
   }
-};
+};