Expo UI Drop-Ins

npx create-expo-app@latest MyExpoUIApp --template blank-typescript
cd MyExpoUIApp
npx expo install @expo/ui

// screens/SettingsNativeScreen.tsx
import { Host, Column, Row, Text, Switch, Button, Spacer } from "@expo/ui";
 
export default function SettingsNativeScreen() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={16} padding={16}>
        <Text style={{ fontSize: 28, fontWeight: "700" }}>Notifications</Text>
 
        <Row spacing={12} alignment="center">
          <Column style={{ flex: 1 }}>
            <Text style={{ fontSize: 17, fontWeight: "600" }}>Push alerts</Text>
            <Text style={{ fontSize: 14, opacity: 0.7 }}>Order updates and promos</Text>
          </Column>
          <Switch defaultValue={true} label="Push alerts" />
        </Row>
 
        <Spacer />
 
        <Button label="Save preferences" variant="borderedProminent" onPress={() => {}} />
      </Column>
    </Host>
  );
}

// Platform-specific enhancement (iOS only file pattern)
// components/GlassHeader.ios.tsx
import { Host, Text, VStack } from "@expo/ui/swift-ui";
import { background, glassEffect, padding } from "@expo/ui/swift-ui/modifiers";
 
export function GlassHeader({ title }: { title: string }) {
  return (
    <Host matchContents>
      <VStack modifiers={[padding({ all: 16 }), glassEffect({ glass: { variant: "regular" } })]}>
        <Text modifiers={[background("transparent")]}>{title}</Text>
      </VStack>
    </Host>
  );
}

// components/GlassHeader.tsx - Android fallback
import { Text, View } from "react-native";
 
export function GlassHeader({ title }: { title: string }) {
  return (
    <View style={{ padding: 16, backgroundColor: "#f1f5f9" }}>
      <Text style={{ fontSize: 22, fontWeight: "700" }}>{title}</Text>
    </View>
  );
}

// screens/HybridDashboardScreen.tsx
import { Host, Column, Row, Text, Button, RNHostView } from "@expo/ui";
import { useColorScheme } from "react-native";
import { GlassHeader } from "../components/GlassHeader";
import { SpendingChart } from "../components/SpendingChart"; // standard RN component
 
export default function HybridDashboardScreen() {
  const scheme = useColorScheme() ?? "light";
 
  return (
    <Host style={{ flex: 1, backgroundColor: scheme === "dark" ? "#0f172a" : "#f8fafc" }}>
      <Column spacing={0} style={{ flex: 1 }}>
        <GlassHeader title="Spending" />
 
        <Column spacing={16} padding={16} style={{ flex: 1 }}>
          <Row spacing={8} alignment="center">
            <Text style={{ fontSize: 15, opacity: 0.75 }}>This month</Text>
            <Text style={{ fontSize: 28, fontWeight: "700" }}>$1,284.00</Text>
          </Row>
 
          {/* RN island inside native layout */}
          <Host style={{ flex: 1, minHeight: 220, borderRadius: 12, overflow: "hidden" }}>
            <RNHostView style={{ flex: 1 }}>
              <SpendingChart />
            </RNHostView>
          </Host>
 
          <Button
            label="View transactions"
            variant="bordered"
            onPress={() => {}}
            accessibilityLabel="View transactions"
          />
        </Column>
      </Column>
    </Host>
  );
}

// components/SpendingChart.tsx - ordinary React Native
import { View, Text, StyleSheet } from "react-native";
 
const BARS = [40, 65, 30, 80, 55];
 
export function SpendingChart() {
  return (
    <View style={styles.chart}>
      {BARS.map((h, i) => (
        <View key={i} style={[styles.bar, { height: h }]} />
      ))}
      <Text style={styles.caption}>RN chart inside RNHostView</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  chart: { flex: 1, flexDirection: "row", alignItems: "flex-end", gap: 8, padding: 16, backgroundColor: "#fff" },
  bar: { flex: 1, backgroundColor: "#2563eb", borderRadius: 4 },
  caption: { position: "absolute", bottom: 8, left: 16, fontSize: 12, color: "#64748b" },
});

import { Text, VStack } from "@expo/ui/swift-ui";
import { font, foregroundStyle, padding } from "@expo/ui/swift-ui/modifiers";
 
<Text
  modifiers={[
    font({ weight: "semibold", size: 17 }),
    foregroundStyle("#111111"),
    padding({ horizontal: 16 }),
  ]}
>
  Hello
</Text>