Animated SF Symbol Tabs Demo

A demo app showcasing animated SF Symbol tab icons using react-native-bottom-tabs with per-tab icon effects.

Features

• Native iOS bottom tab bar with SF Symbols
• Per-tab icon animations (wiggle, bounce, scale)
• iOS 17+ symbol effects support

Built With

• One.js - Universal React framework
• A custom fork of react-native-bottom-tabs - Native bottom tabs. See fork
• Tamagui - UI components
• React Native 0.81

Setup

This project uses a local installation of a custom fork of react-native-bottom-tabs. To run this project, you'll need to clone the fork alongside this repo:

# Clone this repo
git clone https://github.com/DaveyEke/animatedsymbol.git

# Clone the fork in the same parent directory
git clone https://github.com/DaveyEke/react-native-bottom-tabs.git

# Your folder structure should look like:
# parent/
#   animatedsymbol/
#   react-native-bottom-tabs/

# Install dependencies in the fork
cd react-native-bottom-tabs
npm install
npm run build

# Install dependencies in this project
cd ../animatedsymbol
npm install

NOTE: You can use an AI agent like Claude to help set up the vite.config.ts(for One) or the metro.config.js(Expo/Bare RN) to make this work in your own project.

Developing

npm one dev

Running on iOS

npm one run:ios

Production

Web

npm one build:web

iOS

First, generate native code:

npm one prebuild:native