react-native-country-select 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +31 -29
  2. package/lib/components/CountryItem/index.tsx +5 -32
  3. package/lib/components/CountrySelect/index.tsx +51 -66
  4. package/lib/components/styles.js +37 -36
  5. package/lib/interface/countryItemProps.ts +0 -1
  6. package/lib/interface/countrySelectProps.ts +2 -0
  7. package/lib/interface/countrySelectStyles.ts +3 -19
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -248,35 +248,37 @@ export default function App() {
248
248
 
249
249
  ## CountrySelect Props
250
250
 
251
- | Prop | Type | Required | Default | Description |
252
- | ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------- |
253
- | visible | boolean | Yes | false | Controls the visibility of the country picker modal |
254
- | onClose | () => void | Yes | - | Callback function called when the modal is closed |
255
- | onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | - | Callback function called when a country is selected |
256
- | modalType | 'bottomSheet' \| 'popup' | No | 'bottomSheet' | Type of modal to display |
257
- | countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | - | Custom styles for the country picker |
258
- | isFullScreen | boolean | No | false | Whether the modal should be full screen |
259
- | popularCountries | string[] | No | [] | Array of country codes to show in popular section |
260
- | visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to show (whitelist) |
261
- | hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to hide (blacklist) |
262
- | theme | 'light' \| 'dark' | No | 'light' | Theme for the country picker |
263
- | language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng' | Language for country names (see supported languages below) |
264
- | showSearchInput | boolean | No | true | Whether to show the search input field |
265
- | searchPlaceholder | string | No | 'Search country...' | Placeholder text for search input |
266
- | minBottomsheetHeight | number \| string | No | 30% | Minimum height for bottom sheet modal |
267
- | maxBottomsheetHeight | number \| string | No | 80% | Maximum height for bottom sheet modal |
268
- | initialBottomsheetHeight | number \| string | No | 50% | Initial height for bottom sheet modal |
269
- | disabledBackdropPress | boolean | No | false | Whether to disable backdrop press to close |
270
- | removedBackdrop | boolean | No | false | Whether to remove the backdrop completely |
271
- | onBackdropPress | () => void | No | - | Custom callback for backdrop press |
272
- | countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom component for country items |
273
- | sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | - | Custom component for section titles |
274
- | closeButtonComponent | () => ReactElement | No | - | Custom component for closeButton |
275
- | showCloseButton | boolean | No | false | Whether to show the close button |
276
- | popularCountriesTitle | string | No | 'Popular Countries' | Popular Countries section title |
277
- | allCountriesTitle | string | No | 'All Countries' | All Countries section title |
278
- | showsVerticalScrollIndicator | boolean | No | false | Displays a horizontal scroll indicator |
279
- | countryNotFoundMessage | string | No | "No countries found" | Country not found in search |
251
+ | Prop | Type | Required | Default | Description |
252
+ | ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------------- |
253
+ | visible | boolean | Yes | false | Controls the visibility of the country picker modal |
254
+ | onClose | () => void | Yes | - | Callback function called when the modal is closed |
255
+ | onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | - | Callback function called when a country is selected |
256
+ | modalType | 'bottomSheet' \| 'popup' | No | 'bottomSheet' | Type of modal to display |
257
+ | countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | - | Custom styles for the country picker |
258
+ | isFullScreen | boolean | No | false | Whether the modal should be full screen |
259
+ | popularCountries | string[] | No | [] | Array of country codes to show in popular section |
260
+ | visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to show (whitelist) |
261
+ | hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to hide (blacklist) |
262
+ | theme | 'light' \| 'dark' | No | 'light' | Theme for the country picker |
263
+ | language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng' | Language for country names (see supported languages below) |
264
+ | showSearchInput | boolean | No | true | Whether to show the search input field |
265
+ | searchPlaceholder | string | No | 'Search country...' | Placeholder text for search input |
266
+ | searchPlaceholderTextColor | string | No | '#00000080' | Placeholder text color for search input |
267
+ | searchSelectionColor | string | No | default | Highlight, selection handle and cursor color of the search input |
268
+ | minBottomsheetHeight | number \| string | No | 30% | Minimum height for bottom sheet modal |
269
+ | maxBottomsheetHeight | number \| string | No | 80% | Maximum height for bottom sheet modal |
270
+ | initialBottomsheetHeight | number \| string | No | 50% | Initial height for bottom sheet modal |
271
+ | disabledBackdropPress | boolean | No | false | Whether to disable backdrop press to close |
272
+ | removedBackdrop | boolean | No | false | Whether to remove the backdrop completely |
273
+ | onBackdropPress | () => void | No | - | Custom callback for backdrop press |
274
+ | countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom component for country items |
275
+ | sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | - | Custom component for section titles |
276
+ | closeButtonComponent | () => ReactElement | No | - | Custom component for closeButton |
277
+ | showCloseButton | boolean | No | false | Whether to show the close button |
278
+ | popularCountriesTitle | string | No | 'Popular Countries' | Popular Countries section title |
279
+ | allCountriesTitle | string | No | 'All Countries' | All Countries section title |
280
+ | showsVerticalScrollIndicator | boolean | No | false | Displays a horizontal scroll indicator |
281
+ | countryNotFoundMessage | string | No | "No countries found" | Country not found in search |
280
282
 
281
283
  <br>
282
284
 
package/lib/components/CountryItem/index.tsx CHANGED
@@ -13,7 +13,6 @@ export const CountryItem = memo<ICountryItemProps>(
13
13
  onClose,
14
14
  theme = 'light',
15
15
  language,
16
- modalType,
17
16
  countrySelectStyle,
18
17
  }) => {
19
18
  const styles = createStyles(theme);
@@ -24,51 +23,25 @@ export const CountryItem = memo<ICountryItemProps>(
24
23
  accessibilityRole="button"
25
24
  accessibilityLabel="Country Select Item"
26
25
  accessibilityHint="Click to select a country"
27
- style={[
28
- styles.countryItem,
29
- modalType === 'popup'
30
- ? countrySelectStyle?.popup?.countryItem
31
- : countrySelectStyle?.bottomSheet?.countryItem,
32
- ]}
26
+ style={[styles.countryItem, countrySelectStyle?.countryItem]}
33
27
  onPress={() => {
34
28
  onSelect(item);
35
29
  onClose();
36
30
  }}>
37
31
  <Text
38
32
  testID="countrySelectItemFlag"
39
- style={[
40
- styles.flag,
41
- modalType === 'popup'
42
- ? countrySelectStyle?.popup?.flag
43
- : countrySelectStyle?.bottomSheet?.flag,
44
- ]}>
33
+ style={[styles.flag, countrySelectStyle?.flag]}>
45
34
  {item.flag || item.cca2}
46
35
  </Text>
47
- <View
48
- style={[
49
- styles.countryInfo,
50
- modalType === 'popup'
51
- ? countrySelectStyle?.popup?.countryInfo
52
- : countrySelectStyle?.bottomSheet?.countryInfo,
53
- ]}>
36
+ <View style={[styles.countryInfo, countrySelectStyle?.countryInfo]}>
54
37
  <Text
55
38
  testID="countrySelectItemCallingCode"
56
- style={[
57
- styles.callingCode,
58
- modalType === 'popup'
59
- ? countrySelectStyle?.popup?.callingCode
60
- : countrySelectStyle?.bottomSheet?.callingCode,
61
- ]}>
39
+ style={[styles.callingCode, countrySelectStyle?.callingCode]}>
62
40
  {item.idd.root}
63
41
  </Text>
64
42
  <Text
65
43
  testID="countrySelectItemName"
66
- style={[
67
- styles.countryName,
68
- modalType === 'popup'
69
- ? countrySelectStyle?.popup?.countryName
70
- : countrySelectStyle?.bottomSheet?.countryName,
71
- ]}>
44
+ style={[styles.countryName, countrySelectStyle?.countryName]}>
72
45
  {item?.translations[language]?.common ||
73
46
  item?.translations[DEFAULT_LANGUAGE]?.common}
74
47
  </Text>
package/lib/components/CountrySelect/index.tsx CHANGED
@@ -52,6 +52,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
52
52
  language = DEFAULT_LANGUAGE,
53
53
  showSearchInput = true,
54
54
  searchPlaceholder,
55
+ searchPlaceholderTextColor,
56
+ searchSelectionColor,
55
57
  showCloseButton = false,
56
58
  minBottomsheetHeight,
57
59
  maxBottomsheetHeight,
@@ -69,7 +71,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
69
71
  ...props
70
72
  }) => {
71
73
  const {height: windowHeight} = useWindowDimensions();
72
- const styles = createStyles(theme);
74
+ const styles = createStyles(theme, modalType, isFullScreen);
73
75
 
74
76
  const [searchQuery, setSearchQuery] = useState('');
75
77
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
@@ -263,21 +265,29 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
263
265
  const getCountries = useMemo(() => {
264
266
  const query = searchQuery.toLowerCase();
265
267
 
266
- if (query.length > 0) {
267
- let countriesData = countries as unknown as ICountry[];
268
+ let countriesData = countries as unknown as ICountry[];
268
269
 
269
- if (visibleCountries.length > 0) {
270
- countriesData = (countries as unknown as ICountry[]).filter(country =>
271
- visibleCountries.includes(country.cca2),
272
- );
273
- }
270
+ if (visibleCountries.length > 0 && hiddenCountries.length > 0) {
271
+ countriesData = (countries as unknown as ICountry[]).filter(
272
+ country =>
273
+ visibleCountries.includes(country.cca2) &&
274
+ !hiddenCountries.includes(country.cca2),
275
+ );
276
+ }
274
277
 
275
- if (hiddenCountries.length > 0) {
276
- countriesData = (countries as unknown as ICountry[]).filter(
277
- country => !hiddenCountries.includes(country.cca2),
278
- );
279
- }
278
+ if (visibleCountries.length > 0 && hiddenCountries.length === 0) {
279
+ countriesData = (countries as unknown as ICountry[]).filter(country =>
280
+ visibleCountries.includes(country.cca2),
281
+ );
282
+ }
280
283
 
284
+ if (hiddenCountries.length > 0 && visibleCountries.length === 0) {
285
+ countriesData = (countries as unknown as ICountry[]).filter(
286
+ country => !hiddenCountries.includes(country.cca2),
287
+ );
288
+ }
289
+
290
+ if (query.length > 0) {
281
291
  const filteredCountries = countriesData.filter(country => {
282
292
  const countryName = getCountryNameInLanguage(country);
283
293
  const normalizedCountryName = normalizeCountryName(
@@ -300,26 +310,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
300
310
  return sortCountriesAlphabetically(filteredCountries);
301
311
  }
302
312
 
303
- let allCountries = countries as unknown as ICountry[];
304
-
305
- if (visibleCountries.length > 0) {
306
- allCountries = (countries as unknown as ICountry[]).filter(country =>
307
- visibleCountries.includes(country.cca2),
308
- );
309
- }
310
-
311
- if (hiddenCountries.length > 0) {
312
- allCountries = (countries as unknown as ICountry[]).filter(
313
- country => !hiddenCountries.includes(country.cca2),
314
- );
315
- }
316
-
317
313
  const popularCountriesData = sortCountriesAlphabetically(
318
- allCountries.filter(country => popularCountries.includes(country.cca2)),
314
+ countriesData.filter(country => popularCountries.includes(country.cca2)),
319
315
  );
320
316
 
321
317
  const otherCountriesData = sortCountriesAlphabetically(
322
- allCountries.filter(country => !popularCountries.includes(country.cca2)),
318
+ countriesData.filter(country => !popularCountries.includes(country.cca2)),
323
319
  );
324
320
 
325
321
  const result: IListItem[] = [];
@@ -388,14 +384,11 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
388
384
  accessibilityRole="button"
389
385
  accessibilityLabel="Country Select Modal Close Button"
390
386
  accessibilityHint="Click to close the Country Select modal"
391
- style={[styles.closeButton, countrySelectStyle?.popup?.closeButton]}
387
+ style={[styles.closeButton, countrySelectStyle?.closeButton]}
392
388
  activeOpacity={0.6}
393
389
  onPress={onClose}>
394
390
  <Text
395
- style={[
396
- styles.closeButtonText,
397
- countrySelectStyle?.popup?.closeButtonText,
398
- ]}>
391
+ style={[styles.closeButtonText, countrySelectStyle?.closeButtonText]}>
399
392
  {'\u00D7'}
400
393
  </Text>
401
394
  </TouchableOpacity>
@@ -409,22 +402,16 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
409
402
  accessibilityRole="text"
410
403
  accessibilityLabel="Country Select Search Input"
411
404
  accessibilityHint="Type to search for a country"
412
- style={[
413
- styles.searchInput,
414
- modalType === 'popup'
415
- ? countrySelectStyle?.popup?.searchInput
416
- : countrySelectStyle?.bottomSheet?.searchInput,
417
- ]}
405
+ style={[styles.searchInput, countrySelectStyle?.searchInput]}
418
406
  placeholder={
419
407
  searchPlaceholder ||
420
408
  translations.searchPlaceholder[language as ICountrySelectLanguages]
421
409
  }
422
410
  placeholderTextColor={
423
- (modalType === 'popup'
424
- ? countrySelectStyle?.popup?.searchInputPlaceholder?.color
425
- : countrySelectStyle?.bottomSheet?.searchInputPlaceholder?.color) ||
426
- styles.searchInputPlaceholder.color
411
+ searchPlaceholderTextColor ||
412
+ (theme === 'dark' ? '#FFFFFF80' : '#00000080')
427
413
  }
414
+ selectionColor={searchSelectionColor}
428
415
  value={searchQuery}
429
416
  onChangeText={setSearchQuery}
430
417
  />
@@ -437,16 +424,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
437
424
  <View
438
425
  style={[
439
426
  styles.countryNotFoundContainer,
440
- modalType === 'popup'
441
- ? countrySelectStyle?.popup?.countryNotFoundContainer
442
- : countrySelectStyle?.bottomSheet?.countryNotFoundContainer,
427
+ countrySelectStyle?.countryNotFoundContainer,
443
428
  ]}>
444
429
  <Text
445
430
  style={[
446
431
  styles.countryNotFoundMessage,
447
- modalType === 'popup'
448
- ? countrySelectStyle?.popup?.countryNotFoundMessage
449
- : countrySelectStyle?.bottomSheet?.countryNotFoundMessage,
432
+ countrySelectStyle?.countryNotFoundMessage,
450
433
  ]}>
451
434
  {countryNotFoundMessage ||
452
435
  translations.searchNotFoundMessage[
@@ -482,12 +465,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
482
465
  <Text
483
466
  testID="countrySelectSectionTitle"
484
467
  accessibilityRole="header"
485
- style={[
486
- styles.sectionTitle,
487
- modalType === 'popup'
488
- ? countrySelectStyle?.popup?.sectionTitle
489
- : countrySelectStyle?.bottomSheet?.sectionTitle,
490
- ]}>
468
+ style={[styles.sectionTitle, countrySelectStyle?.sectionTitle]}>
491
469
  {popularCountriesTitle && index === 0
492
470
  ? popularCountriesTitle
493
471
  : allCountriesTitle && index > 0
@@ -508,7 +486,6 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
508
486
  onClose={onClose}
509
487
  theme={theme}
510
488
  language={language}
511
- modalType={modalType}
512
489
  countrySelectStyle={countrySelectStyle}
513
490
  />
514
491
  );
@@ -541,14 +518,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
541
518
  style={[
542
519
  styles.backdrop,
543
520
  {alignItems: 'center', justifyContent: 'center'},
544
- countrySelectStyle?.popup?.backdrop,
521
+ countrySelectStyle?.backdrop,
545
522
  removedBackdrop && {backgroundColor: 'transparent'},
546
523
  ]}
547
524
  onPress={onBackdropPress || onClose}>
548
525
  <Pressable
549
526
  style={[
550
- styles.popupContainer,
551
- countrySelectStyle?.popup?.popupContainer,
527
+ styles.container,
528
+ countrySelectStyle?.container,
552
529
  isFullScreen && {
553
530
  flex: 1,
554
531
  width: '100%',
@@ -557,8 +534,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
557
534
  ]}>
558
535
  <View
559
536
  style={[
560
- styles.popupContent,
561
- countrySelectStyle?.popup?.popupContent,
537
+ styles.content,
538
+ countrySelectStyle?.content,
562
539
  isFullScreen && {
563
540
  borderRadius: 0,
564
541
  },
@@ -567,7 +544,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
567
544
  <View
568
545
  style={[
569
546
  styles.searchContainer,
570
- countrySelectStyle?.popup?.searchContainer,
547
+ countrySelectStyle?.searchContainer,
571
548
  ]}>
572
549
  {(isFullScreen || showCloseButton) && renderCloseButton()}
573
550
  {showSearchInput && renderSearchInput()}
@@ -593,6 +570,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
593
570
  <View
594
571
  style={[
595
572
  styles.backdrop,
573
+ countrySelectStyle?.backdrop,
596
574
  removedBackdrop && {backgroundColor: 'transparent'},
597
575
  ]}>
598
576
  <Pressable
@@ -604,13 +582,16 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
604
582
  style={{flex: 1}}
605
583
  onPress={onBackdropPress || onClose}
606
584
  />
607
- <View style={styles.sheetContainer} pointerEvents="auto">
585
+ <View
586
+ style={[styles.container, countrySelectStyle?.container]}
587
+ pointerEvents="auto">
608
588
  <View {...handlePanResponder.panHandlers} style={styles.dragHandle}>
609
589
  <View style={styles.dragIndicator} />
610
590
  </View>
611
591
  <Animated.View
612
592
  style={[
613
- styles.sheetContent,
593
+ styles.content,
594
+ countrySelectStyle?.content,
614
595
  {
615
596
  height: sheetHeight,
616
597
  minHeight: bottomSheetSize.minHeight,
@@ -618,7 +599,11 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
618
599
  },
619
600
  ]}>
620
601
  {(showSearchInput || showCloseButton) && (
621
- <View style={styles.searchContainer}>
602
+ <View
603
+ style={[
604
+ styles.searchContainer,
605
+ countrySelectStyle?.searchContainer,
606
+ ]}>
622
607
  {showCloseButton && renderCloseButton()}
623
608
  {showSearchInput && renderSearchInput()}
624
609
  </View>
package/lib/components/styles.js CHANGED
@@ -1,43 +1,47 @@
1
1
  import {Platform, StatusBar, StyleSheet} from 'react-native';
2
2
 
3
- export const createStyles = theme =>
3
+ export const createStyles = (theme, modalType, isFullScreen) =>
4
4
  StyleSheet.create({
5
5
  backdrop: {
6
6
  flex: 1,
7
7
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
8
8
  },
9
- popupContainer: {
10
- marginTop: StatusBar.currentHeight,
11
- width: '90%',
12
- maxWidth: 600,
13
- height: '60%',
14
- alignItems: 'center',
15
- justifyContent: 'center',
16
- alignSelf: 'center',
17
- },
18
- popupContent: {
19
- flex: 1,
20
- width: '100%',
21
- backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
22
- borderRadius: 20,
23
- alignSelf: 'center',
24
- padding: 16,
25
- },
26
- sheetContainer: {
27
- marginTop: StatusBar.currentHeight,
28
- position: 'absolute',
29
- bottom: 0,
30
- left: 0,
31
- right: 0,
32
- width: '100%',
33
- alignItems: 'center',
34
- },
35
- sheetContent: {
36
- width: '100%',
37
- backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
38
- padding: 16,
39
- paddingTop: 0,
40
- },
9
+ container:
10
+ modalType === 'popup' || isFullScreen
11
+ ? {
12
+ marginTop: StatusBar.currentHeight,
13
+ width: '90%',
14
+ maxWidth: 600,
15
+ height: '60%',
16
+ alignItems: 'center',
17
+ justifyContent: 'center',
18
+ alignSelf: 'center',
19
+ }
20
+ : {
21
+ marginTop: StatusBar.currentHeight,
22
+ position: 'absolute',
23
+ bottom: 0,
24
+ left: 0,
25
+ right: 0,
26
+ width: '100%',
27
+ alignItems: 'center',
28
+ },
29
+ content:
30
+ modalType === 'popup' || isFullScreen
31
+ ? {
32
+ flex: 1,
33
+ width: '100%',
34
+ backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
35
+ borderRadius: 20,
36
+ alignSelf: 'center',
37
+ padding: 16,
38
+ }
39
+ : {
40
+ width: '100%',
41
+ backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
42
+ padding: 16,
43
+ paddingTop: 0,
44
+ },
41
45
  dragHandle: {
42
46
  width: '100%',
43
47
  height: 24,
@@ -69,9 +73,6 @@ export const createStyles = theme =>
69
73
  borderWidth: 1,
70
74
  color: theme === 'dark' ? '#FFFFFF' : '#000000',
71
75
  },
72
- searchInputPlaceholder: {
73
- color: theme === 'dark' ? '#FFFFFF80' : '#00000080',
74
- },
75
76
  list: {
76
77
  flex: 1,
77
78
  },
package/lib/interface/countryItemProps.ts CHANGED
@@ -8,6 +8,5 @@ export interface ICountryItemProps {
8
8
  onClose: () => void;
9
9
  language: ICountrySelectLanguages;
10
10
  theme?: 'light' | 'dark';
11
- modalType?: 'bottomSheet' | 'popup';
12
11
  countrySelectStyle?: ICountrySelectStyle;
13
12
  }
package/lib/interface/countrySelectProps.ts CHANGED
@@ -20,6 +20,8 @@ export interface ICountrySelectProps extends ModalProps {
20
20
  language?: ICountrySelectLanguages;
21
21
  showSearchInput?: boolean;
22
22
  searchPlaceholder?: string;
23
+ searchPlaceholderTextColor?: string;
24
+ searchSelectionColor?: string;
23
25
  showCloseButton?: boolean;
24
26
  minBottomsheetHeight?: number | string;
25
27
  maxBottomsheetHeight?: number | string;
package/lib/interface/countrySelectStyles.ts CHANGED
@@ -1,14 +1,13 @@
1
1
  import {StyleProp, TextStyle, ViewStyle} from 'react-native';
2
2
 
3
- interface IBaseModalStyle {
3
+ export interface ICountrySelectStyle {
4
4
  backdrop?: StyleProp<ViewStyle>;
5
+ container?: StyleProp<ViewStyle>;
6
+ content?: StyleProp<ViewStyle>;
5
7
  closeButton?: StyleProp<ViewStyle>;
6
8
  closeButtonText?: StyleProp<TextStyle>;
7
9
  searchContainer?: StyleProp<ViewStyle>;
8
10
  searchInput?: StyleProp<TextStyle>;
9
- searchInputPlaceholder?: {
10
- color: string;
11
- };
12
11
  sectionTitle?: StyleProp<TextStyle>;
13
12
  list?: StyleProp<ViewStyle>;
14
13
  countryItem?: StyleProp<ViewStyle>;
@@ -19,18 +18,3 @@ interface IBaseModalStyle {
19
18
  countryNotFoundContainer?: StyleProp<ViewStyle>;
20
19
  countryNotFoundMessage?: StyleProp<TextStyle>;
21
20
  }
22
-
23
- interface IPopupStyle extends IBaseModalStyle {
24
- popupContainer?: StyleProp<ViewStyle>;
25
- popupContent?: StyleProp<ViewStyle>;
26
- }
27
-
28
- interface IBottomSheetStyle extends IBaseModalStyle {
29
- sheetContainer?: StyleProp<ViewStyle>;
30
- sheetContent?: StyleProp<ViewStyle>;
31
- }
32
-
33
- export interface ICountrySelectStyle {
34
- popup?: IPopupStyle;
35
- bottomSheet?: IBottomSheetStyle;
36
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-country-select",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "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.",
5
5
  "main": "lib/index.tsx",
6
6
  "types": "lib/index.d.ts",