novahiz 0.2.2 → 0.2.5

package/bundled-skills/expo-router/references/toolbar-and-headers.md

@@ -1,284 +0,0 @@
-# Toolbars and headers
-
-Add native iOS toolbar items to Stack screens. Items can be placed in the header (left/right) or in a bottom toolbar area.
-
-**Important:** iOS only. Available in Expo SDK 55+.
-
-## Notes app example
-
-```tsx
-import { Stack } from "expo-router";
-import { ScrollView } from "react-native";
-
-export default function FoldersScreen() {
-  return (
-    <>
-      {/* ScrollView must be the first child of the screen */}
-      <ScrollView
-        style={{ flex: 1 }}
-        contentInsetAdjustmentBehavior="automatic"
-      >
-        {/* Screen content */}
-      </ScrollView>
-      <Stack.Screen.Title large>Folders</Stack.Screen.Title>
-      <Stack.SearchBar placeholder="Search" onChangeText={() => {}} />
-      {/* Header toolbar - right side */}
-      <Stack.Toolbar placement="right">
-        <Stack.Toolbar.Button icon="folder.badge.plus" onPress={() => {}} />
-        <Stack.Toolbar.Button onPress={() => {}}>Edit</Stack.Toolbar.Button>
-      </Stack.Toolbar>
-
-      {/* Bottom toolbar */}
-      <Stack.Toolbar placement="bottom">
-        <Stack.Toolbar.SearchBarSlot />
-        <Stack.Toolbar.Button
-          icon="square.and.pencil"
-          onPress={() => {}}
-          separateBackground
-        />
-      </Stack.Toolbar>
-    </>
-  );
-}
-```
-
-## Mail inbox example
-
-```tsx
-import { Color, Stack } from "expo-router";
-import { useState } from "react";
-import { ScrollView, Text, View } from "react-native";
-
-export default function InboxScreen() {
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-  return (
-    <>
-      <ScrollView
-        style={{ flex: 1 }}
-        contentInsetAdjustmentBehavior="automatic"
-        contentContainerStyle={{ paddingHorizontal: 16 }}
-      >
-        {/* Screen content */}
-      </ScrollView>
-      <Stack.Screen options={{ headerTransparent: true }} />
-      <Stack.Screen.Title>Inbox</Stack.Screen.Title>
-      <Stack.SearchBar placeholder="Search" onChangeText={() => {}} />
-      {/* Header toolbar - right side */}
-      <Stack.Toolbar placement="right">
-        <Stack.Toolbar.Button onPress={() => {}}>Select</Stack.Toolbar.Button>
-        <Stack.Toolbar.Menu icon="ellipsis">
-          <Stack.Toolbar.Menu inline>
-            <Stack.Toolbar.Menu inline title="Sort By">
-              <Stack.Toolbar.MenuAction isOn>
-                Categories
-              </Stack.Toolbar.MenuAction>
-              <Stack.Toolbar.MenuAction>List</Stack.Toolbar.MenuAction>
-            </Stack.Toolbar.Menu>
-            <Stack.Toolbar.MenuAction icon="info.circle">
-              About categories
-            </Stack.Toolbar.MenuAction>
-          </Stack.Toolbar.Menu>
-          <Stack.Toolbar.MenuAction icon="person.circle">
-            Show Contact Photos
-          </Stack.Toolbar.MenuAction>
-        </Stack.Toolbar.Menu>
-      </Stack.Toolbar>
-
-      {/* Bottom toolbar */}
-      <Stack.Toolbar placement="bottom">
-        <Stack.Toolbar.Button
-          icon="line.3.horizontal.decrease"
-          selected={isFilterOpen}
-          onPress={() => setIsFilterOpen((prev) => !prev)}
-        />
-        <Stack.Toolbar.View hidden={!isFilterOpen}>
-          <View style={{ width: 70, height: 32, justifyContent: "center" }}>
-            <Text style={{ fontSize: 12, fontWeight: 700 }}>Filter by</Text>
-            <Text
-              style={{
-                fontSize: 12,
-                fontWeight: 700,
-                color: Color.ios.systemBlue,
-              }}
-            >
-              Unread
-            </Text>
-          </View>
-        </Stack.Toolbar.View>
-        <Stack.Toolbar.Spacer />
-        <Stack.Toolbar.SearchBarSlot />
-        <Stack.Toolbar.Button
-          icon="square.and.pencil"
-          onPress={() => {}}
-          separateBackground
-        />
-      </Stack.Toolbar>
-    </>
-  );
-}
-```
-
-## Placement
-
-- `"left"` - Header left
-- `"right"` - Header right
-- `"bottom"` (default) - Bottom toolbar
-
-## Components
-
-### Button
-
-- Icon button: `<Stack.Toolbar.Button icon="star.fill" onPress={() => {}} />`
-- Text button: `<Stack.Toolbar.Button onPress={() => {}}>Done</Stack.Toolbar.Button>`
-
-**Props:** `icon`, `image`, `onPress`, `disabled`, `hidden`, `variant` (`"plain"` | `"done"` | `"prominent"`), `tintColor`
-
-### Menu
-
-Dropdown menu for grouping actions.
-
-```tsx
-<Stack.Toolbar.Menu icon="ellipsis">
-  <Stack.Toolbar.Menu inline>
-    <Stack.Toolbar.MenuAction>Sort by Recently Added</Stack.Toolbar.MenuAction>
-    <Stack.Toolbar.MenuAction isOn>
-      Sort by Date Captured
-    </Stack.Toolbar.MenuAction>
-  </Stack.Toolbar.Menu>
-  <Stack.Toolbar.Menu title="Filter">
-    <Stack.Toolbar.Menu inline>
-      <Stack.Toolbar.MenuAction isOn icon="square.grid.2x2">
-        All Items
-      </Stack.Toolbar.MenuAction>
-    </Stack.Toolbar.Menu>
-    <Stack.Toolbar.MenuAction icon="heart">Favorites</Stack.Toolbar.MenuAction>
-    <Stack.Toolbar.MenuAction icon="photo">Photos</Stack.Toolbar.MenuAction>
-    <Stack.Toolbar.MenuAction icon="video">Videos</Stack.Toolbar.MenuAction>
-  </Stack.Toolbar.Menu>
-</Stack.Toolbar.Menu>
-```
-
-**Menu Props:** All Button props plus `title`, `inline`, `palette`, `elementSize` (`"small"` | `"medium"` | `"large"`)
-
-**MenuAction Props:** `icon`, `onPress`, `isOn`, `destructive`, `disabled`, `subtitle`
-
-When creating a palette with dividers, use `inline` combined with `elementSize="small"`. `palette` will not apply dividers on iOS 26.
-
-### Spacer
-
-```tsx
-<Stack.Toolbar.Spacer />           // Bottom toolbar - flexible
-<Stack.Toolbar.Spacer width={16} /> // Header - requires explicit width
-```
-
-### View
-
-Embed custom React Native components. When adding a custom view make sure that there is only a single child with **explicit width and height**.
-
-```tsx
-<Stack.Toolbar.View>
-  <View style={{ width: 70, height: 32, justifyContent: "center" }}>
-    <Text style={{ fontSize: 12, fontWeight: 700 }}>Filter by</Text>
-  </View>
-</Stack.Toolbar.View>
-```
-
-You can pass custom components to views as well:
-
-```tsx
-function CustomFilterView() {
-  return (
-    <View style={{ width: 70, height: 32, justifyContent: "center" }}>
-      <Text style={{ fontSize: 12, fontWeight: 700 }}>Filter by</Text>
-    </View>
-  );
-}
-...
-<Stack.Toolbar.View>
-  <CustomFilterView />
-</Stack.Toolbar.View>
-```
-
-## Recommendations
-
-- When creating more complex headers, extract them to a single component
-
-```tsx
-export default function Page() {
-  return (
-    <>
-      <ScrollView>{/* Screen content */}</ScrollView>
-      <InboxHeader />
-    </>
-  );
-}
-
-function InboxHeader() {
-  return (
-    <>
-      <Stack.Screen.Title>Inbox</Stack.Screen.Title>
-      <Stack.SearchBar placeholder="Search" onChangeText={() => {}} />
-      <Stack.Toolbar placement="right">{/* Toolbar buttons */}</Stack.Toolbar>
-    </>
-  );
-}
-```
-
-- When using `Stack.Toolbar`, make sure that all `Stack.Toolbar.*` components are wrapped inside `Stack.Toolbar` component.
-
-This will **not work**:
-
-```tsx
-function Buttons() {
-  return (
-    <>
-      <Stack.Toolbar.Button icon="star.fill" onPress={() => {}} />
-      <Stack.Toolbar.Button onPress={() => {}}>Done</Stack.Toolbar.Button>
-    </>
-  );
-}
-
-function Page() {
-  return (
-    <>
-      <ScrollView>{/* Screen content */}</ScrollView>
-      <Stack.Toolbar placement="right">
-        <Buttons /> {/* ❌ This will NOT work */}
-      </Stack.Toolbar>
-    </>
-  );
-}
-```
-
-This will work:
-
-```tsx
-function ToolbarWithButtons() {
-  return (
-    <Stack.Toolbar>
-      <Stack.Toolbar.Button icon="star.fill" onPress={() => {}} />
-      <Stack.Toolbar.Button onPress={() => {}}>Done</Stack.Toolbar.Button>
-    </Stack.Toolbar>
-  );
-}
-
-function Page() {
-  return (
-    <>
-      <ScrollView>{/* Screen content */}</ScrollView>
-      <ToolbarWithButtons /> {/* ✅ This will work */}
-    </>
-  );
-}
-```
-
-## Limitations
-
-- iOS only
-- `placement="bottom"` can only be used inside screen components (not in layout files)
-- `Stack.Toolbar.Badge` only works with `placement="left"` or `"right"`
-- Header Spacers require explicit `width`
-
-## Reference
-
-Docs https://docs.expo.dev/versions/unversioned/sdk/router - read to see the full API.

package/bundled-skills/expo-router/references/zoom-transitions.md

@@ -1,158 +0,0 @@
-# Apple Zoom Transitions
-
-Fluid zoom transitions for navigating between screens. iOS 18+, Expo SDK 55+, Stack navigator only.
-
-```tsx
-import { Link } from "expo-router";
-```
-
-## Basic Zoom
-
-Use `withAppleZoom` on `Link.Trigger` to zoom the entire trigger element into the destination screen:
-
-```tsx
-<Link href="/photo" asChild>
-  <Link.Trigger withAppleZoom>
-    <Pressable>
-      <Image
-        source={{ uri: "https://example.com/thumb.jpg" }}
-        style={{ width: 120, height: 120, borderRadius: 12 }}
-      />
-    </Pressable>
-  </Link.Trigger>
-</Link>
-```
-
-## Targeted Zoom with `Link.AppleZoom`
-
-Wrap only the element that should animate. Siblings outside `Link.AppleZoom` are not part of the transition:
-
-```tsx
-<Link href="/photo" asChild>
-  <Link.Trigger>
-    <Pressable style={{ alignItems: "center" }}>
-      <Link.AppleZoom>
-        <Image
-          source={{ uri: "https://example.com/thumb.jpg" }}
-          style={{ width: 200, aspectRatio: 4 / 3 }}
-        />
-      </Link.AppleZoom>
-      <Text>Caption text (not zoomed)</Text>
-    </Pressable>
-  </Link.Trigger>
-</Link>
-```
-
-`Link.AppleZoom` accepts only a single child element.
-
-## Destination Target
-
-Use `Link.AppleZoomTarget` on the destination screen to align the zoom animation to a specific element:
-
-```tsx
-// Destination screen (e.g., app/photo.tsx)
-import { Link } from "expo-router";
-
-export default function PhotoScreen() {
-  return (
-    <View style={{ flex: 1 }}>
-      <Link.AppleZoomTarget>
-        <Image
-          source={{ uri: "https://example.com/full.jpg" }}
-          style={{ width: "100%", aspectRatio: 4 / 3 }}
-        />
-      </Link.AppleZoomTarget>
-      <Text>Photo details below</Text>
-    </View>
-  );
-}
-```
-
-Without a target, the zoom animates to fill the entire destination screen.
-
-## Custom Alignment Rectangle
-
-For manual control over where the zoom lands on the destination, use `alignmentRect` instead of `Link.AppleZoomTarget`:
-
-```tsx
-<Link.AppleZoom alignmentRect={{ x: 0, y: 0, width: 200, height: 300 }}>
-  <Image source={{ uri: "https://example.com/thumb.jpg" }} />
-</Link.AppleZoom>
-```
-
-Coordinates are in the destination screen's coordinate space. Prefer `Link.AppleZoomTarget` when possible — use `alignmentRect` only when the target element isn't available as a React component.
-
-## Controlling Dismissal
-
-Zoom screens support interactive dismissal gestures by default (pinch, swipe down when scrolled to top, swipe from leading edge). Use `usePreventZoomTransitionDismissal` on the destination screen to control this.
-
-### Disable all dismissal gestures
-
-```tsx
-import { usePreventZoomTransitionDismissal } from "expo-router";
-
-export default function PhotoScreen() {
-  usePreventZoomTransitionDismissal();
-  return <Image source={{ uri: "https://example.com/full.jpg" }} />;
-}
-```
-
-### Restrict dismissal to a specific area
-
-Use `unstable_dismissalBoundsRect` to prevent conflicts with scrollable content:
-
-```tsx
-usePreventZoomTransitionDismissal({
-  unstable_dismissalBoundsRect: {
-    minX: 0,
-    minY: 0,
-    maxX: 300,
-    maxY: 300,
-  },
-});
-```
-
-This is useful when the destination contains a zoomable scroll view — the system gives that scroll view precedence over the dismiss gesture.
-
-## Combining with Link.Preview
-
-Zoom transitions work alongside long-press previews:
-
-```tsx
-<Link href="/photo" asChild>
-  <Link.Trigger withAppleZoom>
-    <Pressable>
-      <Image
-        source={{ uri: "https://example.com/thumb.jpg" }}
-        style={{ width: 120, height: 120 }}
-      />
-    </Pressable>
-  </Link.Trigger>
-  <Link.Preview />
-</Link>
-```
-
-## Best Practices
-
-**Good use cases:**
-- Thumbnail → full image (gallery, profile photos)
-- Card → detail screen with similar visual content
-- Source and destination with similar aspect ratios
-
-**Avoid:**
-- Skinny full-width list rows as zoom sources — the transition looks unnatural
-- Mismatched aspect ratios between source and destination without `alignmentRect`
-- Using zoom with sheets or popovers — only works in Stack navigator
-- Hiding the navigation bar — known issues with header visibility during transitions
-
-**Tips:**
-- Always provide a close or back button — dismissal gestures are not discoverable
-- If the destination has a zoomable scroll view, use `unstable_dismissalBoundsRect` to avoid gesture conflicts
-- Source view doesn't need to match the tap target — only the `Link.AppleZoom` wrapped element animates
-- When source is unavailable (e.g., scrolled off screen), the transition zooms from the center of the screen
-
-## References
-
-- Expo Router Zoom Transitions: https://docs.expo.dev/router/advanced/zoom-transition/
-- Link.AppleZoom API: https://docs.expo.dev/versions/v55.0.0/sdk/router/#linkapplezoom
-- Apple UIKit Fluid Transitions: https://developer.apple.com/documentation/uikit/enhancing-your-app-with-fluid-transitions