Component Development

Component Architecture

The Launch mobile app uses a well-organized component system that promotes reusability, consistency, and maintainability.

Prerequisites

Familiarity with apps/mobile/components
AppText and base components available

Steps

Common Components

Components live in a flat components/ folder. Here are a few real examples from the codebase:

import { AuthButton } from "@/components/auth-button";

<AuthButton
  provider="apple"
  text="Continue with Apple"
  onPress={handleAppleSignIn}
/>

import { AppText } from "@/components/app-text";

<AppText className="text-lg font-bold text-center">Hello World</AppText>

import { ScreenContainer } from "@/components/screen-container";

export default function MyScreen() {
  return (
    <ScreenContainer>
      {/* Your screen content */}
    </ScreenContainer>
  );
}

import { ModelSelect } from "@/components/model-select";

<ModelSelect value={model} onValueChange={setModel} />

Creating New Components

Component Template

// components/ui/my-component.tsx
import { View } from "react-native";
import { AppText } from "./app-text";
import { getCopy } from "@/config/launch.config";

interface MyComponentProps {
  title: string;
  variant?: "primary" | "secondary";
  onPress?: () => void;
  className?: string;
}

export function MyComponent({
  title,
  variant = "primary",
  onPress,
  className = "",
}: MyComponentProps) {
  const variantStyles = {
    primary: "bg-blue-500 text-white",
    secondary: "bg-gray-200 text-gray-800",
  };

  return (
    <View className={`p-4 rounded-lg ${variantStyles[variant]} ${className}`}>
      <AppText className="font-bold">{title}</AppText>
    </View>
  );
}

Troubleshooting

Styles not applied: verify NativeWind classes and theme tokens
Component not found: check exports and import paths

Next Steps

Import Pattern

Components are imported directly from their files:

import { AppText } from "@/components/app-text";
import { ScreenContainer } from "@/components/screen-container";

TypeScript Best Practices

// Define clear interfaces
interface ButtonProps {
  children: React.ReactNode;
  variant: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onPress: () => void; // Required callback
  className?: string; // Optional styling
}

// Use union types for variants
type AlertType = "success" | "warning" | "error" | "info";

// Export types for reuse
export type { ButtonProps, AlertType };

Styling Guidelines

NativeWind Classes

Use Tailwind CSS classes through NativeWind:

// Good - Semantic classes
<View className="flex-1 bg-background p-4 gap-2">
  <AppText className="text-2xl font-bold text-foreground">
    Title
  </AppText>
</View>

// Avoid - Arbitrary values
<View style={{ flex: 1, backgroundColor: '#fff', padding: 16 }}>

Theme Integration

Components should respect the theme system:

import { useTheme } from "heroui-native";

export function ThemedComponent() {
  const { colors, isDark } = useTheme();

  return (
    <View
      className="p-4 rounded-lg"
      style={{
        backgroundColor: isDark ? colors.background : colors.card
      }}
    >
      <AppText className="text-foreground">Themed content</AppText>
    </View>
  );
}

Responsive Design

Handle different screen sizes and form factors:

import { useResponsive } from "@/components/useResponsive";

export function ResponsiveComponent() {
  const { isTablet } = useResponsive();

  return (
    <View className={`p-4 ${isTablet ? "max-w-md mx-auto" : "w-full"}`}>
      {/* Component content */}
    </View>
  );
}

Copy Organization

Launch does not ship with a centralized copy system. Keep copy close to the component or feature module it belongs to, and extract shared strings into constants when needed.

Testing Components

Component Testing

// __tests__/my-component.test.tsx
import { render, fireEvent } from "@testing-library/react-native";
import { MyComponent } from "../my-component";

describe("MyComponent", () => {
  it("renders correctly", () => {
    const { getByText } = render(
      <MyComponent title="Test Title" />
    );

    expect(getByText("Test Title")).toBeTruthy();
  });

  it("handles press events", () => {
    const mockOnPress = jest.fn();
    const { getByText } = render(
      <MyComponent title="Test" onPress={mockOnPress} />
    );

    fireEvent.press(getByText("Test"));
    expect(mockOnPress).toHaveBeenCalled();
  });
});

Visual Testing

Use Storybook or component galleries for visual testing:

// stories/MyComponent.stories.tsx
export default {
  title: "UI/MyComponent",
  component: MyComponent,
};

export const Primary = {
  args: {
    title: "Primary Button",
    variant: "primary",
  },
};

export const Secondary = {
  args: {
    title: "Secondary Button",
    variant: "secondary",
  },
};

Performance Considerations

Memoization

Use React.memo for expensive components:

import React from "react";

interface ExpensiveComponentProps {
  data: ComplexDataType[];
  onItemPress: (id: string) => void;
}

export const ExpensiveComponent = React.memo<ExpensiveComponentProps>(
  ({ data, onItemPress }) => {
    return (
      <View>
        {data.map(item => (
          <ExpensiveItem
            key={item.id}
            item={item}
            onPress={() => onItemPress(item.id)}
          />
        ))}
      </View>
    );
  }
);

Lazy Loading

Use lazy loading for heavy components:

import { lazy, Suspense } from "react";
import { AppText } from "@/components/app-text";

const HeavyComponent = lazy(() => import("./heavy-component"));

export function ParentComponent() {
  return (
    <Suspense fallback={<AppText>Loading...</AppText>}>
      <HeavyComponent />
    </Suspense>
  );
}

Best Practices

Component Design

Single Responsibility - Each component should have one clear purpose
Composition over Inheritance - Build complex components from simpler ones
Props Interface - Always define TypeScript interfaces for props
Default Props - Provide sensible defaults for optional props
Error Boundaries - Handle errors gracefully

Code Organization

Logical Grouping - Place components in appropriate category folders
Index Exports - Always export from folder index files
Consistent Naming - Use PascalCase for components, camelCase for props
File Naming - Use kebab-case for file names

Documentation

Props Documentation - Document complex props with JSDoc
Usage Examples - Provide clear usage examples
Component Stories - Create Storybook stories for visual components
README Updates - Keep component documentation current

This component system ensures consistency, reusability, and maintainability across the entire mobile application.

​Component Architecture

​Prerequisites

​Steps

​Common Components

​Creating New Components

​Component Template

​Troubleshooting

​Next Steps

​Import Pattern

​TypeScript Best Practices

​Styling Guidelines

​NativeWind Classes

​Theme Integration

​Responsive Design

​Copy Organization

​Testing Components

​Component Testing

​Visual Testing

​Performance Considerations

​Memoization

​Lazy Loading

​Best Practices

​Component Design

​Code Organization

​Documentation