diff --git a/App.js b/App.js index fec7dc0..33a8ce7 100644 --- 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("91"); + const [countryCode, setCountryCode] = useState < string > "91"; - const selectedValue = (value: string) => { - setCountryCode(value); - }; + const selectedValue = (value: string) => { + setCountryCode(value); + }; - return ( - - React Native Country Picker + return ( + + React Native Country Picker - - - ); + + + ); }; 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 index 75ef1ca..0cf1032 100644 --- 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 index 4234182..ffd498d 100644 --- 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 index 1e61bf0..6cda118 100644 --- 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 index f0f90b3..f41db6e 100644 --- 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 ( {!props.hideSearchBar && ( { const { text } = event.nativeEvent; setText(text); }} - placeholderTextColor={"#A9A9A9"} + placeholderTextColor={ + props.searchBarPlaceholderTextColor ?? "#A9A9A9" + } placeholder={props.searchBarPlaceHolder ?? "Search"} keyboardType="default" returnKeyType={"done"}