# Examples & Recipes
URL: /docs/native/guide/examples

Practical patterns and recipes for building React Native apps with Docyrus UI Native.

Real-world patterns that combine multiple Docyrus UI Native components. These examples assume you have the Expo + Docyrus UI Native setup from the [installation guide](/docs/native/guide/installation).

## List with Search and Filters

A searchable list view with pull-to-refresh and empty state handling:

```tsx
import { useState, useCallback } from 'react';
import { View, FlatList, RefreshControl } from 'react-native';

import { SearchInput } from '@/components/docyrus-native/search-input';
import { ListBox } from '@/components/docyrus-native/list-box';
import { EmptyState } from '@/components/docyrus-native/empty-state';
import { Badge } from '@/components/docyrus-native/badge';
import { Spinner } from '@/components/docyrus-native/spinner';

export function ContactList() {
  const [search, setSearch] = useState('');
  const [refreshing, setRefreshing] = useState(false);

  const filtered = contacts.filter((c) =>
    c.name.toLowerCase().includes(search.toLowerCase())
  );

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await fetchContacts();
    setRefreshing(false);
  }, []);

  return (
    

      {filtered.length === 0 ? (
        
      ) : (
        
              }
              onPress={() => router.push(`/contact/${item.id}`)}
            />
          )}
        />
      )}
    
  );
}
```

## Form Screen

A multi-field form with validation using Docyrus form fields:

```tsx
import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';

import { Input } from '@/components/docyrus-native/input';
import { Textarea } from '@/components/docyrus-native/textarea';
import { Select } from '@/components/docyrus-native/select';
import { Switch } from '@/components/docyrus-native/switch';
import { Button } from '@/components/docyrus-native/button';
import { Label } from '@/components/docyrus-native/label';

const priorities = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' },
];

export function CreateTaskScreen() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [priority, setPriority] = useState('medium');
  const [notify, setNotify] = useState(true);

  return (
    
            
          

          
            
          

          
            
          

          
            
          
        
      

      
      
    
  );
}
```

## Dashboard with Stats and Charts

A mobile dashboard combining stats cards, charts, and quick actions:

```tsx
import { ScrollView, View } from 'react-native';

import { AwesomeStats } from '@/components/docyrus-native/awesome-stats';
import { AwesomeCard } from '@/components/docyrus-native/awesome-card';
import { Button } from '@/components/docyrus-native/button';
import { Badge } from '@/components/docyrus-native/badge';
import { Separator } from '@/components/docyrus-native/separator';

export function DashboardScreen() {
  return (
    

      

      {/* Quick actions */}
      
        
        
      

      {/* Recent activity */}
      
              
                
              
            
          ))}
        
      
    
  );
}
```

## Data Table with Actions

A native data table with sorting, row actions, and delete confirmation:

```tsx
import { View } from 'react-native';

import { DataTable } from '@/components/docyrus-native/data-table';
import { DeleteConfirmDialog } from '@/components/docyrus-native/delete-confirm-dialog';
import { ActionSheet } from '@/components/docyrus-native/action-sheet';
import { Toast } from '@/components/docyrus-native/toast';

export function ProductsScreen() {
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [actionItem, setActionItem] = useState
  );
}
```

## Tab Navigation with Stepper

Multi-step wizard flow using tabs and a stepper component:

```tsx
import { useState } from 'react';
import { View, ScrollView } from 'react-native';

import { Tabs } from '@/components/docyrus-native/tabs';
import { Stepper } from '@/components/docyrus-native/stepper';
import { Button } from '@/components/docyrus-native/button';
import { Input } from '@/components/docyrus-native/input';
import { Label } from '@/components/docyrus-native/label';

const steps = [
  { title: 'Account', description: 'Basic info' },
  { title: 'Profile', description: 'Your details' },
  { title: 'Review', description: 'Confirm' },
];

export function OnboardingScreen() {
  const [step, setStep] = useState(0);

  return (
    

      
              
            
            
              
            
          
        )}

        {step === 1 && (
          
              
            
            
              
            
          
        )}

        {step === 2 && (
          
        )}
      

      
        )}
        
      
    
  );
}
```

## Related

- [Installation](/docs/native/guide/installation) — Set up Docyrus UI Native in your Expo project
- [Components](/docs/native/components) — Browse all native components
- [Theming](/docs/native/guide/theming) — Customize the native theme