# KMM: A Use case for common UI behavior

DevFeed: [KMM: A Use case for common UI behavior](<https://devfeed.tech/articles/kmm-a-use-case-for-common-ui-behavior-24716.md>)

Original publisher: [Read original article](<https://dev.to/touchlab/kmm-a-use-case-for-common-ui-behavior-2mi3>)

Author: Jigar Brahmbhatt

Published: 2023-01-30T20:03:37Z

Content type: tutorial

Language: en

Sources: [Touchlab](<https://devfeed.tech/sources/touchlab.md>)

Topics: [Kotlin Multiplatform](<https://devfeed.tech/topics/kotlin-multiplatform.md>), [Code](<https://devfeed.tech/topics/code.md>), [Refactoring](<https://devfeed.tech/topics/refactoring.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [coding](<https://devfeed.tech/tags/coding.md>), [community](<https://devfeed.tech/tags/community.md>), [developer](<https://devfeed.tech/tags/developer.md>), [development](<https://devfeed.tech/tags/development.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [inclusive](<https://devfeed.tech/tags/inclusive.md>), [kmm](<https://devfeed.tech/tags/kmm.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [kotlinmultiplatform](<https://devfeed.tech/tags/kotlinmultiplatform.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [multiplatform](<https://devfeed.tech/tags/multiplatform.md>), [platforms](<https://devfeed.tech/tags/platforms.md>), [regex](<https://devfeed.tech/tags/regex.md>), [sdk](<https://devfeed.tech/tags/sdk.md>), [software](<https://devfeed.tech/tags/software.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

The article describes implementing auto-formatting for a phone number field across Android, iOS, and ReactJS in a Kotlin Multiplatform SDK. After platform-specific implementations exposed repeated cursor-position edge cases, the authors refactored the string and cursor-position logic into common code.

## Source excerpt

This post demonstrates how we used common KMP code for a common UI feature across three platforms. Requirement Recently, we got a new feature requirement for the SDK we're developing using Kotlin Multiplatform (KMP). The SDK has a typical UI form with a variety of fields in it that the user fills out. One of the fields is a phone number field. The requirement was to auto-format the number as the user types it out. The end behavior would be like this, How we did it initially We usually divide KMP work based on UI stories for each platform and a task for any required work in the commonMain layer. For deeper dive into how we divide KMP work, checkout Kevin's post about it Following the same approach, first, we added a couple of utility methods in common code to format and unformat the phone number. commonMain fun formatPhoneNumber(number: String): String { // return formatted number using regex } fun unformatPhoneNumber(number: CharSequence): String { // return unformatted number using regex } Then we worked on individual platform UI implementation. Android We implemented a custom TextWatcher and handled the logic in beforeTextChanged and afterTextChanged methods. iOS On iOS, we used @objc func textFieldDidChange(_ sender: UITextField) to handle formatting while entering the number entering, and func textField() with the shouldChangeCharactersIn option to format the number when deleting. Web On ReactJS, we used onChange of the TextField to implement custom logic for formatting. What worked and what went wrong What worked was that each platform performed the same for the general use case of entering and deleting the number due to having common knowledge and JIRA tickets for them. What differed between each platform was how the individual developer approached edge cases around entering and deleting the input from a specific cursor position. For example, consider the input like this (123) 456-7890. Now user wants to remove the number 6 and manually sets the cursor positio