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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "description": "Xebo survey collection SDK for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -24,4 +24,4 @@
     "@types/react-native": "^0.73.0",
     "typescript": "^5.3.0"
   }
-}
+}

package/src/components/XeboIntroView.tsx

@@ -13,7 +13,8 @@ export const XeboIntroView: React.FC<Props> = ({ introPage, onStart }) => {
 
   return (
     <View style={styles.container}>
-      {/* Scrollable content area — button stays pinned below no matter how long the text */}
+      {/* Scrollable content — button is absolutely pinned at bottom so it's
+          always visible regardless of how the flex layout settles on first render */}
       <ScrollView
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
@@ -46,9 +47,12 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 8,
   },
+  // marginBottom leaves a fixed gap for the absolutely-positioned button below.
+  // 48 = button height (paddingVertical 14×2 + text ~20) + 12 gap = 60dp
   scroll: {
     flex: 1,
     minHeight: 0,
+    marginBottom: 60,
   },
   scrollContent: {
     paddingBottom: 8,
@@ -57,10 +61,15 @@ const styles = StyleSheet.create({
     fontSize: 16,
     lineHeight: 24,
   },
+  // Absolute positioning ensures this button is ALWAYS visible at the bottom,
+  // immune to first-render flex layout measurement issues on Android.
   button: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
     paddingVertical: 14,
     alignItems: 'center',
-    marginTop: 12,
   },
   buttonText: {
     color: '#FFFFFF',

package/src/components/XeboSurveyModal.tsx

@@ -41,8 +41,8 @@ const _androidNavBar = Platform.OS === 'android'
   : 0;
 
 function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
-  if (screen === 'thankYou') return SCREEN_HEIGHT * 0.32;
-  if (screen === 'intro')    return SCREEN_HEIGHT * 0.42;
+  if (screen === 'thankYou') return SCREEN_HEIGHT * 0.35;
+  if (screen === 'intro')    return SCREEN_HEIGHT * 0.55;
   if (!question) return SCREEN_HEIGHT * 0.48;
   switch (question.type) {
     case XeboQuestionType.multiNps:
@@ -57,16 +57,18 @@ function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen):
     case XeboQuestionType.rating:
       return question.followUpQuestion ? SCREEN_HEIGHT * 0.56 : SCREEN_HEIGHT * 0.38;
     case XeboQuestionType.singleTextBox:
-      return SCREEN_HEIGHT * 0.44;
+      // title + 4-line input + button — no wasted space
+      return SCREEN_HEIGHT * 0.40;
     case XeboQuestionType.multipleTextBox: {
       const fieldCount = question.options?.length ?? 1;
-      return Math.min(SCREEN_HEIGHT * 0.70, SCREEN_HEIGHT * (0.28 + fieldCount * 0.10));
+      return Math.min(SCREEN_HEIGHT * 0.72, SCREEN_HEIGHT * (0.30 + fieldCount * 0.12));
     }
     case XeboQuestionType.singleChoice:
     case XeboQuestionType.multipleChoice:
     case XeboQuestionType.dropdown: {
+      // each option row ≈ 58dp; base includes title + button; 0.085 per option is accurate
       const optCount = question.options?.length ?? 0;
-      return Math.min(SCREEN_HEIGHT * 0.72, SCREEN_HEIGHT * (0.30 + optCount * 0.058));
+      return Math.min(SCREEN_HEIGHT * 0.80, SCREEN_HEIGHT * (0.28 + optCount * 0.085));
     }
     default:
       return SCREEN_HEIGHT * 0.48;
@@ -270,35 +272,38 @@ export const XeboSurveyModal: React.FC = () => {
         shiftAnim.setValue(0); // reset in case keyboard was open when modal closed
       }}
     >
-        <Animated.View
-          style={[
-            styles.sheet,
-            {
-              backgroundColor: theme.backgroundColor,
-              height: sheetHeight,
-              transform: [{ translateY: shiftAnim }],
-            },
-          ]}
-        >
-          {/* Handle bar */}
-          <View style={styles.handleWrap}>
-            <View style={styles.handle} />
-          </View>
-
-          {/* Skip button — right aligned */}
-          {screen !== 'thankYou' && (
-            <View style={styles.skipRow}>
-              <TouchableOpacity onPress={handleSkip} style={styles.skipButton} activeOpacity={0.7}>
-                <Text style={[styles.skipText, { color: theme.textColor }]}>Skip</Text>
-              </TouchableOpacity>
+        {/* Animated.View handles ONLY the keyboard shift (transform).
+            The inner View owns height/layout so flex children compute correctly. */}
+        <Animated.View style={{ transform: [{ translateY: shiftAnim }] }}>
+          <View
+            style={[
+              styles.sheet,
+              {
+                backgroundColor: theme.backgroundColor,
+                height: sheetHeight,
+              },
+            ]}
+          >
+            {/* Handle bar */}
+            <View style={styles.handleWrap}>
+              <View style={styles.handle} />
             </View>
-          )}
 
-          {/* Main content */}
-          <View style={styles.content}>{renderContent()}</View>
+            {/* Skip button — right aligned */}
+            {screen !== 'thankYou' && (
+              <View style={styles.skipRow}>
+                <TouchableOpacity onPress={handleSkip} style={styles.skipButton} activeOpacity={0.7}>
+                  <Text style={[styles.skipText, { color: theme.textColor }]}>Skip</Text>
+                </TouchableOpacity>
+              </View>
+            )}
 
-          {/* Safe area bottom padding — home indicator on iOS, gesture nav on Android */}
-          <View style={{ height: bottomInset }} />
+            {/* Main content */}
+            <View style={styles.content}>{renderContent()}</View>
+
+            {/* Safe area bottom padding — home indicator on iOS, gesture nav on Android */}
+            <View style={{ height: bottomInset }} />
+          </View>
         </Animated.View>
     </RNModal>
   );