expo-ui-jetpack-compose

Files (1)

• SKILL.md

SKILL.md (first lines)

# Android UI with Jetpack Compose via @expo/ui

## Overview

`@expo/ui/jetpack-compose` provides Android-native Jetpack Compose views directly in React Native Expo apps. These components render using Android's modern declarative UI framework, giving you truly native Android look-and-feel without writing Kotlin.

**Core principle:** Use platform-specific `@expo/ui` imports to get native-quality components that follow each platform's design language. On Android, this means Jetpack Compose.

## When to Use

- Building Android-specific screens or components that must feel native
- Needing performant scrolling lists on Android (LazyColumn)
- Rendering Material Design 3 components natively
- Displaying Android XML vector drawable icons
- Building platform-specific UI alongside cross-platform shared code

## Import Pattern

```tsx
// Android-specific import
import { Button, LazyColumn, Icon } from '@expo/ui/jetpack-compose';

// For platform-specific rendering
import { Platform } from 'react-native';

function MyComponent() {
  if (Platform.OS === 'android') {
    return <AndroidView />;
  }
  return <IOSView />;
}
```

## LazyColumn for Scrolling Lists

`LazyColumn` is the Jetpack Compose equivalent of `RecyclerView`. It lazily composes and lays out only the visible items, making it efficient for large datasets.

### Basic Usage

```tsx
import { LazyColumn, Section, Item, Text } from '@expo/ui/jetpack-compose';

function ContactList() {
  const contacts = [
    { id: '1', name: 'Alice', phone: '555-0101' },
    { id: '2', name: 'Bob', phone: '555-0102' },
    { id: '3', name: 'Charlie', phone: '555-0103' },
  ];

  return (
    <LazyColumn style={{ flex: 1 }}>
      <Section header="Contacts">
        {contacts.map((contact) => (
          <Item key={contact.id}>
            <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
              {contact.name}
            </Text>
            <Text style={{ fontSize: 14, color: '#666' }}>
              {contact.phone}
            </Text>
          </Item>
        ))}
      </Section>
    </LazyColumn>
  );
}
```

### Sectioned Lists

```tsx
import { LazyColumn, Section, Item, Text } from '@expo/ui/jetpack-compose';

function SettingsScreen() {
  return (
    <LazyColumn style={{ flex: 1 }}>
      <Section header="Account">
        <Item onPress={() => console.log('Profile')}>
          <Text>Profile</Text>
        </Item>
        <Item onPress={() => console.log('Security')}>
          <Text>Security</Text>
        </Item>
      </Section>

      <Section header="Preferences">
        <Item onPress={() => console.log('Notifications')}>
          <Text>Notifications</Text>
        </Item>
        <Item onPress={() => console.log('Theme')}>
          <Text>Theme</Text>
        </Item>
      </Section>

      <Section header="About">
        <Item>
          <Text>Version 1.0.0</Text>
        </Item>
      </Section>
    </LazyColumn>
  );
}
```

## Icon Component for XML Vector Drawables

Render Android XML vector drawables as icons:

```tsx
import { Icon } from '@expo/ui/jetpack-compose';

function NavigationBar() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
      <Icon
        name="home"
        size={24}
        tintColor="#333"
      />

From bidah/react-native-hifi, MIT.

More from bidah/react-native-hifi