Update Displayed Text and Verify on a Phone

Welcome back. In the previous lesson, you opened the starter project in Expo Snack and ran it through Expo Go on your Moto G. You established the basic development loop: edit code in the browser, then view the Android app in Expo Go.

Today you will make a small, safe change inside that loop. You will replace one piece of displayed text in the starter project, wait for Snack to update the preview, and confirm that the new wording appears in Expo Go. This is your first actual code edit, so the goal is precision rather than speed. Plan for about 25–30 minutes.

---

The small part of the code you are changing

React Native screens are built from components. For now, two component names matter:

• View groups other visual components, rather like a container.
• Text displays words on the screen.

A Text component has an opening tag and a closing tag. The words between them are what the app displays:

<Text>Welcome to my app</Text>

In that example:

• <Text> starts the text component.
• Welcome to my app is the displayed content.
• </Text> ends the component.

For this lesson, you will change only the words between the Text tags. Leave the angle brackets, the word Text, and any nearby punctuation exactly as they are.

One important distinction: the code is not plain writing. The surrounding characters tell React Native how to interpret it. If you change only the visible words, you make a controlled change. If you delete a <, >, /, or component name by accident, the code may stop working. We will deliberately learn how to repair such errors in the next lesson; today, keep the edit narrow.

---

Find a displayed-text line in the starter project

Return to the browser tab containing your starter project in Expo Snack. Open App.js or App.tsx if it is not already selected.

The code may look unfamiliar, and you do not need to understand every line. Look specifically for a line containing both:

<Text>

and:

</Text>

Often, both tags and the text are on a single line, for example:

<Text>Hello!</Text>

But the content can also be spread across several lines:

<Text>
  Hello!
</Text>

In either layout, the editable text is Hello!, not the tags.

If there are several Text components

A starter project may show multiple pieces of text. Choose one that you can identify easily on the running app screen, ideally a large heading or a clear greeting.

If the app displays “Welcome!” and you find this:

<Text>Welcome!</Text>

you have found the right place. If you are unsure, change one visible phrase to something distinctive, such as:

<Text>My first phone-built app</Text>

That makes it easy to verify whether you edited the intended line.

---

Make one controlled text change

Use this procedure carefully:

1. Tap in the code editor just after the opening > of the relevant <Text> tag.
2. Select only the existing displayed words.
3. Type your replacement. Use a short phrase that you will recognize, such as My task tracker.
4. Check that the line still has its opening and closing Text tags.

For example, make this change:

<Text>Welcome!</Text>

to:

<Text>My task tracker</Text>

Do not add quotation marks when the words sit directly between <Text> and </Text>. Do not erase the slash in </Text>.

Before leaving the editor, inspect the result character by character:

<Text>My task tracker</Text>

A valid line has:

• <Text> before your words;
• your new words in the middle;
• </Text> after your words.

Snack may automatically save or prepare the updated version after a short pause. Look for a successful status such as No errors, if the editor shows one. A brief loading or building message is normal.

---

Verify the change in Expo Go

Now switch to Expo Go using Android’s Overview/Recent Apps control or gesture. Keep both Snack and Expo Go open; you will use this switching pattern throughout the course.

Give Expo Go a moment to receive the updated project. If the app refreshes automatically, look for the new phrase on screen.

Your verification is successful only if the phrase you typed in Snack is visible in Expo Go. For example, if you changed the code to:

<Text>My task tracker</Text>

then you should see My task tracker on the app screen.

This proves three useful things at once:

1. You edited the correct project file.
2. The code still has valid structure.
3. Expo Go received and ran your updated code.

If the old text is still showing

Do not immediately make more edits. Try these steps in order:

1. Wait another 15–30 seconds in Expo Go.
2. Switch back to Snack and confirm your new wording is still present in the code.
3. Check for an error status in Snack.
4. Return to Expo Go. If it offers a refresh or reload control, use it once.
5. If needed, close only the running preview and use Snack’s My Device or Open in Expo Go control to launch the project again.

A stale screen is usually a timing or refresh issue, not evidence that you have failed.

If you see a red error screen

Return to Snack and compare your edited line with this pattern:

<Text>Your words here</Text>

The most common accidental changes are:

What went wrong	Example	What to restore
Missing closing tag	<Text>My task tracker	Add </Text> after the words.
Missing opening bracket	Text>My task tracker</Text>	Restore <Text> at the start.
Wrong closing tag	<Text>My task tracker<Text>	Add the slash: </Text>.
Text placed outside the component	My task tracker <Text></Text>	Put the words between the tags.

Correct only the damaged line, then wait for Snack and Expo Go to refresh. There is no need to rewrite the entire file.

---

A useful habit: change, inspect, verify

Professional development is not a matter of typing a large amount of code and hoping it works at the end. It is a repeating short cycle:

1. Make one purposeful change.
2. Inspect the code for obvious damage.
3. Run or refresh the app.
4. Confirm the visible result matches the intended change.

Today’s edit is tiny, but this habit will make later work on task lists, buttons, and saved data much easier to diagnose.

Before finishing, use this checklist:

• I changed text inside a Text component in App.js or App.tsx.
• I kept both <Text> and </Text> tags intact.
• Snack showed no error after the change.
• Expo Go displayed my new text on my Moto G.
• I can switch between the Snack browser tab and Expo Go.

---

You have now made and verified your first React Native code change from a phone-only setup. The key idea is simple: what appears between a Text component’s tags is displayed in the app.

Next, you will intentionally examine a small syntax error in Snack, use the error feedback to locate it, and restore the project to a working state.