> Canonical URL: https://codingcat.dev/podcast/cwcc-1-expo-react-native

# Expo from a Web Developers View

![](https://i.ytimg.com/vi/xtj5wPgWuf4/sddefault.jpg)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=48&h=48&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Simon Grimm](https://cdn.sanity.io/images/hfh83o0w/production/4317219ac0c1f192d953db4954ff03c3cdb07aae-400x400.jpg?w=48&h=48&fit=max&auto=format)Simon Grimm](/guest/simon-grimm)December 18, 2023

## Listening Options

[Spotify](https://open.spotify.com/episode/2ybyPOUUy7amIG5uPUCFw9)[Apple](https://podcasts.apple.com/us/podcast/code-with-codingcat-dev-expo/id1491655542?i=1000660671020)[YouTube](https://youtube.com/live/xtj5wPgWuf4?feature=share)[Pocket Casts](https://pca.st/episode/a7b6f3cb-c289-473b-b94b-d5fd1316045a)[Castbox](https://castbox.fm/episode/id2508485-id715152594)[Castro](https://castro.fm/episode/miGvvs)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Introduction

Welcome to a live coding session where we build a [React Native](https://reactnative.dev/) mobile app from scratch using [Expo](https://expo.dev/)! My name is Alex and I'm joined by special guest Simon Grimm, an expert in React Native and mobile development.

In this extensive blog post, we will:

- Set up a React Native development environment with Expo
- Create UI components like buttons, images, links, scroll views etc.
- Implement routing and navigation between screens
- Fetch data and display it in the UI
- Open the camera and image library to select photos
- Deploy the app to mobile devices using Expo Go

So let's get started!

## Full Solution

## Setting up the Development Environment

First, we need to set up a React Native environment on our machines using Expo.

```
npx create-expo-app cat-app
```

This scaffolds a new React Native project for us called `cat-app`.

Inside the project, we have an `App.js` file along with other config files. This `App.js` renders the entry component for our app.

We can now start the Expo development server:

```
npx expo start
```

And voila! The app opens up in the iOS Simulator. Later, we'll also install the [Expo Go](https://expo.dev/client) app on an actual mobile device.

![](https://cdn.sanity.io/images/hfh83o0w/production/e94a9067a486683b4bd50d8c85a44b3e62eb04eb-1128x2302.png?rect=0,834,1128,635&w=1920&h=1080&fit=max&auto=format)

## Creating the Home Screen

Let's start building out the Home screen:

### Displaying the Cat Images

We want to fetch some cat images from an API and display them on the Home screen.

First, we fetch the cat images:

```
const fetchCats = async () => {
	const res = await fetch('https://cataas.com/cat?json=true');
	return res.json();
};
```

Then we store them in React state and display them in a ScrollView:

```
const index = () => {
	const [cats, setCats] = useState([]);
	useEffect(() => {
		loadCats();
	}, []);

	const loadCats = async () => {
		const data = await fetch('https://api.thecatapi.com/v1/images/search?limit=10');
		const cats: Cat[] = await data.json();
		setCats(cats);
	};
	return (

			{cats.map((cat) => (

- ))} ); }; ``` This will display the cat images in a nice scrollable view.We also added a "Load Cats" button to trigger fetching images: ``` ``` ### Adding Navigation Between Screens We want to navigate to a Details screen when a cat image is tapped.[Expo Router](https://docs.expo.dev/router/introduction/) makes navigation really easy. We simply wrap the `Image` component in a `Link` to link to the Details screen: ``` {cats.map(cat => ())} ``` Then we create a `details.js` screen that loads the specific cat details: ``` export default function Details() { const { id } = useParams(); const [image, setImage] = useState(); useEffect(() => { fetchCat(id).then(setImage); }, []); return {image && }; } ``` When you tap a cat image now, it seamlessly navigates to the Details screen with the tapped cat image loaded! ## Opening the Camera with Expo Finally, let's allow users to take or select photos using the camera. Expo makes accessing native device capabilities like camera super easy.We just install the expo-image-picker package: ``` npx expo install expo-image-picker ``` And import it in our Modal screen: ``` import * as ImagePicker from 'expo-image-picker'; export default function Modal() { const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync(); if (!result.cancelled) { setImage(result.uri); } }; return ; } ``` That's it! We can now open up the phone's image library, select images and handle them in our React Native code. ## Conclusion In this post, we:Created a React Native app with Expo CLI
- Built out Home, Details and Modal screens
- Added routing and navigation with Expo Router
- Fetched and displayed data from an API
- Opened up the camera picker using Expo APIs

As you can see, Expo simplifies React Native development tremendously allowing us to focus on the app code rather than native platform intricacies.

I hope you enjoyed this post and got an idea of building mobile apps with React Native and Expo! Let me know in [Discord](https://discord.com/invite/fRJTRjR) if you have any other questions.

## Episode Summary

Learn how to use Expo and React Native: How can you start creating Native Apps as a Web Developer?

00:00 Introducing Stream
01:28 Setting Up Project
04:53 Styling and Navigation
11:12 Debugging Tips
22:42 Expo Router Q&A
29:03 Using Expo Services
36:34 Building For Web
45:02 Modal and Camera API Demo
01:16:31 Wrapping Up

## Recent Podcasts

[View More](/podcasts/page/1)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&h=1080&q=80&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

November 19, 2025

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=48&h=48&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=48&h=48&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&h=1080&q=80&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

November 4, 2025

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=48&h=48&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=48&h=48&fit=max&auto=format)Max Gerber](/guest/max-gerber)