Complete guide to using country code picker in your React Native projects
When it comes to getting the contact information of the user, one of the first entries that comes to mind is the phone number. Every country has a prefix for their phone number and asking the user to type it manually can cause some typos. To prevent it, we must use a drop down list that populated by these codes.
In this article, I will guide you to use npm package developed by DIGIEGGS, I also work at. You can also see the npm package and browse the code on Github.
1. Let’s create a clean React Native app with typescript template
You can skip to the step-2 if you already created a React Native app with typescript template.
Note: Unfortunately this component is not supported for Expo for now.
- Open a terminal window
- Navigate to folder you want to create your project at
- Copy & paste the command below:
npx react-native init CountryCodePickerTest --template react-native-template-typescript2. Installing the package
After creating your app, you can close the current terminal window. After that, you can follow two different ways to run our terminal commands which will affect our project. You can either
- Open new terminal window and navigate to project’s root directory
or
- Use the existing terminal provided by your IDE such as VSCode. (Doesn’t require navigating to root directory.)
After you choose the terminal you want to work on, let’s run the command below
npm install @digieggs/rn-country-code-pickerBefore running your application, you must install two additional packages and pods for iOS.
- Installing necessary packages:
npm install react-native-svg react-native-localize- Installing pods:
cd ios && pod install && cd ..3. Let’s see our component in action
Now we are ready to run our application. Let’s run the following commands
npx react-native run-ios
npx react-native run-android- If you created a clean application to apply this article, you must be seeing a screen like this image:
To see our component clearly, let’s clear code in App.tsx file and start coding.
- First, add necessary imports
import React from "react";
import { SafeAreaView } from "react-native";
import { CallingCodePicker } from "@digieggs/rn-country-code-picker";- Then, create a functional component and export it
import React from "react";
import { SafeAreaView } from "react-native";
import { CallingCodePicker } from "@digieggs/rn-country-code-picker";const App = () => <SafeAreaView></SafeAreaView>;export default App;
- Finally, add the country picker component
import React from 'react';
import { SafeAreaView } from 'react-native';
import { CallingCodePicker } from '@digieggs/rn-country-code-picker';const App = () => (
<SafeAreaView>
<CallingCodePicker onValueChange={() => {}} />
</SafeAreaView>
);export default App;
You can use the component as is but admit it… You want some styling 😉
Let’s do some styling
README.md file in Github repo has description about all props but let’s focus style props in this section. Our component is highly stylizable so we have eight seperate style properties.
Our component consists of two layers. Containers of these two layers have seperated style props because inner layer only wraps country flag and label but outer layer wraps them with modal. You can see them in image below:
Now let’s align it center screen. Our initial style object will be like this:
container: {
flex: 1,
justifyContent: 'center'
},
countryCodePicker: {
alignSelf: 'center'
}We can change the togglerContainerStyle like this:
togglerContainerStyle: {
backgroundColor: '#BAFFC0',
borderRadius: 10,
padding: 5
}Component also has a style prop for country code label called togglerLabelStyle. It is basically a text prop so we just change the font size for now.
togglerLabelStyle: {
fontSize: 20
}So far, we worked on styles for toggler element. Now we will work on styles for list element.
We can change the container of list with listContainerStyle but I will leave it as is.
Another style is searchInputStyle. Let’s style our search input:
searchInputStyle: {
borderColor: '#888888',
borderWidth: 1,
height: 36,
borderRadius: 10,
paddingHorizontal: 10
}And listStyle is simply FlatList style. That can be remain as is too.
Finally customize the list item with two different style props: pickerItemContainerStyle and pickerItemLabelStyle.
pickerItemLabelStyle: {
marginLeft: 10,
marginVertical: 10,
alignSelf: 'center'
},
pickerItemContainerStyle: {
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-start',
alignSelf: 'center'
}Let’s see the final component.
Our final App.tsx file is:
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { CallingCodePicker } from '@digieggs/rn-country-code-picker';const App = () => (
<SafeAreaView style={styles.container}>
<CallingCodePicker
onValueChange={() => {}}
style={styles.countryCodePicker}
togglerContainerStyle={styles.togglerContainerStyle}
togglerLabelStyle={styles.togglerLabelStyle}
searchInputStyle={styles.searchInputStyle}
pickerItemLabelStyle={styles.pickerItemLabelStyle}
pickerItemContainerStyle={styles.pickerItemContainerStyle}
/>
</SafeAreaView>
);export default App;const styles = StyleSheet.create({
container: {flex: 1, justifyContent: 'center'},
countryCodePicker: {
alignSelf: 'center',
},
togglerContainerStyle: {
backgroundColor: '#baffc0',
borderRadius: 10,
padding: 5,
},
togglerLabelStyle: {
fontSize: 20,
},
searchInputStyle: {
borderColor: '#888888',
borderWidth: 1,
height: 36,
borderRadius: 10,
paddingHorizontal: 10,
},
pickerItemLabelStyle: {
marginLeft: 10,
marginVertical: 10,
alignSelf: 'center',
},
pickerItemContainerStyle: {
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-start',
alignSelf: 'center',
},
});
Bonus!
I know you love bonuses and I just wanted to give you one.
You can provide an initial country code (with initialCountryCode prop) to show a default country when the component rendered first time. 😉
I hope you like our component. Feel free to comment and please open a Github issue if you have any problems.
Visit https://www.digieggs.com for more information and collaborations.
