Master SF Symbols in React Native with Expo Symbols | Code with Beto

Learn how to build a symbols lab app using the new Expo Symbols library, which provides access to Apple's SF Symbols on iOS devices in React Native. You'll learn how to set up a fresh Expo project with Expo Router, installing dependencies, and preparing a development build for native iOS support.

You'll learn how to display a searchable list of SF Symbols, customize their appearance with colors, weights, and palettes, and animate them smoothly using native iOS features. I also explain handling light and dark mode compatibility and fallback options for Android.

What's inside

Introduction to Expo Symbols and SF Symbols for iOS
Setting up a new Expo project with Expo Router
Installing Expo Symbols and React Native Segmented Control
Creating a development build for native iOS support
Organizing the project structure and removing unused tabs
Displaying a list of SF Symbols with FlatList
Adding a search bar in the header to filter symbols
Customizing symbol appearance and animations

Introduction to Expo Symbols and SF Symbols for iOS

Expo Symbols is a new Expo library that wraps Apple's SF Symbols, a set of icons designed for iOS platforms. These symbols are native to iOS, so using them in React Native apps provides smooth, performant icons that integrate well with the system.

I explain that Apple releases these symbols for iOS devices, and Expo Symbols lets you easily use them in your React Native projects. This approach leverages native rendering, resulting in smooth animations and native look-and-feel.

Setting up a new Expo project with Expo Router

The demo starts by creating a new Expo app using the latest template, which includes Expo Router for navigation. The command used is . Expo Router simplifies navigation setup and supports features like header search bars out of the box.

After creating the project, I show how to open it in VS Code and prepare it for further development.

Installing Expo Symbols and React Native Segmented Control

Two main dependencies are installed: for the SF Symbols integration, and to manage segmented UI controls for options like symbol weight or color.

The segmented control library requires a development build of the Expo app because it uses native code. I install these with .

Creating a development build for native iOS support

Since Expo Symbols and the segmented control require native modules, I explain how to create a development build using . This generates native iOS and Android folders.

The build is run specifically on iOS because SF Symbols are native to iOS. I note that Android support requires fallback solutions, which are covered later.

Running launches the app in the iOS simulator to test native features.

Organizing the project structure and removing unused tabs

The starter template includes tabs and layouts that are not needed for this demo. I deletes these to simplify the project.

It also explains the folder structure: the folder contains navigation and screens, assets hold fonts and images, and components include reusable UI parts. The template includes themed and components for automatic light/dark mode support.

Displaying a list of SF Symbols with FlatList

I import a large array of symbol names from a local file. To avoid performance issues, the array is sliced to a smaller subset during development.

Using React Native's , the app renders the symbol names as a scrollable list. Each item is displayed with a themed text component.

This approach provides a simple way to browse all available SF Symbols in the app.

Adding a search bar in the header to filter symbols

Expo Router allows adding a search bar in the screen header via . I sets up an handler to update a state variable with the user's input.

The symbol list is filtered based on the search text, enabling quick lookup of specific symbols by name.

This integration shows how to combine Expo Router's header search with React Native state management for a smooth user experience.

Customizing symbol appearance and animations

I demonstrate how to customize SF Symbols by changing their weight, color, and palette. For example, you can select multicolor variants or apply an array of colors.

Animations are also covered: symbols can be animated natively with options to scale, repeat, or disable animation. These animations are smooth because they use iOS native features rather than JavaScript-driven loops.

The segmented control UI helps toggle these customization options interactively.

Resources

CourseReact Native course

Master React Native with TypeScript, Expo Router, and the latest frameworks.

Premium resourcePro Membership

Get access to exclusive React Native tutorials and projects.

Let's connect!