new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Expo & React Native · all subjects

expo-ui-jetpack-compose

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Creating a local Expo module for Jetpack Compose

Create a local Expo module using the command: npx create-expo-module@latest --local my-ui. This sets up the scaffolding for a module that can contain custom Jetpack Compose components.

Enable Jetpack Compose in module android/build.gradle

To enable Jetpack Compose in a module's android/build.gradle: add the Kotlin Compose compiler plugin classpath in buildscript dependencies (org.jetbrains.kotlin.plugin.compose.gradle.plugin at ${kotlinVersion}), apply the 'org.jetbrains.kotlin.plugin.compose' plugin, and set buildFeatures.compose to true in the android block.

Module dependencies for Jetpack Compose and Expo UI

A module extending Expo UI requires these dependencies: if findProject(':expo-ui') exists, implement project(':expo-ui'); otherwise implement 'expo.modules.ui:expo.modules.ui:+'. Also add androidx.compose.foundation:foundation-android:1.10.6, androidx.compose.ui:ui-android:1.10.6, and androidx.compose.material3:material3:1.5.0-alpha17.

Props data class requirements for custom Compose views

A props data class for a custom Compose view must: be annotated with @OptimizedComposeProps, implement ComposeProps, and include a modifiers: ModifierList field (with default emptyList()) for the modifiers prop.

Composable content function structure for custom views

A @Composable content function must be an extension on FunctionalComposableScope and take the props data class as a parameter. Inside, call ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher) to apply modifiers, and call Children(UIComposableScope()) to render React children.

Register custom Compose view with ExpoUIView

Register a custom Compose view in the module definition using ExpoUIView<PropsType>("ViewName") { Content { props -> ComposableFunction(props) } }. This wires the @Composable content function into the Expo modules view system and makes it available to JavaScript.

createViewModifierEventListener utility for custom views

Use createViewModifierEventListener from @expo/ui/jetpack-compose/modifiers to enable event-based modifiers like clickable and onVisibilityChanged on custom views. Spread the result in the native view props when modifiers are present: {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}.

Custom modifier params class requirements

A custom modifier's parameters must be defined as an @OptimizedRecord data class implementing Record, with fields decorated using @Field and default values specified.

Color conversion in Jetpack Compose modifiers

Import expo.modules.ui.compose and use the compose extension property on android.graphics.Color? to convert Android Color parsed from JavaScript into androidx.compose.ui.graphics.Color that Compose APIs expect. This is the same helper Expo UI's built-in modifiers use.

ModifierRegistry registration lifecycle

Register custom modifiers in OnCreate and unregister them in OnDestroy in the module definition. This prevents the modifier factory from leaking across module reloads.

ModifierRegistry.register lambda signature

The ModifierRegistry.register lambda receives four parameters: map (raw map from JavaScript), ComposableScope (for scope-dependent modifiers), AppContext, and an event dispatcher. Convert the map using recordFromMap<T>(map) to parse parameters.

Creating TypeScript modifier functions

Create a TypeScript function that calls createModifier('modifierName', params) from @expo/ui/jetpack-compose/modifiers. This builds the modifier configuration object that can be passed to component modifiers prop.

Expo UI not available in Expo Go

Expo UI is not available in Expo Go. To use Expo UI with custom components, create a development build of your app.

Custom component example with modifiers

A custom component integrates with built-in modifiers through the modifiers prop, which can be used with any @expo/ui built-in modifiers like paddingAll, background, and clip.

Give your agent this brain