Practice: State & Navigation Challenges

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Get a no-fear understanding of Practice: State & Navigation Challenges
Write the code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about it this way for a moment

This practice set steps up the difficulty — these tasks require combining state management, side effects, and navigation all at once.

Let's connect it to a real scenario

Three tasks: (1) Counter with limit — build a counter with useState, and add logic so the '+' button becomes disabled once count reaches 10; (2) Search + Navigation — search products by name with a TextInput, show the filtered results in a FlatList, and navigate to a Detail screen when an item is pressed; (3) Multi-screen form — type a name on Screen A, press 'Next' to move to Screen B while passing the data with navigation.navigate('ScreenB', { name }), then display route.params.name on Screen B.

Task 1: Counter with disabled-at-limit logic
Task 2: Search + filter + navigate to detail
Task 3: Multi-screen navigation with route params data-passing

Code Example

javascript

// Task 3 hint — passing data via route params
navigation.navigate('ScreenB', { name: inputValue });

// In ScreenB:
function ScreenB({ route }) {
  const { name } = route.params;
  return <Text>Hello, {name}!</Text>;
}

You should see

You'll finish all three tasks with an interactive, navigable screen.

5-Minute Try-It

Implement the three tasks yourself — Task 3 (route params) may be the toughest, so it's fine to go back and review the React Navigation lesson if you need to.

A Quick Word of Caution

Task 3's route params update when the screen gets re-mounted (i.e., when you call navigate again) — calling goBack() and then navigating back in behaves differently from pushing new params onto an existing screen, so make sure you can tell the two apart.

Easy traps

In Task 1, only changing the button's style for the disabled logic and forgetting to add the count < 10 check inside the actual onPress function
In Task 3, destructuring route.params without making sure the route prop is actually being passed into the component, causing an error

Now Try It Yourself

Implement the three tasks yourself — Task 3 (route params) may be the toughest, so it's fine to go back and review the React Navigation lesson if you need to.

You'll know it worked when: You'll finish all three tasks with an interactive, navigable screen.