react-native-my-survey-sdk 2.1.7 → 2.1.9

package/package.json

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

package/src/components/XeboIntroView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
 import { XeboSurveyPage } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
 
@@ -13,11 +13,18 @@ export const XeboIntroView: React.FC<Props> = ({ introPage, onStart }) => {
 
   return (
     <View style={styles.container}>
-      {!!introPage.content && (
-        <Text style={[styles.content, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-          {introPage.content}
-        </Text>
-      )}
+      {/* Scrollable content area — button stays pinned below no matter how long the text */}
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {!!introPage.content && (
+          <Text style={[styles.content, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {introPage.content}
+          </Text>
+        )}
+      </ScrollView>
 
       <TouchableOpacity
         style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
@@ -38,17 +45,22 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingTop: 16,
     paddingBottom: 24,
-    justifyContent: 'space-between',
+  },
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: 8,
   },
   content: {
     fontSize: 16,
     lineHeight: 24,
-    flexShrink: 1,
   },
   button: {
     paddingVertical: 14,
     alignItems: 'center',
-    marginTop: 16,
+    marginTop: 12,
   },
   buttonText: {
     color: '#FFFFFF',

package/src/components/XeboSurveyModal.tsx

@@ -1,15 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   StyleSheet,
-  Animated,
   Dimensions,
   Platform,
-  KeyboardAvoidingView,
-  Modal,
 } from 'react-native';
+import RNModal from 'react-native-modal';
 import { XeboSurveyManager, XEBO_EVENTS } from '../core/XeboSurveyManager';
 import {
   XeboSurvey,
@@ -31,10 +29,7 @@ import { XeboRatingView } from './XeboRatingView';
 import { XeboMultiRatingView } from './XeboMultiRatingView';
 
 // 'screen' includes the Android system navigation bar; 'window' excludes it.
-// We need 'screen' so the backdrop covers the full physical display.
 const SCREEN_HEIGHT = Dimensions.get('screen').height;
-const SCREEN_WIDTH  = Dimensions.get('screen').width;
-const MODAL_MAX_HEIGHT = SCREEN_HEIGHT * 0.78; // used as initial off-screen translateY value
 
 function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
   if (screen === 'thankYou') return SCREEN_HEIGHT * 0.32;
@@ -44,13 +39,12 @@ function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen):
     case XeboQuestionType.multiNps:
     case XeboQuestionType.multiRating: {
       const rowCount = question.options?.length ?? 3;
-      // base ~25% + ~15% per row, capped at 78%
       return Math.min(SCREEN_HEIGHT * 0.78, SCREEN_HEIGHT * (0.25 + rowCount * 0.15));
     }
     case XeboQuestionType.nps:
       return (question.conditionalFollowUps?.length ?? 0) > 0
-        ? SCREEN_HEIGHT * 0.62   // NPS Pro — space for follow-up card
-        : SCREEN_HEIGHT * 0.38;  // simple NPS — scale + button only
+        ? SCREEN_HEIGHT * 0.62
+        : SCREEN_HEIGHT * 0.38;
     case XeboQuestionType.rating:
       return question.followUpQuestion ? SCREEN_HEIGHT * 0.56 : SCREEN_HEIGHT * 0.38;
     case XeboQuestionType.singleTextBox:
@@ -70,7 +64,6 @@ function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen):
   }
 }
 
-// Which screen we show inside the modal
 type ModalScreen = 'intro' | 'question' | 'thankYou';
 
 export const XeboSurveyModal: React.FC = () => {
@@ -88,10 +81,6 @@ export const XeboSurveyModal: React.FC = () => {
     [survey, questionIndex, screen]
   );
 
-  // Spring slide-up animation
-  const slideAnim = useRef(new Animated.Value(MODAL_MAX_HEIGHT)).current;
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-
   // ─── Subscribe to manager events ─────────────────────────────────────────
 
   useEffect(() => {
@@ -102,10 +91,17 @@ export const XeboSurveyModal: React.FC = () => {
 
     const onVisible = (v: boolean) => {
       if (v) {
-        openModal();
-      } else {
-        closeModal();
+        // Sync survey into React state before showing so first frame isn't blank
+        const s = XeboSurveyManager.survey;
+        setSurvey(s);
+        if (s?.introPage?.enabled) {
+          setScreen('intro');
+        } else {
+          setScreen('question');
+          setQuestionIndex(XeboSurveyManager.currentQuestionIndex);
+        }
       }
+      setVisible(v);
     };
 
     const onQuestionChanged = (idx: number) => {
@@ -123,57 +119,6 @@ export const XeboSurveyModal: React.FC = () => {
     };
   }, []);
 
-  // ─── Animations ───────────────────────────────────────────────────────────
-
-  const openModal = useCallback(() => {
-    // Sync survey into React state NOW so the modal never renders blank on first frame
-    const s = XeboSurveyManager.survey;
-    setSurvey(s);
-    setVisible(true);
-    slideAnim.setValue(MODAL_MAX_HEIGHT);
-    backdropAnim.setValue(0);
-
-    // Determine initial screen
-    if (s?.introPage?.enabled) {
-      setScreen('intro');
-    } else {
-      setScreen('question');
-      setQuestionIndex(XeboSurveyManager.currentQuestionIndex);
-    }
-
-    Animated.parallel([
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        tension: 180,
-        friction: 20,
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdropAnim, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, []);
-
-  const closeModal = useCallback(() => {
-    Animated.parallel([
-      Animated.timing(slideAnim, {
-        toValue: MODAL_MAX_HEIGHT,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdropAnim, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      setVisible(false);
-      setSurvey(null);
-    });
-  }, []);
-
   // ─── User actions ─────────────────────────────────────────────────────────
 
   const handleSkip = () => {
@@ -190,8 +135,6 @@ export const XeboSurveyModal: React.FC = () => {
     const answers = Array.isArray(answer) ? answer : [answer];
     answers.forEach(a => XeboSurveyManager.recordAnswer(a));
     XeboSurveyManager.nextQuestion();
-    // questionIndex will be updated via QUESTION_CHANGED event
-    // But also check if we're now at the thank-you question
     const s = XeboSurveyManager.survey;
     const newIdx = XeboSurveyManager.currentQuestionIndex;
     if (s && s.questions[newIdx]?.id === 'thank_you_auto') {
@@ -203,7 +146,6 @@ export const XeboSurveyModal: React.FC = () => {
 
   const renderQuestion = (question: XeboQuestion) => {
     const questions = survey?.questions ?? [];
-    // The last "real" question before thank-you
     const lastRealIndex = questions.findIndex(q => q.id === 'thank_you_auto') - 1;
     const isLast = questionIndex === lastRealIndex;
 
@@ -232,8 +174,6 @@ export const XeboSurveyModal: React.FC = () => {
     }
   };
 
-  // ─── Content ──────────────────────────────────────────────────────────────
-
   const renderContent = () => {
     if (!survey) return null;
 
@@ -257,31 +197,32 @@ export const XeboSurveyModal: React.FC = () => {
     return null;
   };
 
-  if (!visible) return null;
+  // ─── Render ───────────────────────────────────────────────────────────────
 
   return (
-    <Modal
-      transparent
-      visible={visible}
-      animationType="none"
-      statusBarTranslucent
-      hardwareAccelerated
-      onRequestClose={handleSkip}
+    <RNModal
+      isVisible={visible}
+      onBackButtonPress={handleSkip}
+      backdropOpacity={0.5}
+      backdropColor="#000000"
+      style={styles.modal}
+      animationIn="slideInUp"
+      animationInTiming={350}
+      animationOut="slideOutDown"
+      animationOutTiming={300}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      coverScreen={true}
+      propagateSwipe={false}
+      avoidKeyboard={true}
+      onModalHide={() => setSurvey(null)}
     >
-      {/* Backdrop — no dismiss on tap */}
-      <Animated.View style={[styles.backdrop, { opacity: backdropAnim }]} />
-
-      <KeyboardAvoidingView
-        style={styles.kvContainer}
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        keyboardVerticalOffset={0}
-      >
-        <Animated.View
+        <View
           style={[
             styles.sheet,
             {
               backgroundColor: theme.backgroundColor,
-              transform: [{ translateY: slideAnim }],
               height: sheetHeight,
             },
           ]}
@@ -305,36 +246,22 @@ export const XeboSurveyModal: React.FC = () => {
 
           {/* Safe area bottom padding — home indicator on iOS, gesture nav on Android */}
           <View style={{ height: bottomInset }} />
-        </Animated.View>
-      </KeyboardAvoidingView>
-    </Modal>
+        </View>
+    </RNModal>
   );
 };
 
 const styles = StyleSheet.create({
-  backdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    // Explicit screen dimensions instead of absoluteFillObject so the backdrop
-    // covers the Android system navigation bar area that window-relative
-    // positioning would miss, preventing the host app's tab bar from bleeding through.
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    zIndex: 9998,
-  },
-  kvContainer: {
-    flex: 1,
+  // react-native-modal wrapper: full screen, sheet aligned to bottom
+  modal: {
     justifyContent: 'flex-end',
-    zIndex: 9999,
+    margin: 0,
   },
   sheet: {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     overflow: 'hidden',
     elevation: 9999,
-    zIndex: 9999,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: -4 },
     shadowOpacity: 0.15,