Add new properties

vishaldhanotiya · Sep 10, 2024 · c07b84a · c07b84a
1 parent 0c7320f
commit c07b84a
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 98 deletions.
diff --git a/App.js b/App.js
@@ -3,86 +3,98 @@ import { StyleSheet, Text, View } from "react-native";
 import CountryPicker from "rn-country-picker";
 
 const App = () => {
-	const [countryCode, setCountryCode] = useState<string>("91");
+  const [countryCode, setCountryCode] = useState < string > "91";
 
-	const selectedValue = (value: string) => {
-		setCountryCode(value);
-	};
+  const selectedValue = (value: string) => {
+    setCountryCode(value);
+  };
 
-	return (
-		<View style={styles.container}>
-			<Text style={styles.titleText}>React Native Country Picker</Text>
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>React Native Country Picker</Text>
 
-			<CountryPicker
-				disable={false}
-				animationType={"slide"}
-				language="en"
-				containerStyle={styles.pickerStyle}
-				pickerTitleStyle={styles.pickerTitleStyle}
-				dropDownImage={require("./res/ic_drop_down.png")}
-				selectedCountryTextStyle={styles.selectedCountryTextStyle}
-				countryNameTextStyle={styles.countryNameTextStyle}
-				pickerTitle={"Country Picker"}
-				searchBarPlaceHolder={"Search......"}
-				hideCountryFlag={false}
-				hideCountryCode={false}
-				searchBarStyle={styles.searchBarStyle}
-				backButtonImage={require("./res/ic_back_black.png")}
-				searchButtonImage={require("./res/ic_search.png")}
-				countryCode={"1"}
-				selectedValue={selectedValue}
-			/>
-		</View>
-	);
+      <CountryPicker
+        disable={false}
+        animationType={"slide"}
+        language="en"
+        containerStyle={styles.pickerStyle}
+        pickerTitleStyle={styles.pickerTitleStyle}
+        dropDownImage={require("./res/ic_drop_down.png")}
+        selectedCountryTextStyle={styles.selectedCountryTextStyle}
+        countryNameTextStyle={styles.countryNameTextStyle}
+        pickerTitle={"Country Picker"}
+        searchBarPlaceHolder={"Search......"}
+        hideCountryFlag={false}
+        hideCountryCode={false}
+        searchBarStyle={styles.searchBarStyle}
+        searchInputStyle={styles.searchInputStyle}
+        searchBarPlaceholderTextColor={"#000"}
+        backButtonImage={require("./res/ic_back_black.png")}
+        searchButtonImage={require("./res/ic_search.png")}
+        countryCode={"1"}
+        selectedValue={selectedValue}
+      />
+    </View>
+  );
 };
 export default App;
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		justifyContent: "center",
-		alignItems: "center",
-		backgroundColor: "#F5FCFF",
-	},
-	titleText: {
-		color: "#000",
-		fontSize: 25,
-		marginBottom: 25,
-		fontWeight: "bold",
-	},
-	pickerTitleStyle: {
-		justifyContent: "center",
-		flexDirection: "row",
-		alignSelf: "center",
-		fontWeight: "bold",
-	},
-	pickerStyle: {
-		height: 54,
-		width: 150,
-		marginVertical: 10,
-		borderColor: "#303030",
-		alignItems: "center",
-		marginHorizontal: 10,
-		padding: 10,
-		backgroundColor: "white",
-		borderRadius: 5,
-		borderWidth: 2,
-		fontSize: 16,
-		color: "#000",
-	},
-	selectedCountryTextStyle: {
-		paddingLeft: 5,
-		color: "#000",
-		textAlign: "right",
-	},
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F5FCFF",
+  },
+  searchInputStyle: {
+    flex: 1,
+    marginLeft: 10,
+    height: 45,
+  },
+  titleText: {
+    color: "#000",
+    fontSize: 25,
+    marginBottom: 25,
+    fontWeight: "bold",
+  },
+  pickerTitleStyle: {
+    justifyContent: "center",
+    flexDirection: "row",
+    alignSelf: "center",
+    fontWeight: "bold",
+  },
+  searchBar: {
+    flex: 1,
+    marginLeft: 10,
+    height: 45,
+  },
+  pickerStyle: {
+    height: 54,
+    width: 150,
+    marginVertical: 10,
+    borderColor: "#303030",
+    alignItems: "center",
+    marginHorizontal: 10,
+    padding: 10,
+    backgroundColor: "white",
+    borderRadius: 5,
+    borderWidth: 2,
+    fontSize: 16,
+    color: "#000",
+  },
+  selectedCountryTextStyle: {
+    paddingLeft: 5,
+    color: "#000",
+    textAlign: "right",
+  },
 
-	countryNameTextStyle: {
-		paddingLeft: 10,
-		color: "#000",
-		textAlign: "right",
-	},
+  countryNameTextStyle: {
+    paddingLeft: 10,
+    color: "#000",
+    textAlign: "right",
+  },
 
-	searchBarStyle: {
-		flex: 1,
-	},
+  searchBarStyle: {
+    flex: 1,
+  },
 });
diff --git a/README.md b/README.md
@@ -78,25 +78,27 @@ const styles = StyleSheet.create({
 
 ## Properties
 
-| Prop                     | Default | Type                     | Description                                                    | Required/Optional |
-| ------------------------ | ------- | ------------------------ | -------------------------------------------------------------- | ----------------- |
-| countryId                | -       | string                   | Default and selected country Id                                | Required          |
-| countryCode              | -       | string                   | Default and selected country code                              | Required          |
-| searchBarPlaceHolder     | -       | string                   | Change search bar placeholder                                  | Optional          |
-| searchBarStyle           | -       | object                   | Customize search bar text input style                          | Optional          |
-| pickerContainerStyle     | -       | object                   | Customize picker style                                         | Required          |
-| searchBarContainerStyle  | -       | object                   | Customize search bar style                                     | Optional          |
-| countryNameTextStyle     | -       | object                   | Customize country name text style(List View)                   | Optional          |
-| selectedCountryTextStyle | -       | object                   | Customize selected label text style                            | Optional          |
-| dropDownIconStyle        | -       | object                   | Change dropdown arrow style                                    | Optional          |
-| countryFlagStyle         | -       | object                   | Customize flag style                                           | Optional          |
-| searchIcon               | -       | png/jpg                  | Add custom search Icon                                         | Optional          |
-| dropDownIcon             | -       | png/jpg                  | Add custom drop down icon                                      | Optional          |
-| selectedValue            | -       | function                 | callback function received value from list selection           | Required          |
-| animationType            | -       | string [slide,none,fade] | Change Modal Animation                                         | Optional          |
-| hideCountryCode          | -       | bool                     | hide country code from component only show flag                | Optional          |
-| hideCountryFlag          | -       | bool                     | hide country flag from component                               | Optional          |
-| disable                  | -       | bool                     | Disable picker                                                 | Optional          |
-| language                 | en      | string                   | Change the language of list                                    | required          |
+| Prop                          | Default | Type                     | Description                                                    | Required/Optional |
+| ----------------------------- | ------- | ------------------------ | -------------------------------------------------------------- | ----------------- |
+| countryId                     | -       | string                   | Default and selected country Id                                | Required          |
+| countryCode                   | -       | string                   | Default and selected country code                              | Required          |
+| searchBarPlaceHolder          | -       | string                   | Change search bar placeholder                                  | Optional          |
+| searchBarStyle                | -       | object                   | Customize search bar text input style                          | Optional          |
+| pickerContainerStyle          | -       | object                   | Customize picker style                                         | Required          |
+| searchBarContainerStyle.      | -       | object                   | Customize search bar style                                     | Optional          |
+| searchInputStyle              | -       | object                   | Customize search bar Text Input style                          | Optional          |
+| searchBarPlaceholderTextColor | -       | object                   | Customize search bar placeholder color                         | Optional          |
+| countryNameTextStyle          | -       | object                   | Customize country name text style(List View)                   | Optional          |
+| selectedCountryTextStyle      | -       | object                   | Customize selected label text style                            | Optional          |
+| dropDownIconStyle             | -       | object                   | Change dropdown arrow style                                    | Optional          |
+| countryFlagStyle              | -       | object                   | Customize flag style                                           | Optional          |
+| searchIcon                    | -       | png/jpg                  | Add custom search Icon                                         | Optional          |
+| dropDownIcon                  | -       | png/jpg                  | Add custom drop down icon                                      | Optional          |
+| selectedValue                 | -       | function                 | callback function received value from list selection           | Required          |
+| animationType                 | -       | string [slide,none,fade] | Change Modal Animation                                         | Optional          |
+| hideCountryCode               | -       | bool                     | hide country code from component only show flag                | Optional          |
+| hideCountryFlag               | -       | bool                     | hide country flag from component                               | Optional          |
+| disable                       | -       | bool                     | Disable picker                                                 | Optional          |
+| language                      | en      | string                   | Change the language of list                                    | required          |
 
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "rn-country-picker",
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"private": false,
 	"scripts": {
 		"start": "node node_modules/react-native/local-cli/cli.js start",

diff --git a/src/CountryPicker/CountryPicker.tsx b/src/CountryPicker/CountryPicker.tsx
@@ -136,6 +136,8 @@ export interface CountryPickerProps {
   pickerContainerStyle?: ViewStyle;
   countryNameTextStyle?: TextStyle;
   selectedCountryTextStyle?: TextStyle;
+  searchInputStyle?: ViewStyle;
+  searchBarPlaceholderTextColor?: string;
   dropDownIcon?: ImageSourcePropType;
   searchIcon?: ImageSourcePropType;
   dropDownIconStyle?: ImageStyle;

diff --git a/src/CountryPicker/SearchBar.tsx b/src/CountryPicker/SearchBar.tsx
@@ -12,21 +12,22 @@ const SearchBar = (props) => {
   const search = props.searchIcon
     ? props.searchIcon
     : require("../../res/ic_search.png");
-  const [text, setText] = useState("");
-
+  const [_text, setText] = useState("");
   return (
     <View style={[styles.searchBarStyle, props.searchBarContainerStyle]}>
       <Image resizeMode="contain" style={styles.imageStyle} source={search} />
 
       {!props.hideSearchBar && (
         <TextInput
-          style={styles.textInputStyle}
+          style={[styles.textInputStyle, props.searchInputStyle]}
           onChangeText={props.searchByCountryNameCode}
           onChange={(event) => {
             const { text } = event.nativeEvent;
             setText(text);
           }}
-          placeholderTextColor={"#A9A9A9"}
+          placeholderTextColor={
+            props.searchBarPlaceholderTextColor ?? "#A9A9A9"
+          }
           placeholder={props.searchBarPlaceHolder ?? "Search"}
           keyboardType="default"
           returnKeyType={"done"}