convex-feedback-ui 0.1.8 → 0.2.0-beta.0

package/src/native/expo/FeedbackStack.tsx

@@ -1,13 +1,19 @@
 import { Stack, useRouter } from "expo-router";
+import { Fragment } from "react";
 import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../shared/context/FeedbackProvider";
-import { createEntryLabel, entryStatusChoices } from "../../shared/helpers";
+import {
+  allowAuthenticatedAction,
+  createEntryLabel,
+  entryStatusChoices,
+} from "../../shared/helpers";
 import type { FeedbackStackProps } from "./types";
 
 export function FeedbackStack({
   searchRef,
   stackOptions,
   androidToolbarIcons = {},
+  BottomToolbarWrapper,
   children,
 }: FeedbackStackProps) {
   const {
@@ -20,9 +26,12 @@ export function FeedbackStack({
     setSelectedEntryId,
     statusFilter,
     setStatusFilter,
+    isAuthenticated,
+    onUnauthenticated,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const router = useRouter();
+  const ToolbarWrapper = BottomToolbarWrapper ?? Fragment;
 
   const canGoBack = !!selectedEntryId || router.canGoBack();
 
@@ -64,7 +73,12 @@ export function FeedbackStack({
           }
           variant="prominent"
           accessibilityLabel={createEntryLabel(enabledKinds, messages)}
-          onPress={() => setShowForm(true)}
+          disabled={isAuthenticated === undefined}
+          onPress={() => {
+            if (allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) {
+              setShowForm(true);
+            }
+          }}
           tintColor={theme.colors.primary}
         >
           {createEntryLabel(enabledKinds, messages)}
@@ -91,7 +105,10 @@ export function FeedbackStack({
       <Stack.SearchBar
         onChangeText={(q) => {
           if (selectedEntryId) setSelectedEntryId(null);
-          setQuery(q.nativeEvent.text);
+          setQuery(
+            (q as unknown as { nativeEvent: { text: string } }).nativeEvent
+              .text,
+          );
         }}
         onFocus={() => {
           if (selectedEntryId) setSelectedEntryId(null);
@@ -104,30 +121,32 @@ export function FeedbackStack({
         ref={searchRef}
         textColor={theme.colors.text}
       />
-      <Stack.Toolbar placement="bottom">
-        <Stack.Toolbar.SearchBarSlot />
-        <Stack.Toolbar.Spacer />
-        <Stack.Toolbar.Menu
-          icon={
-            process.env.EXPO_OS === "ios"
-              ? "line.3.horizontal.decrease"
-              : androidToolbarIcons.filter
-          }
-          title={messages.board.statusFilter}
-          accessibilityLabel={messages.board.statusFilter}
-          tintColor={theme.colors.text}
-        >
-          {entryStatusChoices(messages).map(({ value, label }) => (
-            <Stack.Toolbar.MenuAction
-              key={value}
-              isOn={statusFilter === value}
-              onPress={() => setStatusFilter(value)}
-            >
-              {label}
-            </Stack.Toolbar.MenuAction>
-          ))}
-        </Stack.Toolbar.Menu>
-      </Stack.Toolbar>
+      <ToolbarWrapper>
+        <Stack.Toolbar placement="bottom">
+          <Stack.Toolbar.SearchBarSlot />
+          <Stack.Toolbar.Spacer />
+          <Stack.Toolbar.Menu
+            icon={
+              process.env.EXPO_OS === "ios"
+                ? "line.3.horizontal.decrease"
+                : androidToolbarIcons.filter
+            }
+            title={messages.board.statusFilter}
+            accessibilityLabel={messages.board.statusFilter}
+            tintColor={theme.colors.text}
+          >
+            {entryStatusChoices(messages).map(({ value, label }) => (
+              <Stack.Toolbar.MenuAction
+                key={value}
+                isOn={statusFilter === value}
+                onPress={() => setStatusFilter(value)}
+              >
+                {label}
+              </Stack.Toolbar.MenuAction>
+            ))}
+          </Stack.Toolbar.Menu>
+        </Stack.Toolbar>
+      </ToolbarWrapper>
     </>
   );
 }

package/src/native/expo/FeedbackStackLayout.tsx

@@ -25,12 +25,14 @@ export function FeedbackStackLayout({
   loading,
   transformComments,
   renderActor,
+  onUnauthenticated,
   routes: routeOverrides,
   screenOptions,
   boardOptions,
   entryOptions,
   createOptions,
   androidToolbarIcons = {},
+  BottomToolbarWrapper,
   primaryColor,
   primaryForeground,
   backgroundColor,
@@ -80,8 +82,16 @@ export function FeedbackStackLayout({
         collectStandardMetadata={collectExpoMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
+        onUnauthenticated={onUnauthenticated}
       >
-        <RoutedFeedbackProvider value={{ routes, colors, androidToolbarIcons }}>
+        <RoutedFeedbackProvider
+          value={{
+            routes,
+            colors,
+            androidToolbarIcons,
+            bottomToolbarWrapper: BottomToolbarWrapper,
+          }}
+        >
           <Stack>
             <Stack.Screen
               name={routes.board}

package/src/native/expo/README.md

@@ -37,5 +37,20 @@ Toolbar actions retain their package-provided SF Symbols on iOS. Pass
 `ImageSourcePropType` values for the create, back, close, and filter actions.
 Missing Android images fall back to text labels.
 
+> [!WARNING]
+> If the filter toolbar button is intermittently broken, especially on iOS 26+, pass `Host` from `@expo/ui/swift-ui` to `BottomToolbarWrapper`. This wraps every bottom toolbar:
+>
+> ```tsx
+> import { Host } from "@expo/ui/swift-ui";
+>
+> <FeedbackScreen hooks={feedbackHooks} BottomToolbarWrapper={Host} />;
+> ```
+
+Use the same prop on `FeedbackStackLayout` for routed navigation.
+
 The existing `FeedbackScreen` remains the self-contained API for conditional
 in-screen navigation.
+
+`RoadmapScreen` is also exported from this entry point for public roadmap
+browsing. Pass `onEntryOpen` for host navigation and `onUnauthenticated` for
+the host's sign-in UI.

package/src/native/expo/index.ts

@@ -5,6 +5,7 @@ export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
+export * from "../shared/ui/RoadmapScreen.js";
 export * from "./metadata.js";
 export * from "./FeedbackScreen.js";
 export * from "./FeedbackCreateStackLayout.js";

package/src/native/expo/types.ts

@@ -1,4 +1,5 @@
 import type { StackScreenProps } from "expo-router";
+import type { ComponentType, ReactNode } from "react";
 import type { ImageSourcePropType } from "react-native";
 import type { SearchBarCommands } from "react-native-screens";
 import type {
@@ -6,16 +7,22 @@ import type {
   FeedbackScreenRootProps,
 } from "../../shared/types";
 
+/** Optional wrapper used around Expo Router bottom toolbars. */
+export type BottomToolbarWrapper = ComponentType<{ children: ReactNode }>;
+
 interface FeedbackScreenWithStack {
   useStack?: true;
   StackOptions?: StackScreenProps["options"];
   /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
   androidToolbarIcons?: FeedbackAndroidToolbarIcons;
+  /** Optional component wrapping the bottom search/filter toolbar. */
+  BottomToolbarWrapper?: BottomToolbarWrapper;
 }
 interface FeedbackScreenWithoutStack {
   useStack?: false;
   StackOptions?: never;
   androidToolbarIcons?: never;
+  BottomToolbarWrapper?: never;
 }
 export type FeedbackScreenStackProps =
   FeedbackScreenWithStack | FeedbackScreenWithoutStack;
@@ -27,6 +34,8 @@ export interface FeedbackStackProps {
   searchRef: React.RefObject<SearchBarCommands | null>;
   stackOptions?: StackScreenProps["options"];
   androidToolbarIcons?: FeedbackAndroidToolbarIcons;
+  /** Optional component wrapping the bottom search/filter toolbar. */
+  BottomToolbarWrapper?: BottomToolbarWrapper;
   children: React.ReactNode;
 }
 
@@ -69,6 +78,8 @@ export interface FeedbackStackLayoutProps extends FeedbackScreenRootProps {
   createOptions?: FeedbackStackScreenOptions;
   /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
   androidToolbarIcons?: FeedbackAndroidToolbarIcons;
+  /** Optional component wrapping the bottom search/filter toolbar. */
+  BottomToolbarWrapper?: BottomToolbarWrapper;
 }
 
 export interface FeedbackCreateStackLayoutProps {
@@ -84,4 +95,5 @@ export interface RoutedFeedbackContextValue {
   routes: FeedbackRouteNames;
   colors: FeedbackColorProps;
   androidToolbarIcons: FeedbackAndroidToolbarIcons;
+  bottomToolbarWrapper?: BottomToolbarWrapper;
 }

package/src/native/native/FeedbackScreen.tsx

@@ -20,6 +20,7 @@ export function FeedbackScreen({
   loading,
   transformComments,
   renderActor,
+  onUnauthenticated,
   ...props
 }: FeedbackScreenRootProps) {
   return (
@@ -37,6 +38,7 @@ export function FeedbackScreen({
         collectStandardMetadata={collectNativeMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
+        onUnauthenticated={onUnauthenticated}
       >
         <FeedbackScreenContent {...props} />
       </FeedbackBodyProvider>

package/src/native/native/README.md

@@ -15,3 +15,7 @@ To replace a control with Expo UI, use render-function children on an interactiv
 ```
 
 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.
+
+`RoadmapScreen` provides the public roadmap and renders attached entries with
+the same `FeedbackEntry` primitives. Pass `onUnauthenticated` to handle auth
+when an anonymous visitor votes.

package/src/native/native/index.ts

@@ -7,3 +7,4 @@ export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
 export * from "../shared/metadata.js";
 export * from "./FeedbackScreen.js";
+export * from "../shared/ui/RoadmapScreen.js";

package/src/native/shared/helpers.ts

@@ -1,4 +1,5 @@
-import type { StyleProp } from "react-native";
+import { useState } from "react";
+import { Alert, type StyleProp } from "react-native";
 
 export function combineStyle<T>(
   enabled: boolean,
@@ -7,3 +8,39 @@ export function combineStyle<T>(
 ): StyleProp<T> {
   return enabled ? [fallback, style] : style;
 }
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : "Something went wrong.";
+}
+
+/** Runs a native UI mutation and offers a single retry action on failure. */
+export function useNativeAction() {
+  const [pending, setPending] = useState(false);
+
+  const run = async <T>(
+    action: () => Promise<T>,
+    title: string,
+    retryAction: () => Promise<unknown> = action,
+  ): Promise<T | undefined> => {
+    if (pending) return undefined;
+    setPending(true);
+    try {
+      return await action();
+    } catch (error) {
+      Alert.alert(title, errorMessage(error), [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Retry",
+          onPress: () => {
+            void run(retryAction, title, retryAction);
+          },
+        },
+      ]);
+      return undefined;
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return { pending, run };
+}

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

@@ -1,5 +1,6 @@
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import type { FeedbackScreenContentProps } from "../../../shared/types";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
 import { FeedbackScreenHeader } from "./FeedbackScreenHeader";
 import { FeedbackScreenList } from "./FeedbackScreenList";
 import { CreateEntryModal } from "./NewEntry";
@@ -12,13 +13,25 @@ export function FeedbackScreenContent({
   onCreateEntry,
   ...colors
 }: FeedbackScreenContentProps) {
-  const { showForm, setShowForm, setSelectedEntryId } = useFeedbackBody();
+  const {
+    showForm,
+    setShowForm,
+    setSelectedEntryId,
+    isAuthenticated,
+    onUnauthenticated,
+  } = useFeedbackBody();
 
   const handleEntryOpen = (entryId: string) => {
     setSelectedEntryId(entryId);
     onEntryOpen?.(entryId);
   };
 
+  const handleCreateEntry = () => {
+    if (allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) {
+      (onCreateEntry ?? (() => setShowForm(true)))();
+    }
+  };
+
   return (
     <>
       <FeedbackBoard.Root {...colors}>
@@ -27,7 +40,7 @@ export function FeedbackScreenContent({
         <FeedbackScreenList
           hideBackButton={hideBackButton}
           onEntryOpen={handleEntryOpen}
-          onCreateEntry={onCreateEntry}
+          onCreateEntry={handleCreateEntry}
         />
       </FeedbackBoard.Root>
 

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

@@ -5,16 +5,19 @@ export function Button({
   label,
   onPress,
   variant = "default",
+  disabled = false,
 }: {
   label: string;
   onPress: () => void;
   variant?: "default" | "primary";
+  disabled?: boolean;
 }) {
   const { theme } = useFeedbackUi();
   const primary = variant === "primary";
   return (
     <Pressable
       onPress={onPress}
+      disabled={disabled}
       style={{
         alignSelf: primary ? "center" : "flex-start",
         paddingVertical: 8,
@@ -23,6 +26,7 @@ export function Button({
         borderWidth: 1,
         borderColor: primary ? theme.colors.primary : theme.colors.border,
         backgroundColor: primary ? theme.colors.primary : undefined,
+        opacity: disabled ? 0.55 : 1,
       }}
     >
       <Text

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

@@ -3,9 +3,11 @@ import { Text, View } from "react-native";
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
 import type { FeedbackScreenCommentBranchProps } from "../../../shared/types";
 import { Button } from "./Button";
 import { Comment, FeedbackForm } from "./primitives.js";
+import { useNativeAction } from "../helpers.js";
 
 import type { FeedbackScreenReplyListProps } from "../../../shared/types";
 
@@ -32,9 +34,11 @@ export function ReplyList({
       {visible.map((reply) => (
         <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
       ))}
-      {replies.status === "CanLoadMore" && (
+      {(replies.status === "CanLoadMore" ||
+        replies.status === "LoadingMore") && (
         <Button
           label={messages.comments.loadMore}
+          disabled={replies.status === "LoadingMore"}
           onPress={() => replies.loadMore(hooks.pageSizes.replies)}
         />
       )}
@@ -46,13 +50,34 @@ export function CommentBranch({
   comment,
   entryId,
 }: FeedbackScreenCommentBranchProps) {
-  const { hooks, maxCommentDepth, renderActor } = useFeedbackBody();
+  const {
+    hooks,
+    maxCommentDepth,
+    renderActor,
+    isAuthenticated,
+    onUnauthenticated,
+  } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const [expanded, setExpanded] = useState(false);
   const [replying, setReplying] = useState(false);
   const [replyBody, setReplyBody] = useState("");
   const setLike = hooks.useSetCommentLike();
   const createComment = hooks.useCreateComment();
+  const likeAction = useNativeAction();
+  const replyAction = useNativeAction();
+
+  const toggleLike = (desiredState: boolean) => {
+    if (
+      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+      likeAction.pending
+    ) {
+      return;
+    }
+    void likeAction.run(
+      () => setLike({ commentId: comment.id, desiredState }),
+      "Could not update like",
+    );
+  };
 
   return (
     <Comment.Root comment={comment}>
@@ -69,12 +94,20 @@ export function CommentBranch({
         }}
       >
         <Comment.Like
-          onToggle={(active) =>
-            void setLike({ commentId: comment.id, desiredState: active })
-          }
+          disabled={isAuthenticated === undefined || likeAction.pending}
+          onToggle={toggleLike}
         />
         {comment.body !== null && comment.depth < maxCommentDepth ? (
-          <Comment.Reply onActivate={() => setReplying((value) => !value)} />
+          <Comment.Reply
+            disabled={isAuthenticated === undefined || replyAction.pending}
+            onActivate={() => {
+              if (
+                allowAuthenticatedAction(isAuthenticated, onUnauthenticated)
+              ) {
+                setReplying((value) => !value);
+              }
+            }}
+          />
         ) : null}
         <Comment.RepliesButton
           expanded={expanded}
@@ -89,16 +122,26 @@ export function CommentBranch({
             placeholder={messages.comments.placeholder}
           />
           <FeedbackForm.Submit
-            onPress={async () => {
+            disabled={isAuthenticated === undefined || replyAction.pending}
+            submitting={replyAction.pending}
+            onPress={() => {
               if (replyBody.trim().length === 0) return;
-              await createComment({
-                entryId,
-                parentCommentId: comment.id,
-                body: replyBody,
-              });
-              setReplyBody("");
-              setReplying(false);
-              setExpanded(true);
+              if (
+                !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+                replyAction.pending
+              ) {
+                return;
+              }
+              void replyAction.run(async () => {
+                await createComment({
+                  entryId,
+                  parentCommentId: comment.id,
+                  body: replyBody,
+                });
+                setReplyBody("");
+                setReplying(false);
+                setExpanded(true);
+              }, "Could not add reply");
             }}
           >
             {messages.comments.reply}

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

@@ -1,6 +1,9 @@
 import { Pressable, View } from "react-native";
 
 import type { FeedbackScreenEntryCardProps } from "../../../shared/types";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
+import { useNativeAction } from "../helpers.js";
 import { FeedbackEntry } from "./primitives";
 
 export function EntryCard({
@@ -8,13 +11,28 @@ export function EntryCard({
   hooks,
   onOpen,
 }: FeedbackScreenEntryCardProps) {
+  const { isAuthenticated, onUnauthenticated } = useFeedbackBody();
   const setUpvote = hooks.useSetEntryUpvote();
+  const action = useNativeAction();
+
+  const toggleUpvote = (desiredState: boolean) => {
+    if (
+      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+      action.pending
+    ) {
+      return;
+    }
+    void action.run(
+      () => setUpvote({ entryId: entry.id, desiredState }),
+      "Could not update vote",
+    );
+  };
+
   return (
     <FeedbackEntry.Root entry={entry}>
       <FeedbackEntry.Upvote
-        onToggle={(active) =>
-          void setUpvote({ entryId: entry.id, desiredState: active })
-        }
+        disabled={isAuthenticated === undefined || action.pending}
+        onToggle={toggleUpvote}
       />
       <Pressable onPress={onOpen} style={{ flex: 1, gap: 4 }}>
         <View

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

@@ -3,18 +3,26 @@ import { ActivityIndicator, Text, View } from "react-native";
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
 import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
 import { Button } from "./Button";
 import { CommentBranch } from "./CommentBranch";
 import { FeedbackEntry, FeedbackForm } from "./primitives";
 import { MetadataModal } from "./MetadataModal";
+import { useNativeAction } from "../helpers.js";
 
 export function EntryDetail({
   entryId,
   onBack,
   hideBackButton,
 }: FeedbackScreenEntryDetailProps) {
-  const { hooks, commentSort, transformComments } = useFeedbackBody();
+  const {
+    hooks,
+    commentSort,
+    transformComments,
+    isAuthenticated,
+    onUnauthenticated,
+  } = useFeedbackBody();
 
   const { messages, theme } = useFeedbackUi();
   const entry = hooks.useEntry(entryId);
@@ -23,6 +31,21 @@ export function EntryDetail({
   const createComment = hooks.useCreateComment();
   const [body, setBody] = useState("");
   const [showMetadata, setShowMetadata] = useState(false);
+  const upvoteAction = useNativeAction();
+  const commentAction = useNativeAction();
+
+  const toggleUpvote = (desiredState: boolean) => {
+    if (
+      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+      upvoteAction.pending
+    ) {
+      return;
+    }
+    void upvoteAction.run(
+      () => setUpvote({ entryId, desiredState }),
+      "Could not update vote",
+    );
+  };
   const visible = useMemo(
     () => transformComments?.(comments.results) ?? comments.results,
     [comments.results, transformComments],
@@ -57,9 +80,8 @@ export function EntryDetail({
       )}
       <FeedbackEntry.Root entry={entry}>
         <FeedbackEntry.Upvote
-          onToggle={(active) =>
-            void setUpvote({ entryId, desiredState: active })
-          }
+          disabled={isAuthenticated === undefined || upvoteAction.pending}
+          onToggle={toggleUpvote}
         />
         <FeedbackEntry.Content style={{ gap: 5 }}>
           <FeedbackEntry.Status />
@@ -92,10 +114,20 @@ export function EntryDetail({
           placeholder={messages.comments.placeholder}
         />
         <FeedbackForm.Submit
-          onPress={async () => {
+          disabled={isAuthenticated === undefined || commentAction.pending}
+          submitting={commentAction.pending}
+          onPress={() => {
             if (body.trim().length === 0) return;
-            await createComment({ entryId, body });
-            setBody("");
+            if (
+              !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+              commentAction.pending
+            ) {
+              return;
+            }
+            void commentAction.run(async () => {
+              await createComment({ entryId, body });
+              setBody("");
+            }, "Could not add comment");
           }}
         >
           {messages.comments.submit}
@@ -106,9 +138,11 @@ export function EntryDetail({
           <CommentBranch key={comment.id} comment={comment} entryId={entryId} />
         ))}
       </View>
-      {comments.status === "CanLoadMore" && (
+      {(comments.status === "CanLoadMore" ||
+        comments.status === "LoadingMore") && (
         <Button
           label={messages.comments.loadMore}
+          disabled={comments.status === "LoadingMore"}
           onPress={() => comments.loadMore(hooks.pageSizes.comments)}
         />
       )}

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

@@ -3,6 +3,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import { createEntryLabel, entryStatusChoices } from "../../../shared/helpers";
+import { allowAuthenticatedAction } from "../../../shared/helpers";
 import { ChoiceChips, FeedbackBoard } from "./primitives";
 
 export function FeedbackScreenHeader() {
@@ -14,6 +15,8 @@ export function FeedbackScreenHeader() {
     enabledKinds,
     statusFilter,
     setStatusFilter,
+    isAuthenticated,
+    onUnauthenticated,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const { top } = useSafeAreaInsets();
@@ -36,7 +39,12 @@ export function FeedbackScreenHeader() {
         onValueChange={setStatusFilter}
       />
       <Pressable
-        onPress={() => setShowForm(true)}
+        disabled={isAuthenticated === undefined}
+        onPress={() => {
+          if (allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) {
+            setShowForm(true);
+          }
+        }}
         style={{
           alignSelf: "flex-start",
           paddingVertical: 9,