@upstep/react-native 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -16,11 +16,13 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-native": ">=0.73"
+    "react-native": ">=0.73",
+    "react-native-safe-area-context": ">=4"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",
     "@types/react-native": "^0.73.0",
+    "react-native-safe-area-context": "^5.8.0",
     "typescript": "^5.7.3"
   },
   "keywords": [

package/src/FeedbackSheet.tsx

@@ -12,9 +12,9 @@ import {
   ActivityIndicator,
   useColorScheme,
   Platform,
-  SafeAreaView,
   Linking,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { Comment, Feedback, FeedbackType, FeedbackWithComments } from "@upstep/types";
 import { useUpstep } from "./FeedbackContext";
 
@@ -66,6 +66,7 @@ export function FeedbackSheet() {
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
+  const insets = useSafeAreaInsets();
 
   // Refresh list every time the modal opens
   useEffect(() => {
@@ -166,19 +167,19 @@ export function FeedbackSheet() {
             )}
           </ScrollView>
 
-          {/* Branding */}
+          {/* Branding + safe-area bottom padding in one strip */}
           <TouchableOpacity
             onPress={() => Linking.openURL("https://upstep.dev")}
             activeOpacity={0.6}
-            style={[styles.poweredBy, { borderTopColor: p.border }]}
+            style={[
+              styles.poweredBy,
+              { borderTopColor: p.border, paddingBottom: insets.bottom + 10, backgroundColor: p.bg },
+            ]}
           >
             <Text style={[styles.poweredByText, { color: p.textFaint }]}>
               Powered by <Text style={{ fontWeight: "700" }}>Upstep.dev</Text>
             </Text>
           </TouchableOpacity>
-
-          {/* Safe area spacer — fills the home-indicator / nav-bar zone */}
-          <SafeAreaView style={{ backgroundColor: p.bg }} />
         </View>
       </KeyboardAvoidingView>
     </Modal>
@@ -251,12 +252,12 @@ function FeedCard({
           styles.voteBox,
           {
             borderColor: voted ? accent : p.border,
-            backgroundColor: voted ? accent + "1a" : p.bgSoft,
+            backgroundColor: voted ? accent : p.bgSoft,
           },
         ]}
       >
-        <Text style={[styles.voteArrow, { color: accent }]}>▲</Text>
-        <Text style={[styles.voteCount, { color: p.text }]}>{item.upvotes}</Text>
+        <Text style={[styles.voteArrow, { color: voted ? "#fff" : accent }]}>▲</Text>
+        <Text style={[styles.voteCount, { color: voted ? "#fff" : p.text }]}>{item.upvotes}</Text>
       </TouchableOpacity>
 
       <View style={styles.cardBody}>