Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 3 / 10Pressable and TextInput
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Pressable and TextInput
01 / 09Overview

Pressable and TextInput

You'll learn to make something tappable with Pressable, and to read what someone types with TextInput.

Why it mattersAdding a habit means typing its name and tapping a button, and every form in every app works the same way.
about 75 min·needs: View, Text and Image, State with useState
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Handling text inputreactnative.dev · official docs · 10 min · English
MMamun's noteA short page with one live example. Type into it and watch the text change on every letter. Then read the code and find onChangeText and the state it sets.
Docs
Pressablereactnative.dev · official docs · 10 min · English
MMamun's noteRead "How it works" and run the example. It shows the pressed value changing the style while you hold. Skip the list of props, except onPress and style.
Video
Complete React Native tutorial #13: login and signup formsYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 0:00–2:00, where he adds a TextInput with a placeholder, then 7:04–11:07, where he keeps what you type in state with useState and onChangeText. Skip the part where he makes his own themed input, and the Appwrite login, which we don't use.
VideoOptional
Complete React Native tutorial #8: Pressable componentYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 0:00–6:06. He builds a button with Pressable and uses pressed to make it lighter while you hold it. After 6:06 he turns it into a reusable themed button, which you can skip.
03 / 09

Explanation

You want a box where you type a new habit, like "Walk 20 minutes", and an "Add" button next to it. On a phone you need two things: a place to type, and something to tap.

Think of sending money in bKash. You type the amount into a box, and the screen shows each digit as you press it. Then you tap "Next", and only then does something happen. Typing and tapping are two separate jobs.

const [name, setName] = useState("");
 
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={() => console.log("Add", name)}>
  <Text>Add</Text>
</Pressable>
  • TextInput is the box you type into. onChangeText runs after every letter and gives you the whole text so far, as a plain string. Saving it in state with setName keeps the box and your state the same. placeholder is the grey hint shown while the box is empty.
  • Pressable is anything you can tap. onPress runs when the finger lifts. It has no look of its own, so you put a Text inside it and give it a style.
  • style on a Pressable can be a function: style={({ pressed }) => [styles.button, pressed && styles.down]}. pressed is true while the finger is down, so the button can change colour while you hold it.

On the web you wrote onChange and read e.target.value. onChangeText is simpler: it hands you the text straight away.

People often write onPress={addHabit()} with brackets. That calls addHabit while the screen is being drawn, not when you tap. Pass the function itself, onPress={addHabit}, or wrap it in an arrow, onPress={() => addHabit(name)}.

When you read a form, find each TextInput and follow its onChangeText to a state variable. Then find the Pressable and read its onPress: that is what happens on a tap.

Words to recognise
PressableonPressTextInputonChangeTextplaceholder
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/components/AddHabit.jsx5 notes
1import { useState } from "react";
2import { Pressable, Text, TextInput, View } from "react-native";
3export default function AddHabit({ onAdd }) {
const [name, setName] = useState("");
Mentor note · line 4
name holds whatever is in the box right now. It starts empty.
5 function handleAdd() {
if (name.trim() === "") return;
7 onAdd(name.trim());
setName("");
9 }
10 return (
11 <View style={{ flexDirection: "row", gap: 8 }}>
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={handleAdd}><Text>Add</Text></Pressable>
14 </View>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  const [name, setName] = useState("");
3  return (
4    <View style={{ padding: 24, gap: 8 }}>
5      <TextInput value={name} onChangeText={setName} placeholder="Your name" />
6      <Text>Hello, {name}</Text>
7    </View>
8  );
9}
10// You tap the box and type R, a, f, i. You don't press Enter.
What happens while you type?
DrillFinish the "add a habit" box2 / 2
Typing a habit and tapping Add already puts it in the list. Make it nicer: clear the box after adding, ignore an empty box, and make the button lighter while your finger is on it.
1import { useState } from "react";
2import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
3 
4export default function App() {
5  const [name, setName] = useState("");
6  const [habits, setHabits] = useState(["Drink water", "Read 10 pages"]);

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenAfter you tap Add, the box is empty again.Tapping Add with an empty box (or only spaces) adds nothing.The button looks lighter while you hold it. Try style={({ pressed }) => [styles.button, pressed && { opacity: 0.6 }]}.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does onChangeText give your function?
  2. 2 / 3What is wrong with <Pressable onPress={addHabit()}>?
  3. 3 / 3You write <Pressable onPress={save}>Save</Pressable>. What is the problem?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Pressable and TextInput?

09 / 09

Done

You can now
Read a TextInput and a Pressable and say what happens when someone types and taps.
Next: Styling and flexbox on mobile Back to Phase 6
On this page
  1. 01Pressable and TextInput
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Pressable and TextInput
01 / 09Overview

Pressable and TextInput

You'll learn to make something tappable with Pressable, and to read what someone types with TextInput.

Why it mattersAdding a habit means typing its name and tapping a button, and every form in every app works the same way.
about 75 min·needs: View, Text and Image, State with useState
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Handling text inputreactnative.dev · official docs · 10 min · English
MMamun's noteA short page with one live example. Type into it and watch the text change on every letter. Then read the code and find onChangeText and the state it sets.
Docs
Pressablereactnative.dev · official docs · 10 min · English
MMamun's noteRead "How it works" and run the example. It shows the pressed value changing the style while you hold. Skip the list of props, except onPress and style.
Video
Complete React Native tutorial #13: login and signup formsYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 0:00–2:00, where he adds a TextInput with a placeholder, then 7:04–11:07, where he keeps what you type in state with useState and onChangeText. Skip the part where he makes his own themed input, and the Appwrite login, which we don't use.
VideoOptional
Complete React Native tutorial #8: Pressable componentYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 0:00–6:06. He builds a button with Pressable and uses pressed to make it lighter while you hold it. After 6:06 he turns it into a reusable themed button, which you can skip.
03 / 09

Explanation

You want a box where you type a new habit, like "Walk 20 minutes", and an "Add" button next to it. On a phone you need two things: a place to type, and something to tap.

Think of sending money in bKash. You type the amount into a box, and the screen shows each digit as you press it. Then you tap "Next", and only then does something happen. Typing and tapping are two separate jobs.

const [name, setName] = useState("");
 
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={() => console.log("Add", name)}>
  <Text>Add</Text>
</Pressable>
  • TextInput is the box you type into. onChangeText runs after every letter and gives you the whole text so far, as a plain string. Saving it in state with setName keeps the box and your state the same. placeholder is the grey hint shown while the box is empty.
  • Pressable is anything you can tap. onPress runs when the finger lifts. It has no look of its own, so you put a Text inside it and give it a style.
  • style on a Pressable can be a function: style={({ pressed }) => [styles.button, pressed && styles.down]}. pressed is true while the finger is down, so the button can change colour while you hold it.

On the web you wrote onChange and read e.target.value. onChangeText is simpler: it hands you the text straight away.

People often write onPress={addHabit()} with brackets. That calls addHabit while the screen is being drawn, not when you tap. Pass the function itself, onPress={addHabit}, or wrap it in an arrow, onPress={() => addHabit(name)}.

When you read a form, find each TextInput and follow its onChangeText to a state variable. Then find the Pressable and read its onPress: that is what happens on a tap.

Words to recognise
PressableonPressTextInputonChangeTextplaceholder
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/components/AddHabit.jsx5 notes
1import { useState } from "react";
2import { Pressable, Text, TextInput, View } from "react-native";
3export default function AddHabit({ onAdd }) {
const [name, setName] = useState("");
Mentor note · line 4
name holds whatever is in the box right now. It starts empty.
5 function handleAdd() {
if (name.trim() === "") return;
7 onAdd(name.trim());
setName("");
9 }
10 return (
11 <View style={{ flexDirection: "row", gap: 8 }}>
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={handleAdd}><Text>Add</Text></Pressable>
14 </View>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  const [name, setName] = useState("");
3  return (
4    <View style={{ padding: 24, gap: 8 }}>
5      <TextInput value={name} onChangeText={setName} placeholder="Your name" />
6      <Text>Hello, {name}</Text>
7    </View>
8  );
9}
10// You tap the box and type R, a, f, i. You don't press Enter.
What happens while you type?
DrillFinish the "add a habit" box2 / 2
Typing a habit and tapping Add already puts it in the list. Make it nicer: clear the box after adding, ignore an empty box, and make the button lighter while your finger is on it.
1import { useState } from "react";
2import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
3 
4export default function App() {
5  const [name, setName] = useState("");
6  const [habits, setHabits] = useState(["Drink water", "Read 10 pages"]);

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenAfter you tap Add, the box is empty again.Tapping Add with an empty box (or only spaces) adds nothing.The button looks lighter while you hold it. Try style={({ pressed }) => [styles.button, pressed && { opacity: 0.6 }]}.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does onChangeText give your function?
  2. 2 / 3What is wrong with <Pressable onPress={addHabit()}>?
  3. 3 / 3You write <Pressable onPress={save}>Save</Pressable>. What is the problem?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Pressable and TextInput?

09 / 09

Done

You can now
Read a TextInput and a Pressable and say what happens when someone types and taps.
Next: Styling and flexbox on mobile Back to Phase 6
On this page
  1. 01Pressable and TextInput
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want a box where you type a new habit, like "Walk 20 minutes", and an "Add" button next to it. On a phone you need two things: a place to type, and something to tap.

Think of sending money in bKash. You type the amount into a box, and the screen shows each digit as you press it. Then you tap "Next", and only then does something happen. Typing and tapping are two separate jobs.

const [name, setName] = useState("");
 
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={() => console.log("Add", name)}>
  <Text>Add</Text>
</Pressable>
  • TextInput is the box you type into. onChangeText runs after every letter and gives you the whole text so far, as a plain string. Saving it in state with setName keeps the box and your state the same. placeholder is the grey hint shown while the box is empty.
  • Pressable is anything you can tap. onPress runs when the finger lifts. It has no look of its own, so you put a Text inside it and give it a style.
  • style on a Pressable can be a function: style={({ pressed }) => [styles.button, pressed && styles.down]}. pressed is true while the finger is down, so the button can change colour while you hold it.

On the web you wrote onChange and read e.target.value. onChangeText is simpler: it hands you the text straight away.

People often write onPress={addHabit()} with brackets. That calls addHabit while the screen is being drawn, not when you tap. Pass the function itself, onPress={addHabit}, or wrap it in an arrow, onPress={() => addHabit(name)}.

When you read a form, find each TextInput and follow its onChangeText to a state variable. Then find the Pressable and read its onPress: that is what happens on a tap.

Words to recognise
PressableonPressTextInputonChangeTextplaceholder

You want a box where you type a new habit, like "Walk 20 minutes", and an "Add" button next to it. On a phone you need two things: a place to type, and something to tap.

Think of sending money in bKash. You type the amount into a box, and the screen shows each digit as you press it. Then you tap "Next", and only then does something happen. Typing and tapping are two separate jobs.

const [name, setName] = useState("");
 
<TextInput value={name} onChangeText={setName} placeholder="New habit" />
<Pressable onPress={() => console.log("Add", name)}>
  <Text>Add</Text>
</Pressable>
  • TextInput is the box you type into. onChangeText runs after every letter and gives you the whole text so far, as a plain string. Saving it in state with setName keeps the box and your state the same. placeholder is the grey hint shown while the box is empty.
  • Pressable is anything you can tap. onPress runs when the finger lifts. It has no look of its own, so you put a Text inside it and give it a style.
  • style on a Pressable can be a function: style={({ pressed }) => [styles.button, pressed && styles.down]}. pressed is true while the finger is down, so the button can change colour while you hold it.

On the web you wrote onChange and read e.target.value. onChangeText is simpler: it hands you the text straight away.

People often write onPress={addHabit()} with brackets. That calls addHabit while the screen is being drawn, not when you tap. Pass the function itself, onPress={addHabit}, or wrap it in an arrow, onPress={() => addHabit(name)}.

When you read a form, find each TextInput and follow its onChangeText to a state variable. Then find the Pressable and read its onPress: that is what happens on a tap.

Words to recognise
PressableonPressTextInputonChangeTextplaceholder