react-native-my-survey-sdk 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Xebo survey collection SDK for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/XeboSurveyModal.tsx

@@ -28,8 +28,15 @@ import { XeboMultiNPSView } from './XeboMultiNPSView';
 import { XeboRatingView } from './XeboRatingView';
 import { XeboMultiRatingView } from './XeboMultiRatingView';
 
-// 'screen' includes the Android system navigation bar; 'window' excludes it.
-const SCREEN_HEIGHT = Dimensions.get('screen').height;
+// 'window' excludes the Android navigation bar; 'screen' includes it.
+// Using window height so sheets are sized relative to the usable area.
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+// Android navigation bar height = difference between screen and window.
+// Used as bottomInset so content isn't hidden behind the nav bar.
+const _androidNavBar = Platform.OS === 'android'
+  ? Math.max(0, Dimensions.get('screen').height - Dimensions.get('window').height)
+  : 0;
 
 function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
   if (screen === 'thankYou') return SCREEN_HEIGHT * 0.32;
@@ -68,8 +75,8 @@ type ModalScreen = 'intro' | 'question' | 'thankYou';
 
 export const XeboSurveyModal: React.FC = () => {
   const theme = getTheme();
-  // Static bottom inset — no SafeAreaProvider needed
-  const bottomInset = Platform.OS === 'ios' ? 34 : 16;
+  // Bottom inset: iOS home indicator (34) or Android nav bar height (min 16)
+  const bottomInset = Platform.OS === 'ios' ? 34 : Math.max(16, _androidNavBar);
 
   const [visible, setVisible] = useState(false);
   const [survey, setSurvey] = useState<XeboSurvey | null>(null);
@@ -149,28 +156,28 @@ export const XeboSurveyModal: React.FC = () => {
     const lastRealIndex = questions.findIndex(q => q.id === 'thank_you_auto') - 1;
     const isLast = questionIndex === lastRealIndex;
 
-    // key={question.id} forces React to unmount/remount on question change,
+    // key must be passed directly (not via spread) — forces unmount/remount on question change,
     // resetting all component state (selected score, text, etc.)
-    const commonProps = { key: question.id, question, isLastQuestion: isLast, onAnswer: handleAnswer };
+    const commonProps = { question, isLastQuestion: isLast, onAnswer: handleAnswer };
 
     switch (question.type) {
       case XeboQuestionType.singleChoice:
-        return <XeboSingleChoiceView {...commonProps} />;
+        return <XeboSingleChoiceView key={question.id} {...commonProps} />;
       case XeboQuestionType.multipleChoice:
-        return <XeboMultipleChoiceView {...commonProps} />;
+        return <XeboMultipleChoiceView key={question.id} {...commonProps} />;
       case XeboQuestionType.dropdown:
-        return <XeboDropdownView {...commonProps} />;
+        return <XeboDropdownView key={question.id} {...commonProps} />;
       case XeboQuestionType.singleTextBox:
       case XeboQuestionType.multipleTextBox:
-        return <XeboTextBoxView {...commonProps} />;
+        return <XeboTextBoxView key={question.id} {...commonProps} />;
       case XeboQuestionType.nps:
-        return <XeboNPSView {...commonProps} />;
+        return <XeboNPSView key={question.id} {...commonProps} />;
       case XeboQuestionType.multiNps:
-        return <XeboMultiNPSView {...commonProps} />;
+        return <XeboMultiNPSView key={question.id} {...commonProps} />;
       case XeboQuestionType.rating:
-        return <XeboRatingView {...commonProps} />;
+        return <XeboRatingView key={question.id} {...commonProps} />;
       case XeboQuestionType.multiRating:
-        return <XeboMultiRatingView {...commonProps} />;
+        return <XeboMultiRatingView key={question.id} {...commonProps} />;
       default:
         return null;
     }