@upstep/react-native 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,11 +15,8 @@
     "@upstep/types": "0.5.0"
   },
   "peerDependencies": {
-    "@gorhom/bottom-sheet": ">=4",
     "react": ">=18",
-    "react-native": ">=0.73",
-    "react-native-gesture-handler": ">=2",
-    "react-native-reanimated": ">=3"
+    "react-native": ">=0.73"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/src/FeedbackContext.tsx

@@ -4,7 +4,6 @@ import React, {
   useEffect,
   useState,
   useCallback,
-  useRef,
   type ReactNode,
 } from "react";
 import type {
@@ -15,7 +14,6 @@ import type {
   VoteValue,
 } from "@upstep/types";
 import { UpstepApiClient } from "./api";
-import type BottomSheet from "@gorhom/bottom-sheet";
 
 const DEFAULT_ACCENT = "#D97757";
 
@@ -27,11 +25,10 @@ interface UpstepContextValue {
   submit: (title: string, content: string, type?: FeedbackType) => Promise<void>;
   vote: (feedbackId: string, value: VoteValue) => Promise<void>;
   getItem: (feedbackId: string) => Promise<FeedbackWithComments>;
-  /** Open the feedback sheet — call from your own UI (settings, menu, etc.). */
+  isOpen: boolean;
   openSheet: () => void;
-  /** Set / update the end-user id at runtime (e.g. after the user logs in). */
+  closeSheet: () => void;
   identify: (userId: string | undefined) => void;
-  sheetRef: React.RefObject<BottomSheet | null>;
   accentColor: string;
   theme: "light" | "dark" | "auto";
 }
@@ -45,7 +42,7 @@ export function FeedbackProvider({
   const [client] = useState(() => new UpstepApiClient(config));
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
   const [feedLoading, setFeedLoading] = useState(true);
-  const sheetRef = useRef<BottomSheet>(null);
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     client.setUserId(config.userId);
@@ -87,7 +84,11 @@ export function FeedbackProvider({
   );
 
   const openSheet = useCallback(() => {
-    sheetRef.current?.expand();
+    setIsOpen(true);
+  }, []);
+
+  const closeSheet = useCallback(() => {
+    setIsOpen(false);
   }, []);
 
   const identify = useCallback(
@@ -99,7 +100,7 @@ export function FeedbackProvider({
     <UpstepContext.Provider
       value={{
         client, feedItems, feedLoading, loadFeed, submit, vote, getItem,
-        openSheet, identify, sheetRef,
+        isOpen, openSheet, closeSheet, identify,
         accentColor: config.accentColor ?? DEFAULT_ACCENT,
         theme: config.theme ?? "auto",
       }}

package/src/FeedbackSheet.tsx

@@ -1,20 +1,19 @@
-import React, { useState, useMemo, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import {
+  Modal,
   View,
   Text,
   TextInput,
   TouchableOpacity,
+  Pressable,
+  ScrollView,
+  KeyboardAvoidingView,
   StyleSheet,
   ActivityIndicator,
   useColorScheme,
   Platform,
+  SafeAreaView,
 } from "react-native";
-import BottomSheet, {
-  BottomSheetView,
-  BottomSheetScrollView,
-  BottomSheetBackdrop,
-} from "@gorhom/bottom-sheet";
-import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
 import type { Comment, Feedback, FeedbackType, FeedbackWithComments } from "@upstep/types";
 import { useUpstep } from "./FeedbackContext";
 
@@ -58,116 +57,119 @@ type Nav =
   | { screen: "create" };
 
 // ─── FeedbackSheet ────────────────────────────────────────────────────────────
-//
-// IMPORTANT: BottomSheet requires stable direct children — never conditionally
-// render <BottomSheetView> or <BottomSheetScrollView> as they set up gesture
-// handlers on mount. We keep ONE of each always mounted; only their contents
-// change based on `nav`. This also fixes TouchableOpacity not responding.
 
 export function FeedbackSheet() {
-  const { sheetRef, accentColor, theme, loadFeed } = useUpstep();
+  const { isOpen, closeSheet, accentColor, theme, loadFeed } = useUpstep();
   const scheme = useColorScheme();
   const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
-  const snapPoints = useMemo(() => ["90%"], []);
-
-  // Dim backdrop — tap to close
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        pressBehavior="close"
-      />
-    ),
-    []
-  );
+
+  // Refresh list every time the modal opens
+  useEffect(() => {
+    if (isOpen) loadFeed();
+  }, [isOpen, loadFeed]);
+
+  function handleClose() {
+    closeSheet();
+    // Reset to list when closed so next open starts fresh
+    setTimeout(() => setNav({ screen: "list" }), 300);
+  }
 
   return (
-    <BottomSheet
-      ref={sheetRef}
-      index={-1}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      backdropComponent={renderBackdrop}
-      backgroundStyle={{ backgroundColor: p.bg, borderRadius: 24 }}
-      handleIndicatorStyle={{ backgroundColor: p.handle, width: 40, height: 4 }}
-      onChange={(index) => { if (index >= 0) loadFeed(); }}
-      onClose={() => setNav({ screen: "list" })}
+    <Modal
+      visible={isOpen}
+      animationType="slide"
+      transparent
+      statusBarTranslucent
+      onRequestClose={handleClose}
     >
-      {/*
-        Wrap everything in ONE BottomSheetView so the library can measure the
-        sheet correctly. A plain View header stays fixed; BottomSheetScrollView
-        fills the remaining space below it — no overlap.
-      */}
-      <BottomSheetView style={styles.sheetContainer}>
-        {/* ── Fixed header ─────────────────────────────── */}
-        <View style={[styles.header, { borderBottomColor: p.border }]}>
-          {nav.screen === "list" ? (
-            <>
-              <Text style={[styles.headerTitle, { color: p.text }]}>Feedback</Text>
-              <TouchableOpacity
-                onPress={() => setNav({ screen: "create" })}
-                activeOpacity={0.8}
-                style={[styles.newBtn, { backgroundColor: accentColor }]}
-              >
-                <Text style={styles.newBtnText}>+ New</Text>
-              </TouchableOpacity>
-            </>
-          ) : nav.screen === "create" ? (
-            <>
+      <KeyboardAvoidingView
+        style={styles.overlay}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        {/* Tap backdrop to dismiss */}
+        <Pressable style={styles.backdrop} onPress={handleClose} />
+
+        {/* Sheet */}
+        <View style={[styles.sheet, { backgroundColor: p.bg }]}>
+          {/* Drag handle */}
+          <View style={styles.handleWrap}>
+            <View style={[styles.handle, { backgroundColor: p.handle }]} />
+          </View>
+
+          {/* Fixed header */}
+          <View style={[styles.header, { borderBottomColor: p.border }]}>
+            {nav.screen === "list" ? (
+              <>
+                <Text style={[styles.headerTitle, { color: p.text }]}>Feedback</Text>
+                <TouchableOpacity
+                  onPress={() => setNav({ screen: "create" })}
+                  activeOpacity={0.8}
+                  style={[styles.newBtn, { backgroundColor: accentColor }]}
+                >
+                  <Text style={styles.newBtnText}>+ New</Text>
+                </TouchableOpacity>
+              </>
+            ) : nav.screen === "create" ? (
+              <>
+                <TouchableOpacity
+                  onPress={() => setNav({ screen: "list" })}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 16 }}
+                >
+                  <Text style={[styles.navBtn, { color: accentColor }]}>Cancel</Text>
+                </TouchableOpacity>
+                <Text style={[styles.headerTitle, { color: p.text }]}>New feedback</Text>
+                <View style={styles.navBtnSpacer} />
+              </>
+            ) : (
               <TouchableOpacity
                 onPress={() => setNav({ screen: "list" })}
-                hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 16 }}
               >
-                <Text style={[styles.navBtn, { color: accentColor }]}>Cancel</Text>
+                <Text style={[styles.navBtn, { color: accentColor }]}>← Back</Text>
               </TouchableOpacity>
-              <Text style={[styles.headerTitle, { color: p.text }]}>New feedback</Text>
-              <View style={styles.navBtnPlaceholder} />
-            </>
-          ) : (
-            <TouchableOpacity
-              onPress={() => setNav({ screen: "list" })}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}
-            >
-              <Text style={[styles.navBtn, { color: accentColor }]}>← Back</Text>
-            </TouchableOpacity>
-          )}
+            )}
+          </View>
+
+          {/* Scrollable body */}
+          <ScrollView
+            style={styles.scroll}
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            {nav.screen === "list" && (
+              <FeedListBody
+                p={p}
+                accent={accentColor}
+                onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
+              />
+            )}
+            {nav.screen === "detail" && "feedbackId" in nav && (
+              <FeedDetailBody
+                p={p}
+                accent={accentColor}
+                feedbackId={(nav as { screen: "detail"; feedbackId: string }).feedbackId}
+              />
+            )}
+            {nav.screen === "create" && (
+              <FeedCreateBody
+                p={p}
+                accent={accentColor}
+                onDone={() => {
+                  setNav({ screen: "list" });
+                }}
+              />
+            )}
+          </ScrollView>
+
+          {/* Safe area spacer */}
+          <SafeAreaView />
         </View>
-
-        {/* ── Scrollable body ───────────────────────────── */}
-        <BottomSheetScrollView
-          style={styles.scrollView}
-          contentContainerStyle={styles.scrollBody}
-          keyboardShouldPersistTaps="handled"
-        >
-          {nav.screen === "list" && (
-            <FeedListBody
-              p={p}
-              accent={accentColor}
-              onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
-            />
-          )}
-          {nav.screen === "detail" && "feedbackId" in nav && (
-            <FeedDetailBody
-              p={p}
-              accent={accentColor}
-              feedbackId={(nav as { screen: "detail"; feedbackId: string }).feedbackId}
-            />
-          )}
-          {nav.screen === "create" && (
-            <FeedCreateBody
-              p={p}
-              accent={accentColor}
-              onDone={() => setNav({ screen: "list" })}
-            />
-          )}
-        </BottomSheetScrollView>
-      </BottomSheetView>
-    </BottomSheet>
+      </KeyboardAvoidingView>
+    </Modal>
   );
 }
 
@@ -176,8 +178,7 @@ export function FeedbackSheet() {
 function FeedListBody({
   p, accent, onSelect,
 }: {
-  p: Palette; accent: string;
-  onSelect: (id: string) => void;
+  p: Palette; accent: string; onSelect: (id: string) => void;
 }) {
   const { feedItems, feedLoading, vote } = useUpstep();
 
@@ -200,7 +201,7 @@ function FeedListBody({
   }
 
   return (
-    <View style={styles.listPad}>
+    <>
       {feedItems.map((f) => (
         <FeedCard
           key={f.id}
@@ -211,7 +212,7 @@ function FeedListBody({
           onVote={() => vote(f.id, "UP")}
         />
       ))}
-    </View>
+    </>
   );
 }
 
@@ -219,8 +220,7 @@ function FeedCard({
   item, p, accent, onPress, onVote,
 }: {
   item: Feedback; p: Palette; accent: string;
-  onPress: () => void;
-  onVote: () => void;
+  onPress: () => void; onVote: () => void;
 }) {
   const voted = item.userVote === "UP";
   const displayTitle = item.title ?? item.content;
@@ -259,9 +259,7 @@ function FeedCard({
         <View style={styles.cardMeta}>
           <TypeBadge type={item.type} p={p} />
           <StatusDot status={item.status} />
-          <Text style={[styles.cardDate, { color: p.textFaint }]}>
-            {fmtDate(item.createdAt)}
-          </Text>
+          <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
       </View>
 
@@ -350,9 +348,7 @@ function FeedDetailBody({
 
       {item.comments.length > 0 && (
         <View style={[styles.commentsSection, { borderTopColor: p.border }]}>
-          <Text style={[styles.commentsLabel, { color: p.textFaint }]}>
-            DEVELOPER RESPONSE
-          </Text>
+          <Text style={[styles.commentsLabel, { color: p.textFaint }]}>DEVELOPER RESPONSE</Text>
           {item.comments.map((c) => (
             <CommentBubble key={c.id} comment={c} p={p} accent={accent} />
           ))}
@@ -371,9 +367,7 @@ function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; a
             {comment.authorName ?? "Team"}
           </Text>
         </View>
-        <Text style={[styles.commentDate, { color: p.textFaint }]}>
-          {fmtDate(comment.createdAt)}
-        </Text>
+        <Text style={[styles.commentDate, { color: p.textFaint }]}>{fmtDate(comment.createdAt)}</Text>
       </View>
       <Text style={[styles.commentContent, { color: p.textSoft }]}>{comment.content}</Text>
     </View>
@@ -409,7 +403,7 @@ function FeedCreateBody({
     try {
       await submit(title.trim(), description.trim() || title.trim(), type);
       setSuccess(true);
-      setTimeout(onDone, 1400);
+      setTimeout(onDone, 1200);
     } catch {
       setError("Something went wrong. Please try again.");
     } finally {
@@ -419,7 +413,7 @@ function FeedCreateBody({
 
   if (success) {
     return (
-      <View style={[styles.centered, { paddingTop: 60 }]}>
+      <View style={[styles.centered, { paddingTop: 40 }]}>
         <Text style={[styles.successTitle, { color: p.text }]}>Submitted</Text>
         <Text style={[styles.successSub, { color: p.textFaint }]}>
           Thanks — we received your feedback.
@@ -519,11 +513,8 @@ function TypeBadge({ type, p }: { type: FeedbackType; p: Palette }) {
 }
 
 const STATUS_COLOR: Record<string, string> = {
-  OPEN: "#b45309",
-  IN_PROGRESS: "#1d4ed8",
-  DONE: "#15803d",
-  PENDING: "#ea580c",
-  CLOSED: "#6b7280",
+  OPEN: "#b45309", IN_PROGRESS: "#1d4ed8", DONE: "#15803d",
+  PENDING: "#ea580c", CLOSED: "#6b7280",
 };
 
 function StatusDot({ status }: { status: string }) {
@@ -534,9 +525,7 @@ function StatusBadge({ status, p }: { status: string; p: Palette }) {
   return (
     <View style={[styles.statusBadge, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
       <StatusDot status={status} />
-      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>
-        {status.replace("_", " ")}
-      </Text>
+      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{status.replace("_", " ")}</Text>
     </View>
   );
 }
@@ -548,9 +537,35 @@ function fmtDate(iso: string) {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
 const styles = StyleSheet.create({
-  // Sheet container — fills the sheet, stacks header above scroll
-  sheetContainer: { flex: 1 },
+  // Modal overlay
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.45)",
+  },
+
+  // Sheet container
+  sheet: {
+    maxHeight: "92%",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+  },
+  handleWrap: {
+    alignItems: "center",
+    paddingTop: 10,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
 
+  // Header
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -561,15 +576,15 @@ const styles = StyleSheet.create({
   },
   headerTitle: { fontSize: 16, fontWeight: "700", letterSpacing: -0.3 },
   navBtn: { fontSize: 14, fontWeight: "600" },
-  navBtnPlaceholder: { width: 60 },
+  navBtnSpacer: { width: 60 },
   newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
-  scrollView: { flex: 1 },
-  scrollBody: { flexGrow: 1 },
+  // Scroll
+  scroll: { flexGrow: 0 },
+  scrollContent: { flexGrow: 1, padding: 16, paddingBottom: 32 },
 
   // List
-  listPad: { padding: 16, paddingBottom: 40 },
   centered: { alignItems: "center", justifyContent: "center", paddingVertical: 60 },
   emptyText: { fontSize: 14 },
   card: {
@@ -599,7 +614,7 @@ const styles = StyleSheet.create({
   chevron: { fontSize: 22, fontWeight: "300", marginLeft: 4 },
 
   // Detail
-  detailPad: { padding: 20, paddingBottom: 50 },
+  detailPad: { paddingTop: 4 },
   detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
   badgeRow: { flexDirection: "row", gap: 8, marginBottom: 16 },
   detailContent: { fontSize: 15, lineHeight: 23, marginBottom: 24 },
@@ -615,8 +630,7 @@ const styles = StyleSheet.create({
   commentsSection: { marginTop: 28, borderTopWidth: StyleSheet.hairlineWidth, paddingTop: 20 },
   commentsLabel: { fontSize: 10, fontWeight: "700", letterSpacing: 0.8, marginBottom: 12 },
   commentBubble: {
-    borderRadius: 12, borderWidth: StyleSheet.hairlineWidth,
-    padding: 14, marginBottom: 10,
+    borderRadius: 12, borderWidth: StyleSheet.hairlineWidth, padding: 14, marginBottom: 10,
   },
   commentMeta: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
   ownerBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
@@ -625,7 +639,7 @@ const styles = StyleSheet.create({
   commentContent: { fontSize: 14, lineHeight: 21 },
 
   // Create
-  createPad: { padding: 20, paddingBottom: 50 },
+  createPad: { paddingTop: 4 },
   fieldLabel: { fontSize: 10, fontWeight: "700", letterSpacing: 0.8, marginBottom: 8 },
   typeRow: { flexDirection: "row", gap: 8, marginBottom: 20, flexWrap: "wrap" },
   typeBtn: { paddingVertical: 9, paddingHorizontal: 14, borderRadius: 10, borderWidth: 1 },