This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 58).

CompositionLocalProvider

A Jetpack Compose CompositionLocalProvider component for providing composition local values to its children.

Android

Included in Expo Go

GitHub

npm

Changelog

Expo UI CompositionLocalProvider matches the official Jetpack Compose CompositionLocalProvider API. It provides values to all components inside it. It adds no layout of its own, so children keep modifiers such as weight from the parent Row or Column.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Smaller touch targets

Material components such as Button, IconButton, Checkbox, RadioButton, and Switch reserve at least 48dp of space for touch, even when they are drawn smaller. Set minimumInteractiveComponentSize to 0 to remove this minimum. Make sure that the controls are still easy to tap.

import {
  Checkbox,
  CompositionLocalProvider,
  Host,
  IconButton,
  Row,
  Text,
} from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';
import { useState } from 'react';

export default function SmallTouchTargetsExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <CompositionLocalProvider
        values={{ minimumInteractiveComponentSize: 0 }}>
        <Row
          horizontalArrangement={{ spacedBy: 8 }}
          verticalAlignment="center">
          <IconButton
            modifiers={[size(24, 24)]}
            onClick={() => console.log('Pressed')}>
            <Text>+</Text>
          </IconButton>
          <Checkbox value={checked} onCheckedChange={setChecked} />
        </Row>
      </CompositionLocalProvider>
    </Host>
  );
}

API

import { CompositionLocalProvider } from '@expo/ui/jetpack-compose';

Component