Component Functions

A component is a reusable piece of your app's interface — like a LEGO brick. You build your entire app by snapping components together, and each one is just a JavaScript function.

export default function HomeScreen() {
  return (
    <View>
      <Text>Welcome!</Text>
    </View>
  );
}

Anatomy of a component

1. Function name — PascalCase (every word starts with a capital letter) by convention (HomeScreen, not homeScreen).
2. Return value — JSX describing what to render. When React renders, it calls your function and reads the JSX to draw the screen.
3. Export — export default makes it the file's main component.

Props: component inputs

Components accept a single props object. Destructure it for cleaner code:

function Greeting({ name }: { name: string }) {
  return <Text>Hello, {name}!</Text>;
}

// Usage
<Greeting name="Alex" />;

Props flow one direction — from parent to child. This makes data flow predictable and easy to trace.

Composition

Build complex UIs by nesting components inside each other:

function App() {
  return (
    <View>
      <Header />
      <Greeting name="Alex" />
      <Footer />
    </View>
  );
}

Key idea: Components are reusable. Write once, use anywhere — like LEGO bricks for your UI.