Jetpack Compose Clean and Encapsulated Composables

<p>Over the past year, Jetpack Compose has revolutionized the Android landscape. Its intuitive syntax has significantly simplified the work of engineers. The creation of complex UI components, which was once a daunting task, is now a breeze. With just the use of a&nbsp;<code>Modifier</code>, you can create in minutes what would have taken hours or even been impossible to create in&nbsp;<code>XML</code>. This efficiency is making Jetpack Compose increasingly popular each day.</p> <h1>The Naming Convention Dilemma</h1> <p>Any seasoned Jetpack Compose user is aware of an unspoken rule regarding the naming of composables in an Android App. The norm is to name functions that return&nbsp;<code>Unit</code>&nbsp;and that is annotated with the&nbsp;<code>@Composable</code>&nbsp;tag using&nbsp;<code>PascalCase</code>, resulting in names like&nbsp;<code>PrimaryButton</code>,&nbsp;<code>SecondaryButton</code>,&nbsp;<code>ExampleStateSuccess</code>,&nbsp;<code>ExampleStateLoading</code>,&nbsp;<code>ExampleStateError</code>, and so forth. However, after reading&nbsp;an article&nbsp;by&nbsp;Christopher Keenan, I began to question this naming convention and noticed a few issues that had been bothering me but I had chosen to ignore them.</p> <p>For instance, what happens when you have similar items with easily confusable names, leading to hours of trying to decipher which is which? Or what about excessively long names that compromise readability? I&rsquo;ve encountered such instances in the past with names like&nbsp;<code>ParkingLocationMapDetailsSuccess</code>,&nbsp;<code>ParkingLocationMapDetailsError</code>,&nbsp;<code>ParkingLocationMapDetailsLoading</code>,&nbsp;<code>PrimaryLargeButton</code>,&nbsp;<code>SecondarySmallButton</code>, and the list goes on.</p> <h1>Proposed Solution</h1> <p>We could adopt a slightly unconventional approach that may not seem intuitive initially. We could encapsulate similar or related composables into&nbsp;<code>Object</code>&nbsp;and use the&nbsp;<code>invoke operator</code>&nbsp;for the main composable.&nbsp;</p> <p><a href="https://blog.devgenius.io/jetpack-compose-clean-and-encapsulated-composables-2dc042b423ec">Visit Now</a></p> <p>&nbsp;</p>