Adding habits to your app is just the start. Understanding what happens when you press a button and how to make a list scrollable is what turns a basic screen into a usable interface. Here you will learn how to build a reusable PrimaryButton in React Native, why Pressable beats TouchableOpacity, and how to wrap your content in a ScrollView to display every habit you add.

Why should you use Pressable instead of TouchableOpacity?

Both components react to taps, but they behave differently under the hood. Pressable gives you full control over the press lifecycle, while TouchableOpacity only animates opacity when tapped.

When you log a Pressable interaction, you can see two distinct states: press in when the finger touches the screen, and press out when it lifts. TouchableOpacity skips that granularity and limits you to a visual fade.

What is Pressable in React Native? It is a core component that detects press states (in, out, long press) and lets you customize styles and feedback for each one, giving you more control than TouchableOpacity.

That is why a reusable button in a habit tracker app should rely on Pressable: you get richer feedback and cleaner state handling [02:10].

How do you create a reusable PrimaryButton component?

The goal is a single button you can drop into any screen, with props that adapt its behavior. Create a file called PrimaryButton.tsx and define the props it needs.

The component receives four props:

• title as a string for the button label.
• onPress as a function that runs when the user taps it.
• disabled as a boolean to deactivate the button when needed.
• style to extend the visual appearance from outside.

Inside the component, return a Pressable and assign:

• role set to button for accessibility.
• aria-label mapped to the title prop.
• disabled connected to the prop of the same name.
• onPress wired to the function passed in.

For styling, import StyleSheet from React Native at the top of the file. Set a minimum height, minimum width, padding for breathing room, and center the content so the label sits in the middle of the button [04:20].

How do you replace a Pressable with your PrimaryButton in the home screen?

Once the component is ready, head to your index file and find the existing Pressable you used to add habits. Swap it for your new PrimaryButton.

Pass the props it expects:

• title equal to "Añadir" or whatever label fits your UI.
• onPress connected to your addHabit function.

Save the file and the button now triggers the same logic as before, but with the cleaner API of a reusable component. From here, any screen that needs a primary action can import the same button and stay visually consistent.

When should I build a reusable button? As soon as you repeat the same button style or behavior in two screens. A single component keeps styles, accessibility, and logic in one place.

How do you make a habit list scrollable with ScrollView?

As you add more habits, some of them disappear below the fold. The fix is to replace the outer View with a ScrollView imported directly from React Native, not from the gesture handler library [07:15].

A ScrollView gives you a few useful props worth tuning:

• showsVerticalScrollIndicator set to false hides the side bar while scrolling.
• contentContainerStyle lets you apply layout styles to the inner content, replacing the styles you had on the old View.

Inside contentContainerStyle, two values make a clear difference:

• paddingBottom of 32 to leave space at the end of the list.
• gap of 16 to separate each habit card vertically.

What is the difference between style and contentContainerStyle in ScrollView? style applies to the scroll container itself, while contentContainerStyle applies to the wrapper around the children. Use the second one for padding and gaps between items.

With this setup, you can keep adding habit cards and scroll through every one of them without losing access to the bottom of the list.

What did you build in this lesson?

You now have a PrimaryButton powered by Pressable, with props for title, onPress, disabled, and custom styles. You also wrapped your habit list in a ScrollView with hidden indicator, bottom padding, and consistent spacing between cards.

The next step is creating a suggested habits component to give users ideas when they open the app. Have you tried building your own reusable button yet? Share in the comments which props you would add to make it fit your project.