Jetpack Compose Country Code Picker

#android #jetpackcompose #kotlin #mobile

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

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 : *



@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")
            }
        }
      }
    }