React Native / Native descriptions and local interaction / Lesson 2

Components, props, and text boundaries

Define read-only component inputs and keep native text ownership explicit through composition and conditional rendering.

About 4 min readContent reviewed 2026-10-28

On this page

Lesson goals

A component API should name meaning and ownership
Give visible strings a Text owner
Compose content without hiding conditions

A component API should name meaning and ownership

Props carry inputs from a parent to a component for a particular render. Treat them as read-only, including objects and arrays referenced by a prop. A field named seatsAvailable communicates more than value, and an amountCents field makes units visible. Keep data validation at the appropriate source boundary rather than letting each visual wrapper reinterpret missing values differently. A component can derive presentation from accepted input without owning the business record. Composition is useful when it names a responsibility or a reusable semantic region, not simply when it splits one large file into many anonymous wrappers.

Give visible strings a Text owner

The first module renders a workshop summary with separate Text components inside a View. React Native does not permit arbitrary text nodes directly under View as if it were an HTML div. Nested Text can express inline runs, while nested View participates in native layout. Do not assume font styling cascades through arbitrary view descendants like browser CSS. Define text styles on their intended Text owners or a deliberate reusable typography component. The expected two-line content describes source order only; exact wrapping, font metrics, and native accessibility grouping require target observation.

jsx Illustrative React Native module; requires the declared compatible application host.

import {View, Text} from 'react-native';
function WorkshopSummary({title, seatsAvailable}) {
  return <View><Text>{title}</Text><Text>Seats: {seatsAvailable}</Text></View>;
}
export default function App() {
  return <WorkshopSummary title="Maps" seatsAvailable={4} />;
}

Expected output

Maps
Seats: 4

The parent owns the accepted seat count. The child describes text without mutating that count or inventing a reservation operation.

Compose content without hiding conditions

The second module accepts children as a content slot and renders a badge only when count is positive. An expression such as count && aComponent can evaluate to numeric zero, which is not the intended absence value and can violate a native text boundary. Use a boolean condition or an explicit conditional result when rendering depends on a number. The wrapper should not inspect arbitrary children to infer hidden domain state. Keep required labels and action contracts explicit in props. A component name does not itself create accessibility semantics or guarantee useful focus order.

jsx Illustrative React Native module; requires the declared compatible application host.

import {View, Text} from 'react-native';
function Panel({children}) { return <View>{children}</View>; }
export default function App() {
  const count = 0;
  return <View>
    <Panel><Text>Materials</Text></Panel>
    {count > 0 ? <Text>New: {count}</Text> : null}
  </View>;
}

Expected output

Materials

The explicit condition returns null for count0, leaving only the panel text. JSX and native hosting remain unexecuted.

Keep defaults separate from runtime validation

A default parameter applies when a prop is undefined, not when it is explicitly null. Decide whether either state is accepted and whether an empty string has another meaning. TypeScript can describe component contracts but does not validate an untrusted server payload at runtime. Normalize and validate once before accepted records reach presentation. Do not coerce every missing number to zero, since zero available seats differs from unknown availability. If a child needs to request a change, provide a callback with a documented payload instead of mutating the parent’s object through a shared reference.

Review the contract with content extremes

Inspect omitted inputs, explicit null where permitted, zero, long translated titles, and text containing markup-like characters. Text expressions display strings rather than interpreting them as browser HTML, but URL handling and other escape hatches still need their own validation. Verify a reused wrapper does not duplicate labels or hide an action from assistive technology. Component tests in a configured renderer can inspect descriptions, while actual text layout and spoken output require target checks. This course does not execute a React renderer or parse JSX; its native examples are reviewed illustrative modules.

Common errors and fixes

A string appears directly under View

Why it happens: A browser text-node assumption crossed the native text boundary.
How to fix it: Place visible text inside an appropriate Text component.
Prevent it next time: Review conditional expressions for accidental numeric text.

A default does not replace null

Why it happens: Default parameters handle undefined rather than explicit null.
How to fix it: Model or normalize null according to the accepted input contract.
Prevent it next time: Test omitted, undefined, null, and blank separately.

A child changes data without a parent command

Why it happens: The child mutated a shared prop object.
How to fix it: Keep props read-only and request changes through a documented callback.
Prevent it next time: Make ownership visible in component APIs.

Check your understanding

1. Why is seatsAvailable=0 different from missing seatsAvailable?

Show worked solution

Zero can be a known valid quantity indicating no available seats. Missing data means availability has not been established under the contract. Preserve that distinction in the model and present an unknown state where needed instead of inventing a zero that could mislead a decision.

2. How should a reusable summary request that its workshop be selected?