Cool Bottom Toolbar - iOS Expo Router v7

PhotoDetail.tsx

import { Stack } from "expo-router";
import { useState } from "react";
import { Image, Text, View } from "react-native";

const SAMPLE_IMAGE = "https://picsum.photos/200";

export default function PhotoDetail() {
  const [liked, setLiked] = useState(false);

  return (
    <Stack.Screen options={{ title: "Photo Detail" }}>
      {/* ── Bottom toolbar ── */}
      <Stack.Toolbar placement="bottom">
        {/* Left: Share */}
        <Stack.Toolbar.Button onPress={() => {}} icon="square.and.arrow.up" />

        <Stack.Toolbar.Spacer />

        {/* Center group: heart · image thumbnail · menu */}
        <Stack.Toolbar.Button
          onPress={() => setLiked((prev) => !prev)}
          icon={liked ? "heart.fill" : "heart"}
        />
        <Stack.Toolbar.View>
          <Image
            source={{ uri: SAMPLE_IMAGE }}
            style={{ width: 36, height: 36, borderRadius: 9999 }}
          />
        </Stack.Toolbar.View>
        <Stack.Toolbar.Menu icon="ellipsis.circle">
          <Stack.Toolbar.Menu inline title="Actions">
            <Stack.Toolbar.MenuAction icon="heart" onPress={() => {}}>
              Favorite
            </Stack.Toolbar.MenuAction>
            <Stack.Toolbar.MenuAction icon="doc.on.doc" onPress={() => {}}>
              Copy
            </Stack.Toolbar.MenuAction>
            <Stack.Toolbar.MenuAction
              icon="arrow.down.to.line"
              onPress={() => {}}
            >
              Save to Photos
            </Stack.Toolbar.MenuAction>
          </Stack.Toolbar.Menu>
          <Stack.Toolbar.Menu inline title="Edit">
            <Stack.Toolbar.MenuAction icon="wand.and.stars" onPress={() => {}}>
              Enhance
            </Stack.Toolbar.MenuAction>
            <Stack.Toolbar.MenuAction icon="paintbrush" onPress={() => {}}>
              Edit with AI
            </Stack.Toolbar.MenuAction>
          </Stack.Toolbar.Menu>
          <Stack.Toolbar.MenuAction icon="trash" destructive onPress={() => {}}>
            Delete
          </Stack.Toolbar.MenuAction>
        </Stack.Toolbar.Menu>

        <Stack.Toolbar.Spacer />

        {/* Right: Delete */}
        <Stack.Toolbar.Button onPress={() => {}} icon="trash" />
      </Stack.Toolbar>

      {/* Screen content */}
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image
          source={{ uri: SAMPLE_IMAGE }}
          style={{ width: 300, height: 300, borderRadius: 16 }}
        />
        <Text style={{ marginTop: 16, fontSize: 16, color: "#888" }}>
          Tap the toolbar to interact
        </Text>
      </View>
    </Stack.Screen>
  );
}