Hi guys What are some good practices for keeping code readable and simple when styling Views. i come...

# compose

[Alexa_Gal]

Hi guys
What are some good practices for keeping code readable and simple when styling Views. i come from RN and getting each day in love with Android Compose.

what im exactly looking for is a way to keep the modifiers in one place. in react native i would do something like

const styles = StyleSheet.create({
contaienr: {
....
...
...
},
box: {
...
...
}
})

is there any good practice to do this with android compose?

[gildor]

extract those modifiers with styles to own methods/extension functions?

[Alexa_Gal]

Could you help me with a simple example to follow what you mean Andrey?

[gildor]

It would be easier if you would provide some simple example first, what is not readable and not simple

Just my general suggestion is to extract related styling modifiers to own extension function and apply 1 modifier with many styles instead of many

[gildor]

essentially you can do exactly the same as in this react example, you can create an object with styles, the only difference it will include modifiers

[Alexa_Gal]

would this work as style object equivalent in Kotlin?

[Alexa_Gal]

or more like…

sealed class Styles(val modifier: Modifier) {
    object Container : Styles(
        Modifier
            .fillMaxWidth()
            .padding(10.dp, 0.dp)
    )

    object TxtEmail : Styles(
        Modifier
            .fillMaxWidth()
            .padding(20.dp, 0.dp)
    )
}

...
Column(
    Styles.Container.modifier
) 
...

?

[gildor]

I would say none is Kotlin way for this case

[gildor]

I mean something like this:

fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)

[gildor]

If you want, you can also move it it to some object:

object Styles {
  fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)
}

But honestly don’t think it’s necessary

[gildor]

But it general approach, for things like TxtEmail (so it’s some use-case specific component) I think it recommended just to use custom composable with predefined modifiers and simplified API

[Alexa_Gal]

Agree! I'll give it a shot with the extension. Looks clean. Like it 💪
Thanks man