https://kotlinlang.org logo
#compose
Title
# compose
a

Alexa_Gal

01/21/2021, 12:24 AM
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
Copy code
const styles = StyleSheet.create({
contaienr: {
....
...
...
},
box: {
...
...
}
})
is there any good practice to do this with android compose?
👍 1
g

gildor

01/21/2021, 2:38 AM
extract those modifiers with styles to own methods/extension functions?
a

Alexa_Gal

01/21/2021, 2:39 AM
Could you help me with a simple example to follow what you mean Andrey?
g

gildor

01/21/2021, 2:41 AM
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
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
a

Alexa_Gal

01/21/2021, 3:14 AM
would this work as
style object
equivalent in Kotlin?
or more like…
Copy code
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)
    )
}
Copy code
...
Column(
    Styles.Container.modifier
) 
...
?
g

gildor

01/21/2021, 3:22 AM
I would say none is Kotlin way for this case
I mean something like this:
Copy code
fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)
If you want, you can also move it it to some object:
Copy code
object Styles {
  fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)
}
But honestly don’t think it’s necessary
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
a

Alexa_Gal

01/21/2021, 4:00 AM
Agree! I'll give it a shot with the extension. Looks clean. Like it 💪 Thanks man