React Native is a JavaScript framework for cross-platform mobile app development. In this article, we’ll see how to add a phone number input field in a React Native app using Expo CLI.
Adding a phone number input field in React Native is helpful for collecting user phone numbers during registration or login. It typically consists of a text input component and can include a country picker for selecting the country code.
Pre-requisites:
- Introduction to React Native
- Introduction React Native Components
- React Native State
- React Native Props
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to install & configure React Native
Step 1: Set Up the Development Environment
To start, install Expo CLI globally on your system by running this terminal command:
npm install -g expo-cli
Step 2: Create React Native Application With Expo CLI
Create a new React Native project with Expo CLI using this terminal command:
expo init input-phone
Step 3: Navigate to the project directory by using this command:
cd input-phone
Project Structure
Step 4: Install Required Dependencies
Install the necessary dependencies for the phone number input functionality in the project directory using this command:
npm install react-native-country-picker-modal react-native-phone-input
Install react-native-country-picker-modal or the country picker and react-native-phone-input for the phone number input field.
Approach
To add a phone number input in React Native, set up a new project using Expo CLI, install required dependencies, implement the PhoneInput component for input handling and the CountryPicker component for country selection, customize styling, and test the functionality using Expo CLI.
Example: In this example, One input and two buttons the first button is used to select the country code for submission and the second button is used to submit the input.
- App.js
Javascript
import React, { useState } from 'react'; import { View, TextInput, Button, Alert, StyleSheet } from 'react-native'; import PhoneInput from 'react-native-phone-input'; import CountryPicker from 'react-native-country-picker-modal'; const YourComponent = () => { const [phoneNumber, setPhoneNumber] = useState(''); const [countryCode, setCountryCode] = useState(''); const [selectedCountry, setSelectedCountry] = useState(null); const [countryPickerVisible, setCountryPickerVisible] = useState(false); const onSelectCountry = (country) => { setCountryCode(country.cca2); setSelectedCountry(country); setCountryPickerVisible(false); }; const onSubmit = () => { // Perform your desired action with // the phone number and country code Alert.alert('Form Submitted', `Phone Number: ${phoneNumber} \nCountry Code: ${countryCode}`); }; const toggleCountryPicker = () => { setCountryPickerVisible(!countryPickerVisible); }; return ( <View style={styles.container}> <PhoneInput value={phoneNumber} onChangePhoneNumber={(number) => setPhoneNumber(number)} onPressFlag={toggleCountryPicker} style={styles.phoneInput} /> <Button title= {selectedCountry ? selectedCountry.name : 'Select Country'} onPress={toggleCountryPicker} style={styles.countryButton} /> {countryPickerVisible && ( <CountryPicker withFilter={true} withFlagButton={false} withCountryNameButton={false} onSelect={onSelectCountry} onClose={() => setCountryPickerVisible(false)} visible={countryPickerVisible} containerButtonStyle={styles.countryPickerButton} closeButtonImageStyle={styles.countryPickerCloseButton} /> )} <Button title="Submit" onPress={onSubmit} style={styles.submitButton} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20, }, phoneInput: { height: 50, width: '100%', borderWidth: 1, borderColor: '#ccc', marginBottom: 20, paddingHorizontal: 10, }, countryButton: { marginBottom: 20, }, countryPickerButton: { borderRadius: 5, backgroundColor: '#fff', marginBottom: 20, }, countryPickerCloseButton: { width: 20, height: 20, }, submitButton: { width: '100%', }, }); export default YourComponent; |
Step 6: To run the react native application, open the Terminal and enter the command listed below.
npx expo start
- To run on Android:
npx react-native run-android
- To run on Ios:
npx react-native run-ios
Output:
