Gathering detailed insights and metrics for react-native-phone-code-select-heresmyinfo
Gathering detailed insights and metrics for react-native-phone-code-select-heresmyinfo
Installations
npm install react-native-phone-code-select-heresmyinfoDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.18.3
NPM Version
6.14.10
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.0.1
Package Id
react-native-phone-code-select-heresmyinfo@0.0.1
Unpacked Size
6.35 MB
Size
6.03 MB
File Count
9
NPM Version
6.14.10
Node Version
12.18.3
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
react-native-phone-codes-select
HeresMyInfo fork to allow adding / updating countries and regions.
Country phone codes selection component with search functionality for React Native. (iOS and Android)
Installation
1npm i react-native-phone-code-select
Usage
- Import and place the component.
- Since the component is a modal,
visibleprop should be controlled. Hooking up the visible prop to a state is demonstrated below. - The country selected from the modal is returned in the onCountryPress prop.
- Country name, code or phone code can be entered to the search.
1import RNPhoneCodeSelect from "react-native-phone-code-select"; 2 3<RNPhoneCodeSelect 4 visible={visible} 5 onDismiss={() => setVisible(false)} 6 onCountryPress={(country) => setSelectedCountry(country)} 7 primaryColor="#f04a4a" 8 secondaryColor="#000000" 9 buttonText="Ok" 10/>;
Configuration Props
| Prop | Type | Description |
|---|---|---|
| visible | Boolean | The visibility of the modal. If true the modal will be shown and vice versa. |
| onDismiss | Function | Function that will be fired when the 'Done' button is pressed. |
| onCountryPress | Function | Function that fires when a country from the list is selected. A 'country' parameter is included as a Country Object. (See below for details.) |
| primaryColor | Color | The primary color used in the component. |
| secondaryColor | Color | The secondary color used in the component. |
| buttonStyle | Style Object | Not required. Extra styling for button background. |
| buttonTextStyle | Style Object | Not required. Extra styling for button text. |
| buttonText | String | Not required. Custom text for 'Done' button. |
Country Object
1{ 2 name: "Turkey", 3 flag: "🇹🇷", 4 code: "TR", 5 dial_code: "+90" 6}
Example Usage
1import RNPhoneCodeSelect from "react-native-phone-code-select"; 2 3export default function App() { 4 const [visible, setVisible] = useState(false); 5 const [selectedCountry, setSelectedCountry] = useState(null); 6 return ( 7 <View style={styles.container}> 8 <Button onPress={() => setVisible(true)} title="Show Modal" /> 9 <RNPhoneCodeSelect 10 visible={visible} 11 onDismiss={() => setVisible(false)} 12 onCountryPress={(country) => setSelectedCountry(country)} 13 primaryColor="#f04a4a" 14 secondaryColor="#000000" 15 buttonText="Ok" 16 /> 17 </View> 18 ); 19}
No vulnerabilities found.
No security vulnerabilities found.