12 Exercises to Learn React Native
Tags: beginners, reactnative, react, mobile
Published: 2020-10-06 14:47:37

---
title: '12 Exercises to Learn React Native'
published: true
description: 'Here are 12 exercises to help you better understand React Native'
tags: beginner, reactnative, react, mobile
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.reactnativeschool.com/12-exercises-to-learn-react-native
---


So you want to learn React Native? Here are 12 exercises to that will help you do that.

The post is inspired by a free self-paced workshop I've created. If you're interested in guided instructions, solutions, and extra exercises [check it out](https://www.youtube.com/watch?v=rLmdmLhfwvQ&feature=emb_title)!

<iframe width="560" height="315" src="https://www.youtube.com/embed/rLmdmLhfwvQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Exercise 1: Hello, World!

The classic starter project. Render a square with a background color. Inside of the square render the text "Hello, world".

### Helpful Links

- [React Native View Docs](https://reactnative.dev/docs/view)
- [React Native Text Docs](https://reactnative.dev/docs/text)

![e1](https://dev-to-uploads.s3.amazonaws.com/i/rjnkrax7k6axkpuzuzn7.png)
 

## Exercise 2: Capturing Taps

An app isn't much if a user can't interact with it. The most basic form of interaction is capturing a user's tap (or press) on a screen. Using the `Button` component, capture a tap event and `alert` "hello".

### Helpful Links

- [React Native Button Docs](https://reactnative.dev/docs/button)
- [React Native TouchableOpacity Docs](https://reactnative.dev/docs/touchableopacity)

![e2](https://dev-to-uploads.s3.amazonaws.com/i/d0s6waimd7sraca0nbom.png)

  

## Exercise 3: Custom Component

Previously we've been exclusively using component from React Native. But what about our creating our own? Build your own button component that accepts an `onPress` and `text` prop. Use the TouchableOpacity and Text components to accomplish this.

![e3](https://dev-to-uploads.s3.amazonaws.com/i/bkpg8qy0bc3grmazvgdq.png)

## Exercise 4: State & Props

We've taken a look at props previously - props allow us to pass data down to a component to interact with it. These props can be static values or dynamic (changing) ones. What we haven't used is state. State allows us to track changing values and update our UI automatically when they change.
hell
Using state track how many times a user presses the button and display that number.

### Helpful Links

- [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)

![e4](https://dev-to-uploads.s3.amazonaws.com/i/ir1t64zo9zc9hlm1849m.png)
 

## Exercise 5: Styling

If you're familiar with CSS-in-JS you should be able to fall right into styling in React Native as it follows the same principles. Create 3 squares that are vertically and horizontally centered. Each square should have a unique background color but all shared styles should only be defined once.

### Helpful Links

- [StyleSheet API Documentation](https://reactnative.dev/docs/stylesheet)
- [Layout with Flexbox](https://reactnative.dev/docs/flexbox)

![e5](https://dev-to-uploads.s3.amazonaws.com/i/kp4501i3jy6s2fwdhqsi.png)
 

## Exercise 6: Scrollable Content

Rarely does all of the content you want to display completely fit into the user's screen - that's where scrolling comes in. Render 15 squares in a scrollable list.

### Helpful Links

- [ScrollView Docs](https://reactnative.dev/docs/scrollview)
- [Explained: Each child in a list should have a unique "key" prop.](https://reactjs.org/docs/lists-and-keys.html#keys)

![e6](https://dev-to-uploads.s3.amazonaws.com/i/joj9rprdkxzy97nzhvap.png) 

## Exercise 7: Building a Form

Much like you would have an input in html, React Native has the TextInput component. The big difference between the two is that, with a TextInput, you get no styling with it - you're responsible for it all.

Using the `TextInput` component capture a user's name and, upon a button press, `alert` their name back to them. Add some style to the `TextInput` while you're there!

### Helpful Links

- [TextInput Docs](https://reactnative.dev/docs/textinput)

![e7](https://dev-to-uploads.s3.amazonaws.com/i/qxiwtxu8em7xxklcdulv.png)
 

## Exercise 8: Long Lists

When you have longs lists of data the ScrollView component won't cut it - it's just not built for it.

Render the array of people using the `FlatList` component.

### Helpful Links

- [FlatList](https://reactnative.dev/docs/flatlist#docsNav)
- [SectionList](https://reactnative.dev/docs/sectionlist#docsNav)

![e8](https://dev-to-uploads.s3.amazonaws.com/i/5tvlpblww4azx1zg9j9u.png)
 

## Exercise 9: Working with an API

Just like a web browser, React Native implements the `fetch` and `XMLHttpRequest` APIs. This means that the same logic and packages we would use to fetch data in a web browser will work in React Native.

Fetch data from the `https://randomuser.me/api/?results=100&inc=name` url (it returns JSON) and render it in the `FlatList`.

### Helpful Links

- [Fetch API Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [Promise Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [useEffect Hook Docs](https://reactjs.org/docs/hooks-reference.html#useeffect)
- [useState Hook Docs](https://reactjs.org/docs/hooks-reference.html#usestate)

![e9](https://dev-to-uploads.s3.amazonaws.com/i/41hk4515llajrzjqlvua.png)
 

## Exercise 10: Multiple Files

In React Native we leverage JavaScript Modules. These allow us to export code from one file and import it into another file.

Take the `Button` component and put it in it's own file then import the component from that file.

### Helpful Links

- [JavaScript modules in depth](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

![e10](https://dev-to-uploads.s3.amazonaws.com/i/euxvcbvzy7ewdylysly2.png)
 

## Exercise 11: Class Components

Throughout this workshop we've been using functional components. In reality, this is what you'll most likely be writing.

BUT they're a somewhat new concept. That means that some older tutorials/documentation will use the previous API - class components.

Using the `React.Component` render a screen that has a button. Count each time the button has been pressed and store it in state.

### Helpful Links

- [React.Component Docs](https://reactjs.org/docs/react-component.html)
- [JavaScript Class Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

![e11](https://dev-to-uploads.s3.amazonaws.com/i/jgekago75vc9juu8cef5.png) 

## Exercise 12: Component Lifecycle

A component has a lifecycle, much like we do.

They're born (mount).

Things change (update).

And then they die (unmount).

Sometimes we need to take actions based on where the component is in the lifecycle.

Upon component mount, start listening to the listener. Store in state how many times it has been called. When leaving the exercise screen and going back to the exercise list screen the listener should stop.

### Helpful Links

- [Effect Hook](https://reactjs.org/docs/hooks-overview.html#effect-hook)
- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)

![e12](https://dev-to-uploads.s3.amazonaws.com/i/79ul3ek4ut8ib176bxs8.png)
 

---

Good luck learning React Native!

You can watch the full workshop here:

<iframe width="560" height="315" src="https://www.youtube.com/embed/rLmdmLhfwvQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>