building-native-ui

Files (1)

• SKILL.md

SKILL.md (first lines)

# Building Native UI with React Native and Expo

## Overview

React Native UI differs fundamentally from web UI. There is no CSS, no DOM, no browser layout engine. Everything renders to native platform views through a bridge. Understanding this architecture prevents the most common mistakes.

**Core principle:** Think in native components and Flexbox, not in HTML/CSS. Every visual element maps to a platform-native view.

## When to Use

- Building screens, components, or layouts in React Native
- Implementing navigation between screens
- Adding animations or gesture interactions
- Using native platform controls (switches, sliders, segmented controls)
- Styling components (StyleSheet, not CSS)
- Creating modals, form sheets, or bottom sheets

## Navigation with Expo Router

Expo Router uses **file-based routing**, similar to Next.js. Files in the `app/` directory automatically become routes.

### Directory Structure

```
app/
  _layout.tsx        # Root layout (wraps all routes)
  index.tsx          # Home screen (/)
  settings.tsx       # /settings
  (tabs)/
    _layout.tsx      # Tab navigator layout
    home.tsx         # Tab: home
    profile.tsx      # Tab: profile
  [id].tsx           # Dynamic route: /123, /abc
  (auth)/
    login.tsx        # Group: doesn't affect URL
```

### Layout Files

```tsx
// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="settings" options={{ headerShown: false }} />
    </Stack>
  );
}
```

### Navigation

```tsx
import { Link, useRouter } from 'expo-router';

// Declarative
<Link href="/settings">Go to Settings</Link>
<Link href={{ pathname: '/user/[id]', params: { id: '42' } }}>User 42</Link>

// Imperative
const router = useRouter();
router.push('/settings');
router.replace('/login');  // No back button
router.back();
```

### Tab Navigation

```tsx
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}
```

## Flexbox Layouts

React Native uses Flexbox by default. Key differences from web Flexbox:

| Property | React Native Default | Web Default |
|----------|---------------------|-------------|
| `flexDirection` | `column` | `row` |
| `alignContent` | `flex-start` | `stretch` |
| Units | Unitless (dp) | px, em, rem, etc. |

### Common Layout Patterns

```tsx
// Centering content
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

// Row with spacing
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',

From bidah/react-native-hifi, MIT.

More from bidah/react-native-hifi