Component

Blob Tab Bar

An Instagram-style bottom tab bar with a sliding highlight pill.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Tabs.tsx

import { useState } from "react";
import { Text } from "react-native";
import { BlobTabBar, type BlobTab } from "react-native-foonto";

const TABS: BlobTab[] = [
  { key: "home", icon: (active) => <Text style={{ opacity: active ? 1 : 0.4 }}>🏠</Text> },
  { key: "search", icon: (active) => <Text style={{ opacity: active ? 1 : 0.4 }}>🔍</Text> },
  { key: "profile", icon: (active) => <Text style={{ opacity: active ? 1 : 0.4 }}>👤</Text> },
];

export function Tabs() {
  const [active, setActive] = useState("home");
  return <BlobTabBar tabs={TABS} activeKey={active} onChange={setActive} />;
}

Props

Prop	Type	Default	Description
`tabs`req	`BlobTab[]`	—	Tabs ({ key, label?, icon?(active) }).
`activeKey`req	`string`	—	Key of the active tab (controlled).
`onChange`req	`(key: string) => void`	—	Called with the tapped tab's key.
`indicatorIndex`	`SharedValue<number>`	—	Fractional tab index (e.g. a pager's scroll) the pill follows live.
`color`	`string`	'#111111'	Active icon/label color.
`inactiveColor`	`string`	'#9ca3af'	Inactive icon/label color.
`pillColor`	`string`	'rgba(0,0,0,0.06)'	Highlight pill color.
`pillWidthRatio`	`number`	0.82	Pill width as a fraction of a tab.
`pillRadius`	`number`	999	Pill corner radius (999 = capsule).
`background`	`string`	'rgba(255,255,255,0.8)'	Bar background.
`height`	`number`	60	Bar height in px.
`style`	`FoontoStyle`	—	Style for the bar.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add an Instagram-style bottom tab bar using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `BlobTabBar` (and the `BlobTab` type) from `react-native-foonto`.
3. Define a `tabs` array of `{ key, icon: (active) => <YourIcon /> }` (Tabler icons work great).
4. Track the active key with `useState` and pass `activeKey` + `onChange`.
5. To sync the pill with swipeable pages, render a horizontal paging ScrollView, track scrollX, and pass `indicatorIndex = scrollX / pageWidth` so the pill follows the swipe.