react-native-my-survey-sdk 2.2.4 → 2.2.6

package/package.json

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

package/src/components/XeboIntroView.tsx

@@ -48,9 +48,9 @@ const styles = StyleSheet.create({
   },
   scroll: {
     flex: 1,
+    minHeight: 0,
   },
   scrollContent: {
-    flexGrow: 1,
     paddingBottom: 8,
   },
   content: {

package/src/components/XeboMultiNPSView.tsx

@@ -145,7 +145,7 @@ const styles = StyleSheet.create({
   container: { flex: 1, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
   title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
-  scroll: { flex: 1, marginBottom: 12 },
+  scroll: { flex: 1, minHeight: 0, marginBottom: 12 },
   rowWrap: { marginBottom: 20 },
   rowLabel: { fontSize: 15, fontWeight: '500', marginBottom: 8 },
   scaleRow: {

package/src/components/XeboMultiRatingView.tsx

@@ -145,7 +145,7 @@ const styles = StyleSheet.create({
   container: { flex: 1, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
   title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
-  scroll: { flex: 1, marginBottom: 12 },
+  scroll: { flex: 1, minHeight: 0, marginBottom: 12 },
   rowWrap: { marginBottom: 20 },
   rowLabel: { fontSize: 15, fontWeight: '500', marginBottom: 8 },
   iconsRow: { flexDirection: 'row', flexWrap: 'nowrap', justifyContent: 'space-between' },

package/src/components/XeboMultipleChoiceView.tsx

@@ -138,6 +138,7 @@ const styles = StyleSheet.create({
   },
   optionsList: {
     flex: 1,
+    minHeight: 0,
     marginBottom: 12,
   },
   optionRow: {

package/src/components/XeboNPSView.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   Animated,
   TextInput,
+  Keyboard,
 } from 'react-native';
 import { XeboQuestion, XeboAnswer, XeboConditionalFollowUp, XeboQuestionType } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
@@ -85,6 +86,7 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
       return;
     }
 
+    Keyboard.dismiss();
     const score = selectedScore ?? 0;
     const colId = question.columns?.[score]?.id ?? score.toString();
     const rowId = question.options?.[0]?.id ?? score.toString();
@@ -259,7 +261,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingBottom: 16,
   },
-  scroll: { flex: 1 },
+  scroll: { flex: 1, minHeight: 0 },
   scrollContent: {
     paddingTop: 16,
     paddingBottom: 8,

package/src/components/XeboRatingView.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   Animated,
   TextInput,
+  Keyboard,
 } from 'react-native';
 import { XeboQuestion, XeboAnswer } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
@@ -125,6 +126,7 @@ export const XeboRatingView: React.FC<Props> = ({ question, isLastQuestion, onAn
       shake();
       return;
     }
+    Keyboard.dismiss();
     const idx = selected ?? 0;
     const colId = question.columns?.[idx]?.id ?? idx.toString();
     const rowId = question.options?.[0]?.id ?? 'rating';
@@ -235,7 +237,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingBottom: 16,
   },
-  scroll: { flex: 1 },
+  scroll: { flex: 1, minHeight: 0 },
   scrollContent: { paddingTop: 16, paddingBottom: 8 },
   title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },

package/src/components/XeboSingleChoiceView.tsx

@@ -123,6 +123,7 @@ const styles = StyleSheet.create({
   },
   optionsList: {
     flex: 1,
+    minHeight: 0,
     marginBottom: 12,
   },
   optionRow: {

package/src/components/XeboSurveyModal.tsx

@@ -1,5 +1,7 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Animated,
+  Keyboard,
   View,
   Text,
   TouchableOpacity,
@@ -78,6 +80,13 @@ export const XeboSurveyModal: React.FC = () => {
   // Bottom inset: iOS home indicator (34) or Android nav bar height (min 16)
   const bottomInset = Platform.OS === 'ios' ? 34 : Math.max(16, _androidNavBar);
 
+  // Slides the sheet above the keyboard when any TextInput is focused.
+  // Using translateY keeps the layout stable — no height re-calculation needed.
+  const shiftAnim = useRef(new Animated.Value(0)).current;
+  // Ref so the keyboard listener can always read the latest sheetHeight without
+  // being re-registered every time the question changes.
+  const sheetHeightRef = useRef(0);
+
   const [visible, setVisible] = useState(false);
   const [survey, setSurvey] = useState<XeboSurvey | null>(null);
   const [screen, setScreen] = useState<ModalScreen>('intro');
@@ -87,6 +96,38 @@ export const XeboSurveyModal: React.FC = () => {
     () => computeSheetHeight(survey?.questions[questionIndex] ?? null, screen),
     [survey, questionIndex, screen]
   );
+  // Keep ref in sync so keyboard listener always has the latest height
+  sheetHeightRef.current = sheetHeight;
+
+  // ─── Keyboard: slide sheet above keyboard when any TextInput focuses ──────
+
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const onShow = (e: { endCoordinates: { height: number } }) => {
+      const kh = e.endCoordinates.height;
+      // Cap so the sheet never slides above a 24px top margin
+      const maxShift = Math.max(0, SCREEN_HEIGHT - sheetHeightRef.current - 24);
+      Animated.timing(shiftAnim, {
+        toValue: -Math.min(kh, maxShift),
+        duration: Platform.OS === 'ios' ? 250 : 0,
+        useNativeDriver: true,
+      }).start();
+    };
+
+    const onHide = () => {
+      Animated.timing(shiftAnim, {
+        toValue: 0,
+        duration: Platform.OS === 'ios' ? 200 : 0,
+        useNativeDriver: true,
+      }).start();
+    };
+
+    const showSub = Keyboard.addListener(showEvent, onShow);
+    const hideSub = Keyboard.addListener(hideEvent, onHide);
+    return () => { showSub.remove(); hideSub.remove(); };
+  }, []); // mount-only — sheetHeightRef keeps the height current without re-subscribing
 
   // ─── Subscribe to manager events ─────────────────────────────────────────
 
@@ -224,14 +265,18 @@ export const XeboSurveyModal: React.FC = () => {
       hideModalContentWhileAnimating={true}
       coverScreen={true}
       propagateSwipe={false}
-      onModalHide={() => setSurvey(null)}
+      onModalHide={() => {
+        setSurvey(null);
+        shiftAnim.setValue(0); // reset in case keyboard was open when modal closed
+      }}
     >
-        <View
+        <Animated.View
           style={[
             styles.sheet,
             {
               backgroundColor: theme.backgroundColor,
               height: sheetHeight,
+              transform: [{ translateY: shiftAnim }],
             },
           ]}
         >
@@ -254,7 +299,7 @@ export const XeboSurveyModal: React.FC = () => {
 
           {/* Safe area bottom padding — home indicator on iOS, gesture nav on Android */}
           <View style={{ height: bottomInset }} />
-        </View>
+        </Animated.View>
     </RNModal>
   );
 };

package/src/components/XeboTextBoxView.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState } from 'react';
 import {
   View,
   Text,
@@ -8,7 +8,6 @@ import {
   ScrollView,
   Animated,
   Keyboard,
-  Platform,
 } from 'react-native';
 import { XeboQuestion, XeboAnswer, XeboQuestionType } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
@@ -26,21 +25,9 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
 
   const [values, setValues] = useState<Record<string, string>>({});
   const [error, setError] = useState('');
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const shakeAnim = useRef(new Animated.Value(0)).current;
   const scrollRef = useRef<ScrollView>(null);
 
-  // Track keyboard height so the outer container can push button above keyboard.
-  // KAV does not work reliably inside react-native-modal on Android — this is the
-  // proven alternative: increase paddingBottom by keyboard height so content shifts up.
-  useEffect(() => {
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const showSub = Keyboard.addListener(showEvent, (e: { endCoordinates: { height: number } }) => setKeyboardHeight(e.endCoordinates.height));
-    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
-    return () => { showSub.remove(); hideSub.remove(); };
-  }, []);
-
   // Scroll so the focused field is visible above the button when keyboard is up
   const handleFocus = (idx: number) => {
     setTimeout(() => {
@@ -72,6 +59,7 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
       }
     }
 
+    Keyboard.dismiss();
     onAnswer({
       questionId: question.id,
       value: fields
@@ -81,9 +69,7 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
   };
 
   return (
-    // paddingBottom grows to keyboard height so the button is always above the keyboard.
-    // The ScrollView above it shrinks accordingly; onFocus scrolls the active field into view.
-    <View style={[styles.outer, { paddingBottom: keyboardHeight > 0 ? keyboardHeight + 8 : 16 }]}>
+    <View style={styles.outer}>
       <ScrollView
         ref={scrollRef}
         style={styles.scroll}
@@ -156,6 +142,7 @@ const styles = StyleSheet.create({
   },
   scroll: {
     flex: 1,
+    minHeight: 0,
   },
   scrollContent: {
     paddingTop: 16,

package/src/core/XeboNetworkService.ts

@@ -342,9 +342,9 @@ export async function submitResponse(
         questions: filteredAnswers.map(a => ({
           uuid: a.questionId,
           answer: a.value.map(v => ({
-            row_id: v.rowId,
-            col_id: v.colId ?? '',
-            text: v.text ?? '',
+            row_id: v.rowId || null,
+            col_id: v.colId || null,
+            text: v.text || null,
           })),
         })),
       },