Native Animated Bottom Tab Icons on iOS

icons.md

How to add Animated Bottom Tab Icons for iOS

Install expo-symbols.

Choose which symbols you want to use from SF Symbols.

Create a TabBarIcon.tsx:

import { SymbolView } from "expo-symbols";
import type { SymbolViewProps } from "expo-symbols";

type Props = {
  name: SymbolViewProps["name"];
  size: number;
  color: string;
  focused: boolean;
};

export function TabBarIcon({ name, size, color, focused }: Props) {
  return (
    <SymbolView
      name={name}
      type="hierarchical"
      size={size}
      tintColor={color}
      animationSpec={
        focused
          ? {
              effect: {
                type: "bounce",
              },
            }
          : {}
      }
    />
  );
}

Use it in your Tabs layout:

<Tabs.Screen
  // other props
  options={{
    // other options
    tabBarIcon: (props) => (
      <TabBarIcon
        {...props}
        name={
          props.focused
            ? "sparkles.rectangle.stack.fill"
            : "sparkles.rectangle.stack"
        }
      />
    ),
  }}
/>

What about Android?

SF symbols are native to iOS and aren't available on Android. But you can achieve a similar bounce effect using @expo/vector-icons and Reanimated.