Jetpack Compose Country Code Picker
Tags: android, jetpackcompose, kotlin, mobile
Published: 2022-04-03 16:09:08

I really enjoyed developing applications with Jetpack Compose. I was looking for the Country Code Selector package. When I couldn't find it, I decided to prepare it myself. You may need it in your future project.. That's why I wanted to share it with you.

Link : [Github](https://github.com/togisoft/jetpack_compose_country_code_picker)

**Highlights**

- Country numbers hints
- Phone number visualTransformation (Automatic number formatting)
- Automatic country recognition (detection by sim card if sim card is inserted)
- With TextField
- Can Customize
- Adding language translations
- Number verification added

**Example : **

```Kotlin
@Composable
   fun SelectCountryWithCountryCode() {
        val getDefaultLangCode = getDefaultLangCode() // Auto detect language
        val getDefaultPhoneCode = getDefaultPhoneCode() // Auto detect phone code : +90
        var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
        val phoneNumber = rememberSaveable { mutableStateOf("") }
        var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
        var verifyText by remember { mutableStateOf("") }
        var isValidPhone by remember { mutableStateOf(true) }
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(
                text = verifyText,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
            )
            TogiCountryCodePicker(
                pickedCountry = {
                    phoneCode = it.countryPhoneCode
                    defaultLang = it.countryCode
                },
                defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
                focusedBorderColor = MaterialTheme.colors.primary,
                unfocusedBorderColor = MaterialTheme.colors.primary,
                dialogAppBarTextColor = Color.Black,
                dialogAppBarColor = Color.White,
                error = isValidPhone,
                text = phoneNumber.value,
                onValueChange = { phoneNumber.value = it }
            )

            val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
            val checkPhoneNumber = checkPhoneNumber(
                phone = phoneNumber.value,
                fullPhoneNumber = fullPhoneNumber,
                countryCode = defaultLang
            )
            Button(
                onClick = {
                    verifyText = if (checkPhoneNumber) {
                        isValidPhone = true
                        "Phone Number Correct"
                    } else {
                        isValidPhone = false
                        "Phone Number is Wrong"

                    }
                },
                modifier = Modifier.fillMaxWidth()
                    .padding(16.dp)
                    .height(60.dp)
            ) {
                Text(text = "Phone Verify")
            }
        }
      }
    }
```


![Jetpack Compose Country Code Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vb56d9splf5he1cnnyd.gif)

![Jetpack Compose Country Code Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swv8kn4tqi78phaghg6j.jpg)

![Jetpack Compose Country Code Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5t2k7qlsllpabpgt4jl.jpg)