Components

The Expo Startup template includes a comprehensive set of 35+ customizable UI components designed for building modern mobile applications. All components are built with Expo, React Native, and NativeWind for consistent theming across your app.

Component Features

• Customizable - Full control over appearance and behavior
• Theme-aware - Automatically adapt to light/dark themes
• Accessible - Built with accessibility in mind
• TypeScript - Fully typed for better development experience
• Responsive - Work across different device sizes
• Lightweight - Optimized for mobile performance

Included Components

The template includes the following categories of components:

Layout Components

Essential components for structuring your UI, including Grid, Section, Stack, Spacer, and more.

Navigation Elements

Components for guiding users through your app, such as Header, ListLink, and tabs.

Form Elements

Components for user input, including Input, Select, Counter, DatePicker, Checkbox, and more.

Feedback Components

Components to provide user feedback, like Toast, SkeletonLoader, and progress indicators.

Media Components

Components for displaying media content, including ImageCarousel, MultipleImagePicker, and Avatar.

Full Control

All components are included directly in your project, giving you complete control to modify them as needed:

master-app/components/
├── Button.tsx
├── Header.tsx
├── Avatar.tsx
└── ... (and many more)

You can:

1. Customize - Edit any component to suit your specific requirements
2. Extend - Add new features to existing components
3. Remove - Delete components you don't need to keep your app lightweight
4. Create - Use the existing components as a foundation for new ones

Using Components

Import components directly from the components directory:

import Button from '@/components/Button';
import Avatar from '@/components/Avatar';
import { Counter } from '@/components/forms/Counter';
 
function MyScreen() {
  return (
    <View>
      <Avatar
        size="md"
        source={{ uri: 'https://example.com/avatar.jpg' }}
      />
      <Button 
        title="Press Me" 
        onPress={() => console.log('Pressed!')}
        variant="primary"
      />
      <Counter
        label="Quantity"
        onChange={handleQuantityChange}
      />
    </View>
  );
}

Component Documentation

This documentation provides detailed information for each component, including:

• Props and configuration options
• Usage examples
• Best practices

Browse the components section to learn more about specific components.