Components & Props

Everything you build in React Native is made of components. A component is simply a JavaScript function that returns JSX describing what should appear on screen. Components can be combined and reused, and they can receive data from whoever uses them through props. This lesson covers how to write components and how to pass data into them — the two ideas that everything else in React Native is built on top of.

A Component Is Just a Function

The modern, standard way to write a React Native component is a functional component — an ordinary JavaScript function that returns JSX. Both of these are equivalent and equally valid:

// standard function syntax
function Greeting() {
  return <Text>Hello!</Text>;
}

// arrow function equivalent — just as common
const Greeting = () => {
  return <Text>Hello!</Text>;
};

A component name must start with a capital letter (Greeting, not greeting) — that's how JSX tells your own components apart from regular HTML-like built-ins.

Props: Passing Data From Parent To Child

A component becomes genuinely useful once it can display different data each time it's used. Props (short for "properties") are how a parent component passes data down to a child component — the same way HTML attributes configure an element, except props can be any JavaScript value: strings, numbers, objects, arrays, even functions.

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

// using the component and passing it a "name" prop
function App() {
  return <Greeting name="Alice" />;
}
// renders: Hello, Alice!

Here, App is the parent, Greeting is the child, and name="Alice" is a prop flowing from parent to child. Render <Greeting name="Bob" /> elsewhere and you get an independent "Hello, Bob!" — same component, different data.

Destructuring Props (the Idiomatic Style)

Instead of writing props.name everywhere, the idiomatic modern style destructures the props object directly in the function's parameter list.

// idiomatic: destructure props right in the function signature
function Greeting({ name }) {
  return <Text>Hello, {name}!</Text>;
}

// works identically with multiple props
function UserCard({ name, age, isOnline }) {
  return (
    <View>
      <Text>{name} ({age})</Text>
      <Text>{isOnline ? 'Online' : 'Offline'}</Text>
    </View>
  );
}

You'll see this destructured-parameter style in the vast majority of real React Native code, including the rest of this tutorial.

Props Are Read-Only

This is a foundational rule of React and React Native worth stating clearly: a component must never modify its own props. Props belong to the parent — the child only reads them. If a child needs to change what's displayed, the parent must pass down a new value (or a function the child can call, which the parent then uses to update its own data — a pattern the next lesson on state covers in depth).

// wrong — never reassign a prop inside the child
function Greeting({ name }) {
  name = 'Someone else'; // don't do this
  return <Text>Hello, {name}!</Text>;
}

The children Prop

There's one special prop every component automatically receives: children. It holds whatever JSX is nested between a component's opening and closing tags — useful for building generic "wrapper" or "container" components.

function Card({ children }) {
  return (
    <View style={{ padding: 16, borderRadius: 8, backgroundColor: '#fff' }}>
      {children}
    </View>
  );
}

// usage — everything between <Card> and </Card> becomes props.children
function App() {
  return (
    <Card>
      <Text>Inside the card</Text>
    </Card>
  );
}

Card has no idea what's inside it — it could be a single <Text>, a whole form, or several other components. That's what makes children powerful: it lets you build reusable layout/wrapper components without hardcoding their contents.

Composing Components Into a Screen

Real React Native screens are rarely one giant component — they're small, focused components composed together, the same way HTML elements nest to build a page. A profile screen might combine an Avatar, a UserCard, and a list of PostItem components, each receiving its own props from a parent screen component. Breaking UI into small pieces like this keeps each component easy to understand, test, and reuse — the standard React way of organizing an app's UI, and the pattern you'll use for the rest of this track.