CODEWITHSUNDEEP
androidandroid-studioandroid-jetpack-compose
user25472147
user25472147

Reputation: 31

ERROR: Composable Functions Must Be Called Within a Composable Context

"@Composable invocations can only happen from the context of a @Composable function"

I'm new to jetpack compose and constantly getting this error "@Composable invocations can only happen from the context of a @Composable function" on adding icon and label in the Text Field.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EditNumberField(
    value: String,
    @StringRes label: Int,
    @DrawableRes icon: Int,
    keyboardOptions: KeyboardOptions,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
){
    TextField(
        value = value,
        label = { Text(stringResource(label)) },
        icon = {  Icon(painter = painterResource(id = icon), contentDescription = null) },
        keyboardOptions = keyboardOptions,
        onValueChange = onValueChange,
        singleLine = true,
        modifier = modifier,
        colors = TextFieldDefaults.textFieldColors(
            containerColor = Color(0xFFBDFCC9))
    )
}

"TextField(), label = {Text()}, icon = {Icon()}" these lines are underlined by red showing the error mentioned above.

Upvotes: 3

Views: 68

Answers (2)

Prem Danej
Prem Danej

Reputation: 254

As an answer has already been given by another one, So I modify your code to this.

Use this composable function.

@Composable
fun EditNumericField(
    value: String,
    label: Int,
    icon: Painter,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(text = stringResource(id = label)) },
        leadingIcon = { Icon(painter = icon, contentDescription = "Icons") },
        singleLine = true,
        modifier = modifier,
        colors = TextFieldDefaults.colors(
            focusedContainerColor = Color(0xFFBDFCC9),
            unfocusedContainerColor = Color(0xFFBDFCC9)
        ),
        keyboardOptions = keyboardOptions
    )
}

And here is the function calling.

EditNumericField(
    value = "Any value",
    label = R.string.app_name,
    icon = painterResource(id = R.drawable.ic_launcher_foreground),
    keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
    onValueChange = { },
    modifier = Modifier
)

I hope this helps you.

Upvotes: 0

Atul Sharma
Atul Sharma

Reputation: 1102

There is no parameter named icon for TextField composable. Instead you can use leadingIcon or trailingIcon according to your needs and then you can resolve the shown error.

Here is the TextField composable from documentation for material 3:

fun TextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    label: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    //... other paramteres
) {  } //... content of the composable

Upvotes: 2

Related Questions