Theory

In React Native, state is a JavaScript object that stores a component's dynamic data and determines its behavior. State allows a component to keep track of information that can change over time, such as user input, API responses, or any other dynamic content.

Why do we need State?

State is essential when you want your component to be dynamic and respond to user interactions. For example, if you have a button that toggles a modal or a counter that increments on each button press, you need state to keep track of the current state of these elements.

Working with State

React Native state is used to manage dynamic data within a component. It allows components to have values that can change over time. Common use cases include:

• User Input: Capturing and updating user input (e.g., form fields, text input);
• Component Visibility: Toggling the visibility of certain elements;
• API Requests: Storing and updating data fetched from APIs;
• Dynamic UI: Handling changes in UI based on user interactions.

Example 1

Result 1

Example 2

Consider a scenario where we want to toggle the visibility of a component based on a button press.

In this example, the isVisible state determines whether the <Text> component is rendered. The button press toggles the visibility.

Result 2

In Practice