refactor: replace svg with image

Author: anday013

README.md

@@ -68,8 +68,8 @@ export default function App() {
     phoneNumber: '',
   }}
   theme={{
-    withShadow: true,
-    withDarkTheme: true,
+    enableShadow: true,
+    enableDarkTheme: true,
     containerStyle: styles.phoneContainer,
     textInputStyle: styles.input,
     flagButtonStyle: styles.flagButton,
@@ -107,8 +107,8 @@ export default function App() {
 | `textInputStyle`  | `StyleProp<TextStyle>` | Style for the text input             |
 | `codeTextStyle`   | `StyleProp<TextStyle>` | Style for the calling code text      |
 | `flagButtonStyle` | `StyleProp<ViewStyle>` | Style for the flag button            |
-| `withDarkTheme`   | `boolean`              | Enables dark theme for the component |
-| `withShadow`      | `boolean`              | Adds shadow to the input container   |
+| `enableDarkTheme` | `boolean`              | Enables dark theme for the component |
+| `enableShadow`    | `boolean`              | Adds shadow to the input container   |
 
 ## Contributing
 

example/src/App.tsx

@@ -10,7 +10,7 @@ export default function App() {
         // callingCodeEditable={false}
         theme={
           {
-            // withShadow: true,
+            // enableShadow: true,
           }
         }
       />
@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    paddingHorizontal: 16,
     // backgroundColor: 'black',
   },
 });

package.json

@@ -93,7 +93,6 @@
     "react-native-builder-bob": "^0.35.2",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-mask-input": "^1.2.3",
-    "react-native-svg": "^15.11.1",
     "react-test-renderer": "18.3.1",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"

src/PhoneInput/PhoneInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { Appearance, Image, TouchableOpacity, View } from 'react-native';
 import CountryPicker, {
   CountryModalProvider,
@@ -13,7 +13,7 @@ import styles from './styles';
 import { usePhoneInput } from './usePhoneInput';
 
 const isDarkTheme = Appearance.getColorScheme() === 'dark';
-const dropDown =
+const dropDownImage =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAi0lEQVRYR+3WuQ6AIBRE0eHL1T83FBqU5S1szdiY2NyTKcCAzU/Y3AcBXIALcIF0gRPAsehgugDEXnYQrUC88RIgfpuJ+MRrgFmILN4CjEYU4xJgFKIa1wB6Ec24FuBFiHELwIpQxa0ALUId9wAkhCnuBdQQ5ngP4I9wxXsBDyJ9m+8y/g9wAS7ABW4giBshQZji3AAAAABJRU5ErkJggg==';
 
 export const PhoneInput: React.FC<PhoneInputProps> = (props) => {
@@ -25,32 +25,22 @@ export const PhoneInput: React.FC<PhoneInputProps> = (props) => {
 
   const {
     theme: {
-      withDarkTheme = isDarkTheme,
-      withShadow,
+      enableDarkTheme = isDarkTheme,
       textInputStyle,
       flagButtonStyle,
       containerStyle,
+      dropDownImageStyle,
     } = {},
     maskInputProps,
     autoFocus,
-    disableArrowIcon,
-    renderDropdownImage,
+    hideDropdownIcon,
+    renderCustomDropdown,
     countryPickerProps,
     flagProps,
     disabled,
+    dropDownImageProps,
   } = props;
 
-  const _renderDropdownImage = useMemo(() => {
-    return (
-      <Image
-        testID="dropdown-icon"
-        source={{ uri: dropDown }}
-        resizeMode="contain"
-        style={styles.dropDownImage}
-      />
-    );
-  }, []);
-
   const renderFlagButton = useCallback(
     () => (
       <Flag
@@ -66,11 +56,7 @@ export const PhoneInput: React.FC<PhoneInputProps> = (props) => {
     <CountryModalProvider>
       <View
         testID="phone-input-container"
-        style={[
-          styles.container,
-          withShadow ? styles.shadow : {},
-          containerStyle,
-        ]}
+        style={[styles.container, containerStyle]}
       >
         <TouchableOpacity
           testID="country-picker-button"
@@ -89,14 +75,22 @@ export const PhoneInput: React.FC<PhoneInputProps> = (props) => {
             withCallingCode
             disableNativeModal={disabled}
             visible={modalVisible}
-            theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+            theme={enableDarkTheme ? DARK_THEME : DEFAULT_THEME}
             renderFlagButton={renderFlagButton}
             excludeCountries={EXCLUDED_COUNTRIES}
             onClose={hideModal}
             {...countryPickerProps}
           />
-          {!disableArrowIcon &&
-            (renderDropdownImage || <>{_renderDropdownImage}</>)}
+          {!hideDropdownIcon &&
+            (renderCustomDropdown || (
+              <Image
+                testID="dropdown-icon"
+                source={{ uri: dropDownImage }}
+                resizeMode="contain"
+                style={[styles.dropDownImage, dropDownImageStyle]}
+                {...dropDownImageProps}
+              />
+            ))}
         </TouchableOpacity>
         <MaskInput
           testID="phone-input"
@@ -109,7 +103,7 @@ export const PhoneInput: React.FC<PhoneInputProps> = (props) => {
           value={phoneNumber}
           editable={!disabled}
           selectionColor="black"
-          keyboardAppearance={withDarkTheme ? 'dark' : 'default'}
+          keyboardAppearance={enableDarkTheme ? 'dark' : 'default'}
           keyboardType="number-pad"
           autoFocus={autoFocus}
           {...maskInputProps}

src/PhoneInput/PhoneInput.types.ts

@@ -1,4 +1,10 @@
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type {
   CallingCode,
   Country,
@@ -18,21 +24,22 @@ export type PhoneInputProps = {
     phoneNumber: string;
   };
   disabled?: boolean;
-  disableArrowIcon?: boolean;
+  hideDropdownIcon?: boolean;
   onChangeCountry?: (country: Country) => void;
   onChangeText?: (text: string) => void;
-  renderDropdownImage?: JSX.Element;
+  renderCustomDropdown?: JSX.Element;
   theme?: Theme;
   maskInputProps?: MaskInputProps;
   countryPickerProps?: Parameters<typeof CountryPicker>[0];
   flagProps?: Parameters<typeof Flag>[0];
   callingCodeEditable?: boolean;
+  dropDownImageProps?: ImageProps;
 };
 interface Theme {
   containerStyle?: StyleProp<ViewStyle>;
   textInputStyle?: StyleProp<TextStyle>;
   codeTextStyle?: StyleProp<TextStyle>;
   flagButtonStyle?: StyleProp<ViewStyle>;
-  withDarkTheme?: boolean;
-  withShadow?: boolean;
+  dropDownImageStyle?: StyleProp<ImageStyle>;
+  enableDarkTheme?: boolean;
 }

src/PhoneInput/dropdown-icon.tsx

@@ -1,23 +1,12 @@
-import { Dimensions, StyleSheet } from 'react-native';
-const { width: viewportWidth, height: viewportHeight } =
-  Dimensions.get('window');
-function wp(percentage: number) {
-  const value = (percentage * viewportWidth) / 100;
-  return Math.round(value);
-}
-function hp(percentage: number) {
-  const value = (percentage * viewportHeight) / 100;
-  return Math.round(value);
-}
+import { Platform, StyleSheet } from 'react-native';
+
 const styles = StyleSheet.create({
   container: {
-    width: wp(90),
     backgroundColor: 'white',
     flexDirection: 'row',
     borderRadius: 12,
     overflow: 'hidden',
-    height: hp(7),
-    minHeight: 56,
+    height: 60,
     borderWidth: 1,
     borderColor: '#DFDFDE',
   },
@@ -31,20 +20,10 @@ const styles = StyleSheet.create({
     borderRightColor: '#E5E7EB',
     paddingHorizontal: 8,
   },
-  shadow: {
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
   dropDownImage: {
     height: 16,
     width: 16,
-    marginLeft: 4,
+    marginLeft: Platform.select({ android: 0, default: 2 }),
     opacity: 0.9,
   },
   codeText: {
@@ -56,7 +35,7 @@ const styles = StyleSheet.create({
   },
   numberText: {
     flex: 1,
-    paddingHorizontal: wp(4),
+    paddingHorizontal: 16,
     fontSize: 15,
     color: '#1F2937',
     letterSpacing: 0.3,

src/PhoneInput/styles.ts

@@ -85,30 +85,13 @@ describe('PhoneInput', () => {
 
   it('handles dark theme correctly', () => {
     const { getByTestId } = render(
-      <PhoneInput {...defaultProps} theme={{ withDarkTheme: true }} />
+      <PhoneInput {...defaultProps} theme={{ enableDarkTheme: true }} />
     );
 
     const input = getByTestId('phone-input');
     expect(input.props.keyboardAppearance).toBe('dark');
   });
 
-  it('handles shadow style correctly', () => {
-    const { getByTestId } = render(
-      <PhoneInput {...defaultProps} theme={{ withShadow: true }} />
-    );
-
-    const container = getByTestId('phone-input-container');
-    expect(container.props.style).toContainEqual(
-      expect.objectContaining({
-        shadowColor: '#000000',
-        shadowOffset: expect.any(Object),
-        shadowOpacity: expect.any(Number),
-        shadowRadius: expect.any(Number),
-        elevation: expect.any(Number),
-      })
-    );
-  });
-
   it('handles country picker modal visibility', () => {
     const { getByTestId } = render(<PhoneInput {...defaultProps} />);
 
@@ -121,7 +104,7 @@ describe('PhoneInput', () => {
   it('renders custom dropdown image when provided', () => {
     const customDropdown = <View testID="custom-dropdown" />;
     const { getByTestId } = render(
-      <PhoneInput {...defaultProps} renderDropdownImage={customDropdown} />
+      <PhoneInput {...defaultProps} renderCustomDropdown={customDropdown} />
     );
 
     expect(getByTestId('custom-dropdown')).toBeTruthy();
@@ -151,9 +134,9 @@ describe('PhoneInput', () => {
     );
   });
 
-  it('hides arrow icon when disableArrowIcon is true', () => {
+  it('hides arrow icon when hideDropdownIcon is true', () => {
     const { queryByTestId } = render(
-      <PhoneInput {...defaultProps} disableArrowIcon />
+      <PhoneInput {...defaultProps} hideDropdownIcon />
     );
 
     expect(queryByTestId('dropdown-icon')).toBeNull();

src/__tests__/PhoneInput.test.tsx

@@ -25,9 +25,6 @@ jest.mock('react-native-country-picker-modal', () => ({
 
 // Mock react-native
 jest.mock('react-native', () => ({
-  Dimensions: {
-    get: jest.fn().mockReturnValue({ width: 375, height: 812 }),
-  },
   TextInput: 'TextInput',
   Image: 'Image',
   TouchableOpacity: 'TouchableOpacity',
@@ -44,4 +41,7 @@ jest.mock('react-native', () => ({
       return style || {};
     },
   },
+  Platform: {
+    select: jest.fn(),
+  },
 }));