rn-phone-number-picker
Version:
rn-phone-number-picker A customizable PhoneNumberInput screen component for React Native projects. Use this open source library in your fresh React Native project for instant startup.
84 lines (64 loc) • 4.14 kB
Markdown
rn-phone-number-picker
A customizable PhoneNumberInput screen component for React Native projects. Use this open source library in your fresh React Native project for instant startup.
Table of Contents
# Installation
To use rn-phone-number-picker in your React Native project, simply install it using npm or yarn:
```bash
yarn add rn-phone-number-picker
or
npm install rn-phone-number-picker
```
# Usage
To use the PhoneNumberInput screen component in your app, import it from the rn-phone-number-picker package and render it as the second component in your app after splash screen. You can customize the appearance and behavior of the PhoneNumberInput screen by passing in props.
### How to use
```js
import PhoneNumberInput from "rn-phone-number-picker";
function App() {
return (
<PhoneNumberInput
keyboardType="phone-pad"
placeholderTextColor={"black"}
initialCode={"IN"}
/>
);
}
```
# Props
The PhoneNumberInput component accepts the following props:
| Prop Name | Data Type | Description |
| ------------------- | ------------------- | ------------------------ |
| inputStyle | any | Style in Input |
| --------- | --------- | ----------- |
| placeholderText | any | Your Placeholder Text |
| --------- | --------- | ----------- |
| keyboardType | any | Your KeyboardType |
| --------------- | ------------------- | ------------ |
| initialCode | any | initialCode |
| --------- | --------- | ----------- |
| containerStyle | any | Style to Container |
| --------- | --------- | ----------- |
| modalContainerStyle | any | Style to modal container |
| --------- | --------- | ----------- |
| initialValue | any | initialValue |
## Contributors
We would like to thank the following developers for their contributions to this project:
<div>
<a href="https://github.com/iamnsharma">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9wmagRzA--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/929408/49028202-5f9d-448a-9295-9f7fc0af5f24.png" width="100px;" height="90px" alt="Aman Sharma"/>
</a>
<a href="https://github.com/Ramkrishanittechxpert">
<img src="https://media.licdn.com/dms/image/D4D03AQEp3g5SZ_w7uw/profile-displayphoto-shrink_800_800/0/1680772838235?e=2147483647&v=beta&t=cdRWt7D61DyVewl5gCna5e2566sksJ03hiyUUCPud-A" width="100px;" height="90px" alt="RamKrishan"/>
</a>
<a href="https://github.com/pankuweb">
<img src="https://media.licdn.com/dms/image/C5103AQFj_3tO24o9Ug/profile-displayphoto-shrink_800_800/0/1567053785666?e=2147483647&v=beta&t=kTZHrlguCIPOlom4bAwKNy2zqRuN9WKLDDygVVeMopU" width="100px;" height="90px" alt="Pankaj"/>
</a>
<a href="https://gitlab.com/ashishittechxpert">
<img src="https://instagram.fluh1-2.fna.fbcdn.net/v/t51.2885-15/324073975_131616862876295_2443755257046168800_n.webp?stp=dst-jpg_e35_p750x750_sh0.08&_nc_ht=instagram.fluh1-2.fna.fbcdn.net&_nc_cat=111&_nc_ohc=e4n-2yQ5dlMAX_xmTDW&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfC1FxYvEEc6hHaboxliqOksQjq5PxiWNWiYq-r7LeL7cw&oe=644F8F2C&_nc_sid=8f375e" width="100px;" height="90px" alt="Ashish"/>
</a>
<a href="https://gitlab.com/harishittech">
<img src="https://instagram.fluh1-1.fna.fbcdn.net/v/t51.2885-15/316093585_685274419824074_8394536847085273651_n.webp?stp=dst-jpg_e35_s750x750_sh0.08&_nc_ht=instagram.fluh1-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=o4sDA0Mmd1EAX9_8XSl&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfDyzopX-eVr-cUppZSksBwBuMzaAKyqyqaT7LP4QdI5pQ&oe=644E0EE2&_nc_sid=4f375e" width="100px;" height="90px" alt="Harish"/>
</a>
</div>
To all our contributors, thank you for your hard work and dedication!
# License
This package is released under the MIT License.