# derivedMediaQuery

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<T>` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalMediaQueryApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/derivedMediaQuery.composable#derivedMediaQuery(kotlin.Function1)(query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T)` Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope`, wrapped in a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#derivedStateOf(kotlin.Function0)`. | Cmn |

## Functions

### derivedMediaQuery

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/MediaQuery.kt+function:derivedMediaQuery)

```
@ExperimentalMediaQueryApi
@Composable
fun <T : Any?> derivedMediaQuery(query: UiMediaScope.() -> T): State<T>
```

Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope`, wrapped in a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#derivedStateOf(kotlin.Function0)`.

Use this function for queries that involve frequently changing values, such as `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope#windowWidth()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope#windowHeight()`. It ensures that compositions only recompose when the result of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#derivedMediaQuery(kotlin.Function1)` changes, not on every small change to the underlying values (like a 1px size change).

For queries on stable properties, you can use the simpler `https://developer.android.com/reference/kotlin/androidx/compose/ui/mediaQuery.composable#mediaQuery(kotlin.Function1)` function.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.UiMediaScope.ViewingDistance
import androidx.compose.ui.derivedMediaQuery
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.fillMaxSize().padding(top = 100.dp)) {
    val showDualPane by derivedMediaQuery { windowWidth >= 600.dp }
    val showNavigationRail by derivedMediaQuery {
        windowWidth >= 500.dp && viewingDistance != ViewingDistance.Near
    }

    Column(Modifier.fillMaxSize()) {
        Row(Modifier.weight(1f).fillMaxWidth()) {
            if (showNavigationRail) {
                // Show navigation rail
                Box(Modifier.width(150.dp).background(Color.Red).fillMaxHeight())
            }

            // Actual content
            Box(Modifier.weight(1f).background(Color.Yellow).fillMaxHeight())

            if (showDualPane) {
                // Split screen into 2 panes for additional content
                Box(Modifier.weight(1f).background(Color.Cyan).fillMaxHeight())
            }
        }

        if (!showNavigationRail && !showDualPane) {
            // Show bottom navigation
            Box(Modifier.background(Color.Blue).height(80.dp).fillMaxWidth())
        }
    }
}
```

| Parameters |
|---|---|
| `query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T` | The condition to evaluate against the `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope`. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<T>` | A `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` holding the result of the query. The state will only update when the evaluated result of the query changes. |