convex-feedback-ui 0.1.2 → 0.1.3

package/dist/shared/types/screen.d.ts

@@ -2,7 +2,6 @@ import type { CommentSort, EntryKind, EntrySort, FeedbackComment, FeedbackEntry
 import type { FeedbackHooks } from "convex-feedback/react";
 import type { ReactNode } from "react";
 import type { FeedbackColorProps, FeedbackProviderProps } from "./context.js";
-import type { Require } from "./helpers.js";
 /**
  * Presentation-only transform applied to one currently loaded comment page.
  *
@@ -17,7 +16,19 @@ export type FeedbackCommentTransform = (comments: readonly FeedbackComment[]) =>
  * owned by the host application.
  */
 export type FeedbackActorRenderer = (actorId: string) => ReactNode;
-export interface FeedbackScreenBaseProps extends FeedbackColorProps {
+export interface FeedbackScreenTransformationProps {
+    /**
+     * Optional presentation-only transform applied to each loaded page of
+     * comments/replies before rendering.
+     */
+    transformComments?: FeedbackCommentTransform;
+    /**
+     * Optional host renderer for actor IDs, useful for names, avatars, or other
+     * host-owned profile information.
+     */
+    renderActor?: FeedbackActorRenderer;
+}
+export interface FeedbackScreenBaseProps {
     /** Hooks created with `createFeedbackHooks`. */
     hooks: FeedbackHooks;
     /**
@@ -52,44 +63,70 @@ export interface FeedbackScreenBaseProps extends FeedbackColorProps {
      */
     maxCommentDepth?: number;
     /**
-     * Optional presentation-only transform applied to each loaded page of
-     * comments/replies before rendering.
+     * Duration in milliseconds to wait before triggering a search.
+     *
+     * @default 300
      */
-    transformComments?: FeedbackCommentTransform;
-    /**
-     * Optional host renderer for actor IDs, useful for names, avatars, or other
-     * host-owned profile information.
+    debounceDuration?: number;
+}
+export interface FeedbackScreenRootProps extends Omit<FeedbackProviderProps, "children">, FeedbackColorProps, FeedbackScreenBaseProps, FeedbackScreenTransformationProps {
+}
+export interface FeedbackScreenProviderProps extends Required<FeedbackScreenBaseProps>, FeedbackScreenTransformationProps {
+}
+export interface FeedbackScreenBodyContextValue extends FeedbackScreenTransformationProps, FeedbackScreenProviderProps {
+    query: string;
+    debouncedQuery: string;
+    showForm: boolean;
+    isSearching: boolean;
+    selectedEntryId: string | null;
+    setQuery: React.Dispatch<React.SetStateAction<string>>;
+    setDebouncedQuery: React.Dispatch<React.SetStateAction<string>>;
+    setShowForm: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
+    setSelectedEntryId: React.Dispatch<React.SetStateAction<string | null>>;
+}
+export type FeedbackScreenBodyProps = FeedbackColorProps;
+export interface FeedbackScreenListProps {
+    /** Whether to show the header.
+     *  @default true
      */
-    renderActor?: FeedbackActorRenderer;
+    showHeader?: boolean;
+    /** Whether to hide the back button from the EntryCard.
+     *  @default false
+     */
+    hideBackButton?: boolean;
+    /** Callback when the EntryCard is opened. */
+    onEntryOpen: (entryId: string) => void;
 }
-export interface FeedbackScreenRootProps extends Omit<FeedbackProviderProps, "children">, FeedbackScreenBaseProps {
+export interface FeedbackScreenContentProps extends FeedbackColorProps, Partial<FeedbackScreenListProps> {
 }
-export type FeedbackScreenBodyProps = Require<FeedbackScreenBaseProps, "entrySort" | "commentSort" | "enabledKinds" | "maxCommentDepth">;
 export interface FeedbackScreenEntryCardProps {
     entry: FeedbackEntry;
     hooks: FeedbackHooks;
+    /** Callback when the EntryCard is opened. */
     onOpen: () => void;
 }
 export interface FeedbackScreenEntryModalProps {
-    hooks: FeedbackHooks;
-    enabledKinds: readonly EntryKind[];
+    /** Callback when an entry is created. */
     onCreated: (id: string) => void;
 }
 export interface FeedbackScreenEntryBaseProps {
+    /** The entry ID to open. */
     entryId: string;
-    hooks: FeedbackHooks;
-    commentSort: CommentSort;
-    maxCommentDepth: number;
-    transformComments?: FeedbackScreenBaseProps["transformComments"];
-    renderActor?: FeedbackScreenBaseProps["renderActor"];
 }
 export interface FeedbackScreenEntryDetailProps extends FeedbackScreenEntryBaseProps {
+    /** Whether to hide the back button from the EntryCard.
+     *  @default false
+     */
+    hideBackButton?: boolean;
+    /** Callback when the EntryCard is closed. */
     onBack: () => void;
 }
 export interface FeedbackScreenCommentBranchProps extends FeedbackScreenEntryBaseProps {
     comment: FeedbackComment;
 }
 export interface FeedbackScreenReplyListProps extends FeedbackScreenEntryBaseProps {
+    /** The parent comment ID of the reply list. */
     parentCommentId: string;
 }
 //# sourceMappingURL=screen.d.ts.map

package/dist/shared/types/screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/shared/types/screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG,CACrC,QAAQ,EAAE,SAAS,eAAe,EAAE,KACjC,SAAS,eAAe,EAAE,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,SAAS,CAAC;AAEnE,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,gDAAgD;IAChD,KAAK,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAEpC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;IAE7C;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,uBAAuB;CAAG;AAE7E,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,uBAAuB,EACvB,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,iBAAiB,CACjE,CAAC;AAEF,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,aAAa,CAAC;IACrB,YAAY,EAAE,SAAS,SAAS,EAAE,CAAC;IACnC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,8BAA+B,SAAQ,4BAA4B;IAClF,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,gCAAiC,SAAQ,4BAA4B;IACpF,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA6B,SAAQ,4BAA4B;IAChF,eAAe,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/shared/types/screen.ts"],"names":[],"mappings":"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"}

package/dist/shared/types/theme.d.ts

@@ -4,6 +4,10 @@
 export interface FeedbackColors {
     /** Primary interaction and accent color. */
     primary: string;
+    /**
+     * Foreground color for primary interactions and accents.
+     */
+    primaryForeground: string;
     /** Main screen or board background color. */
     background: string;
     /** Default card and control surface color. */

package/dist/shared/types/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAEhB,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAC;IAErB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IAEb,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IAEf,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,MAAM,EAAE,cAAc,CAAC;IAEvB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IAEf,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAE7C,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAE1B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAC;IAErB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IAEb,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IAEf,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,MAAM,EAAE,cAAc,CAAC;IAEvB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IAEf,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAE7C,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "convex-feedback-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Customizable React and React Native UI primitives for convex-feedback.",
   "license": "Apache-2.0",
   "type": "module",
@@ -17,13 +17,13 @@
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
-    "./react": {
-      "types": "./dist/react/index.d.ts",
-      "default": "./dist/react/index.js"
-    },
     "./native": {
-      "types": "./dist/native/index.d.ts",
-      "default": "./dist/native/index.js"
+      "types": "./dist/native/native/index.d.ts",
+      "default": "./dist/native/native/index.js"
+    },
+    "./expo": {
+      "types": "./dist/native/expo/index.d.ts",
+      "default": "./dist/native/expo/index.js"
     },
     "./styles.css": "./dist/react/styles.css"
   },
@@ -37,9 +37,12 @@
   },
   "peerDependencies": {
     "convex-feedback": "^0.1.0",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-native": "^0.83.0",
-    "react-native-safe-area-context": "^4.5.3"
+    "react": ">=18.2.0",
+    "react-native": ">=0.83.0",
+    "react-native-safe-area-context": ">=5.4.0",
+    "react-native-screens": ">=4.23.0",
+    "expo": ">=55.0.0",
+    "expo-router": ">=55.0.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -47,14 +50,26 @@
     },
     "react-native-safe-area-context": {
       "optional": true
+    },
+    "react-native-screens": {
+      "optional": true
+    },
+    "expo": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@types/react": "^19.2.18",
-    "convex-feedback": "^0.1.0",
+    "convex-feedback": "*",
     "react": "^19.2.0",
     "react-native": "^0.83.10",
-    "react-native-safe-area-context": "^4.5.3"
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "^4.23.0",
+    "expo": "^55.0.0",
+    "expo-router": "^55.0.18"
   },
   "types": "./dist/react/index.d.ts",
   "module": "./dist/react/index.js"

package/src/native/expo/ExpoFeedbackBody.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+
+import type { SearchBarCommands } from "react-native-screens";
+import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider.js";
+import { type FeedbackScreenBodyProps } from "../../shared/types/index.js";
+
+import { FeedbackScreenContent } from "../shared/ui/BodyContent.js";
+import { FeedbackStack } from "./FeedbackStack.js";
+import type { FeedbackScreenStackProps } from "./types.js";
+
+export function ExpoFeedbackBody({
+  useStack = true,
+  StackOptions,
+  ...props
+}: FeedbackScreenBodyProps & FeedbackScreenStackProps) {
+  const { query, isSearching, setIsSearching, setSelectedEntryId } =
+    useFeedbackBody();
+  const searchRef = useRef<SearchBarCommands>(null);
+
+  const onEntryOpen = (entryId: string) => {
+    setSelectedEntryId(entryId);
+    if ((query || isSearching) && searchRef.current) {
+      searchRef.current.blur();
+    }
+  };
+
+  useEffect(() => {
+    const searching = query.trim().length > 0;
+
+    if (searching !== isSearching) {
+      setIsSearching(searching);
+    }
+  }, [query, isSearching, setIsSearching]);
+
+  if (!useStack)
+    return <FeedbackScreenContent onEntryOpen={onEntryOpen} {...props} />;
+
+  return (
+    <FeedbackStack stackOptions={StackOptions} searchRef={searchRef}>
+      <FeedbackScreenContent
+        hideBackButton
+        showHeader={false}
+        onEntryOpen={onEntryOpen}
+        {...props}
+      />
+    </FeedbackStack>
+  );
+}

package/src/native/expo/FeedbackScreen.tsx

@@ -0,0 +1,37 @@
+import { FeedbackBodyProvider } from "../../shared/context/FeedbackBodyProvider";
+import { FeedbackProvider } from "../../shared/context/FeedbackProvider";
+import { kinds } from "../../shared/helpers";
+import { ExpoFeedbackBody } from "./ExpoFeedbackBody";
+import type { ExpoFeedbackScreenProps } from "./types";
+
+export function FeedbackScreen({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  entrySort = "top",
+  commentSort = "top",
+  enabledKinds = kinds,
+  maxCommentDepth = 5,
+  debounceDuration = 300,
+  transformComments,
+  renderActor,
+  ...props
+}: ExpoFeedbackScreenProps) {
+  return (
+    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+      <FeedbackBodyProvider
+        hooks={hooks}
+        entrySort={entrySort}
+        commentSort={commentSort}
+        enabledKinds={enabledKinds}
+        maxCommentDepth={maxCommentDepth}
+        debounceDuration={debounceDuration}
+        transformComments={transformComments}
+        renderActor={renderActor}
+      >
+        <ExpoFeedbackBody {...props} />
+      </FeedbackBodyProvider>
+    </FeedbackProvider>
+  );
+}

package/src/native/expo/FeedbackStack.tsx

@@ -0,0 +1,99 @@
+import { Stack, useRouter } from "expo-router";
+import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../shared/context/FeedbackProvider";
+import type { FeedbackStackProps } from "./types";
+
+export function FeedbackStack({
+  searchRef,
+  stackOptions,
+  children,
+}: FeedbackStackProps) {
+  const {
+    query,
+    enabledKinds,
+    selectedEntryId,
+    setQuery,
+    setShowForm,
+    setIsSearching,
+    setSelectedEntryId,
+  } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const router = useRouter();
+
+  const canGoBack = !!selectedEntryId || router.canGoBack();
+
+  const handleBackPress = () => {
+    if (selectedEntryId === null) {
+      router.back();
+      return;
+    }
+
+    if (searchRef.current && query) searchRef.current.focus();
+
+    setSelectedEntryId(null);
+    return true;
+  };
+
+  const pageTitle =
+    enabledKinds.length === 1
+      ? messages.kindsPlural[enabledKinds.at(0)!]
+      : messages.board.title;
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: pageTitle,
+          headerShown: true,
+          headerTransparent: true,
+          headerShadowVisible: true,
+          headerBackVisible: false,
+          contentStyle: { backgroundColor: theme.colors.background },
+          ...stackOptions,
+        }}
+      />
+      <Stack.Toolbar placement="right">
+        <Stack.Toolbar.Button
+          icon="plus"
+          variant="prominent"
+          accessibilityLabel={messages.board.createEntry}
+          onPress={() => setShowForm(true)}
+          tintColor={theme.colors.primary}
+        />
+      </Stack.Toolbar>
+      <Stack.Toolbar placement="left">
+        <Stack.Toolbar.Button
+          hidden={!canGoBack}
+          icon="chevron.backward"
+          onPress={handleBackPress}
+        />
+      </Stack.Toolbar>
+
+      {children}
+
+      <Stack.SearchBar
+        onChangeText={(q) => {
+          if (selectedEntryId) setSelectedEntryId(null);
+          setQuery(q.nativeEvent.text);
+        }}
+        onOpen={() => console.log("opened")}
+        onClose={() => console.log("closed")}
+        onSearchButtonPress={() => console.log("search button pressed")}
+        onCancelButtonPress={() => console.log("cancel button pressed")}
+        onFocus={() => {
+          if (selectedEntryId) setSelectedEntryId(null);
+          setIsSearching(true);
+        }}
+        onBlur={() => setIsSearching(false)}
+        obscureBackground={false}
+        allowToolbarIntegration
+        hideNavigationBar={false}
+        ref={searchRef}
+        textColor={theme.colors.text}
+      />
+      <Stack.Toolbar placement="bottom">
+        <Stack.Toolbar.SearchBarSlot />
+      </Stack.Toolbar>
+    </>
+  );
+}

package/src/native/expo/README.md

@@ -0,0 +1,17 @@
+# Native layer
+
+Import this layer only from `convex-feedback-ui/expo`.
+
+The native layer uses React Native core primitives and the shared `FeedbackMessages` / `FeedbackTheme` contracts. It intentionally does not depend on NativeWind or Expo UI.
+
+To replace a control with Expo UI, use render-function children on an interactive leaf:
+
+```tsx
+<Comment.Like onToggle={setLiked}>
+  {({ active, count, toggle }) => (
+    <YourExpoUiControl active={active} count={count} onPress={toggle} />
+  )}
+</Comment.Like>
+```
+
+Containers such as `FeedbackEntry.Content`, `FeedbackForm.Root`, and `Comment.Children` accept arbitrary children, so custom Expo UI fields/buttons can also be placed directly inside the compound layout.

package/src/native/expo/index.ts

@@ -0,0 +1,8 @@
+export * from "../../shared/context/FeedbackBodyProvider.js";
+export * from "../../shared/context/FeedbackProvider.js";
+export * from "../../shared/messages.js";
+export * from "../../shared/theme.js";
+export type * from "../../shared/types/index.js";
+export * from "../shared/ui/primitives.js";
+export * from "./FeedbackScreen.js";
+export type * from "./types.js";

package/src/native/expo/types.ts

@@ -0,0 +1,23 @@
+import type { StackScreenProps } from "expo-router";
+import type { SearchBarCommands } from "react-native-screens";
+import type { FeedbackScreenRootProps } from "../../shared/types";
+
+interface FeedbackScreenWithStack {
+  useStack?: true;
+  StackOptions?: StackScreenProps["options"];
+}
+interface FeedbackScreenWithoutStack {
+  useStack?: false;
+  StackOptions?: never;
+}
+export type FeedbackScreenStackProps =
+  FeedbackScreenWithStack | FeedbackScreenWithoutStack;
+
+export type ExpoFeedbackScreenProps = FeedbackScreenStackProps &
+  FeedbackScreenRootProps;
+
+export interface FeedbackStackProps {
+  searchRef: React.RefObject<SearchBarCommands | null>;
+  stackOptions?: StackScreenProps["options"];
+  children: React.ReactNode;
+}

package/src/native/native/FeedbackScreen.tsx

@@ -0,0 +1,37 @@
+import { FeedbackBodyProvider } from "../../shared/context/FeedbackBodyProvider";
+import { FeedbackProvider } from "../../shared/context/FeedbackProvider";
+import { kinds } from "../../shared/helpers";
+import type { FeedbackScreenRootProps } from "../../shared/types";
+import { FeedbackScreenContent } from "../shared/ui/BodyContent";
+
+export function FeedbackScreen({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  entrySort = "top",
+  commentSort = "top",
+  enabledKinds = kinds,
+  maxCommentDepth = 5,
+  debounceDuration = 300,
+  transformComments,
+  renderActor,
+  ...props
+}: FeedbackScreenRootProps) {
+  return (
+    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+      <FeedbackBodyProvider
+        hooks={hooks}
+        entrySort={entrySort}
+        commentSort={commentSort}
+        enabledKinds={enabledKinds}
+        maxCommentDepth={maxCommentDepth}
+        debounceDuration={debounceDuration}
+        transformComments={transformComments}
+        renderActor={renderActor}
+      >
+        <FeedbackScreenContent {...props} />
+      </FeedbackBodyProvider>
+    </FeedbackProvider>
+  );
+}

package/src/native/native/index.ts

@@ -0,0 +1,7 @@
+export * from "../../shared/context/FeedbackBodyProvider.js";
+export * from "../../shared/context/FeedbackProvider.js";
+export * from "../../shared/messages.js";
+export * from "../../shared/theme.js";
+export type * from "../../shared/types/index.js";
+export * from "../shared/ui/primitives.js";
+export * from "./FeedbackScreen.js";

package/src/native/shared/helpers.ts

@@ -0,0 +1,9 @@
+import type { StyleProp } from "react-native";
+
+export function combineStyle<T>(
+  enabled: boolean,
+  fallback: StyleProp<T>,
+  style: StyleProp<T>,
+): StyleProp<T> {
+  return enabled ? [fallback, style] : style;
+}

package/src/native/shared/ui/BodyContent.tsx

@@ -0,0 +1,43 @@
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
+import type { FeedbackScreenContentProps } from "../../../shared/types";
+import { FeedbackScreenHeader } from "./FeedbackScreenHeader";
+import { FeedbackScreenList } from "./FeedbackScreenList";
+import { CreateEntryModal } from "./NewEntry";
+import { FeedbackBoard } from "./primitives.js";
+
+export function FeedbackScreenContent({
+  showHeader = true,
+  hideBackButton = false,
+  onEntryOpen,
+  ...colors
+}: FeedbackScreenContentProps) {
+  const { showForm, setShowForm, setSelectedEntryId } = useFeedbackBody();
+
+  const handleEntryOpen = (entryId: string) => {
+    setSelectedEntryId(entryId);
+    onEntryOpen?.(entryId);
+  };
+
+  return (
+    <>
+      <FeedbackBoard.Root {...colors}>
+        {showHeader && <FeedbackScreenHeader />}
+
+        <FeedbackScreenList
+          hideBackButton={hideBackButton}
+          onEntryOpen={handleEntryOpen}
+        />
+      </FeedbackBoard.Root>
+
+      {showForm && (
+        <CreateEntryModal
+          onRequestClose={() => setShowForm(false)}
+          onCreated={(id) => {
+            setShowForm(false);
+            setSelectedEntryId(id);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/native/shared/ui/Button.tsx

@@ -0,0 +1,29 @@
+import { Pressable, Text } from "react-native";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+
+export function Button({
+  label,
+  onPress,
+}: {
+  label: string;
+  onPress: () => void;
+}) {
+  const { theme } = useFeedbackUi();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={{
+        alignSelf: "flex-start",
+        paddingVertical: 8,
+        paddingHorizontal: 11,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+      }}
+    >
+      <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}