react-native-phone-codes-select

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, visible prop 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.
autoFocus	Boolean	If true, focuses the input component on componentDidMount.
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}