Merge pull request #5 from louismonteiro/feature/custom-list-item

Allow custom template for the item list + update the readme file
GeorgeHop · Jan 11, 2022 · 205dfd9 · 205dfd9
2 parents 0255c94 + 29129fe
commit 205dfd9
Show file tree

Hide file tree

Showing 2 changed files with 236 additions and 218 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Didn't find your country ? Just add the required countries or locales and make a
 
 ## Coming soon :muscle: :pray:
 
-1. Custom list item rendering. 
+1. Custom list item rendering.
 2. Custom search input rendering.
 3. Picker types (modal, input). If you need input with search.
 4. Docs update/improve for the best user experience.
@@ -25,6 +25,7 @@ yarn: `yarn add react-native-country-codes-picker`
 ![ezgif com-gif-maker (5)](https://user-images.githubusercontent.com/47904385/112475469-223a5080-8d71-11eb-92c0-43583056e30c.gif)
 
 # Basic usage
+
 ```JS
 import {CountryPicker} from "react-native-country-codes-picker/components/CountryPicker";
 
@@ -66,22 +67,25 @@ export default function App() {
 ```
 
 # Props
+
 Below are the props you can pass to the React Component.
 
-| Prop  | Type | Default | Example | Description |
-| ------------- | ------------- | ------------- | ------------- | ------------- |
-| show  | boolean | | |  This prop using for displaying the modal. Put your show state here. |
-| pickerButtonOnPress | function | | (country) => setCode(country.dial_code) | Put your function/functions here for getting country data from picker. | 
-| inputPlaceholder | string | | inputPlaceholder={'Your placeholder'} | If you need a custom placeholder for your input you may need this prop. | 
-| searchMessage | string | | searchMessage={'Some search message here'} | If you want to customize search message just use this prop. | 
-| lang | string | 'en' | lang={'pl'} | If you need to change the lang. just put one of supported lang. Or if you didn't find required lang just add them and make a PR :) |
-| enableModalAvoiding | boolean | false | enableModalAvoiding={true} | Is modal should avoid keyboard ? On android to work required to use with androidWindowSoftInputMode with value pan, by default android will avoid keyboard by itself | 
-| androidWindowSoftInputMode | string |  | androidWindowSoftInputMode={'pan'} | Basicaly android avoid keyboard by itself, if you want to use custom avoiding you may use this prop | 
-| style  | Object | | style={{yoursStylesHere}} |  If you want to change styles for component you probably need this props. You can check the styling part below. |
+| Prop                       | Type      | Default | Example                                    | Description                                                                                                                                                               |
+| -------------------------- | --------- | ------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| show                       | boolean   |         |                                            | This prop using for displaying the modal. Put your show state here.                                                                                                       |
+| pickerButtonOnPress        | function  |         | (country) => setCode(country.dial_code)    | Put your function/functions here for getting country data from picker.                                                                                                    |
+| inputPlaceholder           | string    |         | inputPlaceholder={'Your placeholder'}      | If you need a custom placeholder for your input you may need this prop.                                                                                                   |
+| searchMessage              | string    |         | searchMessage={'Some search message here'} | If you want to customize search message just use this prop.                                                                                                               |
+| lang                       | string    | 'en'    | lang={'pl'}                                | If you need to change the lang. just put one of supported lang. Or if you didn't find required lang just add them and make a PR :)                                        |
+| enableModalAvoiding        | boolean   | false   | enableModalAvoiding={true}                 | Is modal should avoid keyboard ? On android to work required to use with androidWindowSoftInputMode with value pan, by default android will avoid keyboard by itself      |
+| androidWindowSoftInputMode | string    |         | androidWindowSoftInputMode={'pan'}         | Basicaly android avoid keyboard by itself, if you want to use custom avoiding you may use this prop                                                                       |
+| itemTemplate               | ReactNode |         | style={<CustomListItem />}                 | This parameter gets a React Node element to render it as a template for each item of the list. These properties are sent to the item: key, item, style, name, and onPress |
+| style                      | Object    |         | style={{yoursStylesHere}}                  | If you want to change styles for component you probably need this props. You can check the styling part below.                                                            |
 
 :grey_exclamation: Also you can use all other FlatList and TextInput props if you need. :grey_exclamation:
 
 # Styling
+
 ```JS
 <CountryPicker
     show={show}
@@ -132,5 +136,6 @@ Below are the props you can pass to the React Component.
 3. ru.
 4. en.
 5. pl.
+6. pt.
 
 You can add your lang. if you need !!! But after that make a PR please, it will help other people.