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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "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);
@@ -217,7 +224,6 @@ export const XeboSurveyModal: React.FC = () => {
       hideModalContentWhileAnimating={true}
       coverScreen={true}
       propagateSwipe={false}
-      avoidKeyboard={true}
       onModalHide={() => setSurvey(null)}
     >
         <View

package/src/components/XeboTextBoxView.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -7,6 +7,8 @@ import {
   StyleSheet,
   ScrollView,
   Animated,
+  Keyboard,
+  Platform,
 } from 'react-native';
 import { XeboQuestion, XeboAnswer, XeboQuestionType } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
@@ -24,7 +26,27 @@ 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(() => {
+      scrollRef.current?.scrollTo({ y: idx * 80, animated: true });
+    }, 150);
+  };
 
   const shake = () => {
     Animated.sequence([
@@ -59,10 +81,11 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
   };
 
   return (
-    // Outer view fills modal content area; button pinned at bottom outside ScrollView.
-    // react-native-modal's avoidKeyboard=true moves the whole modal up — no KAV needed.
-    <View style={styles.outer}>
+    // 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 }]}>
       <ScrollView
+        ref={scrollRef}
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
         keyboardShouldPersistTaps="handled"
@@ -98,6 +121,7 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
               placeholderTextColor="#9CA3AF"
               value={values[field.id] ?? ''}
               onChangeText={text => handleChange(field.id, text)}
+              onFocus={() => handleFocus(idx)}
               multiline={!isMulti}
               numberOfLines={isMulti ? 1 : 4}
               textAlignVertical={isMulti ? 'center' : 'top'}