Writing JSX in React Native

Look at this one tag and the text it puts on the screen when the variable name holds the string 'Sara':

<Text>Hello, {name}!</Text>

Hello, Sara!

The curly braces leave JSX and return to JavaScript for a moment. Anything between them is evaluated, and the result takes that place in the output. This one feature allows a screen to show data rather than fixed text, so it is the main subject of this lesson.

Returning JSX from a Component

A component is a function that returns JSX, and React calls that function to learn what to display. The Components chapter explains them in detail, but you need only that one fact for now. Here is the profile card with a greeting and two lines that use data:

import { Text, View } from 'react-native';

const name = 'Sara';
const score = 4;
const total = 5;

export default function ProfileCard() {
  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Text>You answered {score} of {total} questions.</Text>
      <Text>That is {(score / total) * 100} percent.</Text>
    </View>
  );
}

Running this component produces the following tree of elements, where the numbers have been converted to text:

View
  Text: Hello, Sara!
  Text: You answered 4 of 5 questions.
  Text: That is 80 percent.

To try this on your phone, put the code in App.js. The function does not have to be named App, because index.js imports whatever App.js exports as its default. If you want the text centered and clear of the status bar, keep the styles block from your first application, add StyleSheet to the import from react-native, and write <View style={styles.container}> on the outer tag.

Text Must Be Inside Text

The Text component has one strict rule. On the web, you can place words directly inside a div. In React Native, every string must be inside a Text, because a View has no way to display characters. Rendering <View>Hello</View> stops with this error:

Text strings must be rendered within a <Text> component.

What Can Go Inside Curly Braces

The braces accept any JavaScript expression, which is a piece of code that produces a value. In addition to variables and arithmetic, this includes function calls such as {name.toUpperCase()}, which displays SARA.

A statement does not produce a value, so it cannot go inside the braces. An if statement is the common example, and it stops the build with an Unexpected token error. When you need a choice inside JSX, use the conditional operator instead, because it is an expression:

<Text>{score >= 3 ? 'Passed' : 'Try again'}</Text>

With a score of 4, this displays Passed.

The resulting value decides what appears on the screen, and the types do not all behave the same way:

To fix the object error, display one of its fields, such as {user.name}.

The first two rows combine into a trap that mostly affects React Native. A common way to show something only under a condition is the && operator. Suppose count is 0 in this code:

<View>
  {count && <Text>You have {count} messages.</Text>}
</View>

The expression 0 && ... evaluates to 0, which is a number rather than false, so React tries to display it as text. That number sits directly inside a View, so the application stops with the same Text strings must be rendered within a <Text> component error as before.

The repair is to write a real condition, so that the left side is true or false:

<View>
  {count > 0 && <Text>You have {count} messages.</Text>}
</View>

With count at 0, this renders an empty View. With count at 3, it displays You have 3 messages.

Passing Values to Attributes

Curly braces also work for attributes, which React calls props. The Props chapter covers them fully. Use quotes when the value is a fixed string, and use braces for every other value:

<View>
  <ActivityIndicator size="large" />
  <Text numberOfLines={1}>Hello, {name}!</Text>
</View>

Adding a Style

The style prop takes a JavaScript object, which is why it often appears with two pairs of braces. The outer pair means "here comes a JavaScript value", and the inner pair is the object itself:

<Text style={{ fontSize: 24, color: 'teal' }}>Hello, {name}!</Text>

The two braces have no special meaning together, and the object can come from a variable just as well. This version produces an identical result:

const titleStyle = { fontSize: 24, color: 'teal' };

<Text style={titleStyle}>Hello, {name}!</Text>

Property names are camelCase, so font-size becomes fontSize. Sizes are plain numbers rather than strings such as '24px'. The Styling chapter explains all of this, including StyleSheet, which is the usual way to organize styles in a larger application.