State-Driven Button Interactions

In this lesson, you will learn how to make your interface responsive by using component state to trigger visual changes when a user interacts with a button.

The Concept of State-Driven UI

In React Native, an interface should be a reflection of your application's state. When building a button, we don't just want it to "do" something; we want it to "show" that it is being pressed. To achieve this, we use the useState hook to track the interaction status—such as whether a button is currently being held down—and update the component’s style accordingly.

Practical Implementation

The Pressable component is the standard primitive for these interactions. It provides specific "event hooks" like onPressIn and onPressOut. By toggling a state variable during these events, we can dynamically change the styles applied to the button.

Consider this example:

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

const InteractiveButton = () => {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <Pressable
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
      style={{
        backgroundColor: isPressed ? '#4A90E2' : '#2C3E50',
        padding: 20,
        borderRadius: 8,
      }}
    >
      <Text style={{ color: 'white' }}>
        {isPressed ? 'Hold it...' : 'Press Me!'}
      </Text>
    </Pressable>
  );
};

Why this matters

By linking the isPressed state to our styles, we create a direct visual connection between the user's touch and the screen's output. When onPressIn fires, we update the state to true, which React notices, causing the component to re-render with the updated blue background. When the finger lifts, onPressOut sets it back to false, reverting the color.

This pattern is the foundation for creating interfaces that feel alive, providing instant feedback for every touch event. It allows you to move beyond static layouts into truly reactive designs where the UI responds precisely to user intent.

Key Takeaway: Use the useState hook to track interaction events and map those states to your component's visual properties to create responsive, state-driven feedback.