textAllCaps in jetpack compose

Question

How do I achieve the same effect as textAllCaps in Jetpack Compose, I know that I can use toUpperCase method on the string itself to turn the string into uppercase. But I wonder is there a property that I can add to Text composable to visually turn the text into uppercase?

Text(
    text = stringResource(id = R.string.app_name).toUpperCase(Locale.current)
)

Answer 1

There's not such property, but you can create it by yourself:

@Composable
fun CapsText(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    Text(
        text = text.uppercase(),
        modifier = modifier,
        color = color,
        fontSize = fontSize,
        fontStyle = fontStyle,
        fontWeight = fontWeight,
        fontFamily = fontFamily,
        letterSpacing = letterSpacing,
        textDecoration = textDecoration,
        textAlign = textAlign,
        lineHeight = lineHeight,
        overflow = overflow,
        softWrap = softWrap,
        maxLines = maxLines,
        onTextLayout = onTextLayout,
        style = style,
    )
}

Answer 2

Text(
    text = stringResource(id = R.string.app_name).uppercase()
)

You can just add .uppercase() on the stringResource. currently I'm using compose 1.2.0-beta03 version.