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

package/package.json

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

package/src/components/XeboIntroView.tsx

@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 20,
     paddingTop: 16,
-    paddingBottom: 24,
+    paddingBottom: 8,
   },
   scroll: {
     flex: 1,

package/src/components/XeboNPSView.tsx

@@ -18,9 +18,9 @@ interface Props {
 }
 
 // NPS zone colors — matches iOS SDK defaults
-const DETRACTOR_COLOR = '#F24236'; // UIColor(red:0.95,green:0.26,blue:0.21)
-const PASSIVE_COLOR   = '#FFC208'; // UIColor(red:1.00,green:0.76,blue:0.03)
-const PROMOTER_COLOR  = '#2ECC70'; // UIColor(red:0.18,green:0.80,blue:0.44)
+const DETRACTOR_COLOR = '#F24236';
+const PASSIVE_COLOR   = '#FFC208';
+const PROMOTER_COLOR  = '#2ECC70';
 
 function npsColor(score: number, npsLabels?: XeboQuestion['npsLabels']): string {
   if (score <= 6) return npsLabels?.detractorColor ?? DETRACTOR_COLOR;
@@ -96,14 +96,12 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
       ];
 
       if (followUpChoice) {
-        // Single-choice follow-up: row_id = selected option UUID
         const selectedOption = activeFollowUp.followUpOptions.find(o => o.id === followUpChoice);
         answers.push({
           questionId: activeFollowUp.questionId,
           value: [{ rowId: followUpChoice, text: selectedOption?.text ?? '' }],
         });
       } else if (followUpText.trim()) {
-        // Text follow-up: row_id = follow-up question UUID (placeholder, matches iOS behaviour)
         answers.push({
           questionId: activeFollowUp.questionId,
           value: [{ rowId: activeFollowUp.questionId, text: followUpText }],
@@ -114,7 +112,7 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
       return;
     }
 
-    // Simple text follow-up (no separate questionId — embed text in NPS answer)
+    // Simple text follow-up
     onAnswer({
       questionId: question.id,
       value: [{ rowId, colId, text: hasTextFollowUp ? followUpText : undefined }],
@@ -122,85 +120,107 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
   };
 
   return (
-    <ScrollView
-      style={styles.scroll}
-      contentContainerStyle={styles.container}
-      showsVerticalScrollIndicator={false}
-      keyboardShouldPersistTaps="handled"
-    >
-      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-        {question.title}
-      </Text>
-      {!!question.subtitle && (
-        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-          {question.subtitle}
+    // Outer view fills modal content area; button pinned at bottom outside ScrollView
+    <View style={styles.outer}>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.title}
         </Text>
-      )}
-
-      {/* NPS Scale — single row, always-visible category colors */}
-      <View style={styles.scaleRow}>
-        {Array.from({ length: 11 }, (_, i) => {
-          const selected = selectedScore === i;
-          const color = npsColor(i, question.npsLabels);
-          return (
-            <Animated.View key={i} style={[styles.scoreCell, { transform: [{ scale: scaleAnim[i] }] }]}>
-              <TouchableOpacity
-                style={[
-                  styles.scoreButton,
-                  {
-                    backgroundColor: color,
-                    borderColor: selected ? '#000000' : color,
-                    borderWidth: selected ? 2.5 : 1.5,
-                  },
-                ]}
-                onPress={() => handleScorePress(i)}
-                activeOpacity={0.8}
-              >
-                <Text style={[
-                  styles.scoreText,
-                  { color: isColorDark(color) ? '#FFFFFF' : selected ? '#111111' : '#444444' },
-                ]}>
-                  {i}
-                </Text>
-              </TouchableOpacity>
-            </Animated.View>
-          );
-        })}
-      </View>
-
-      {/* Lower / Upper labels */}
-      {(question.npsLabels?.lower || question.npsLabels?.upper) && (
-        <View style={styles.labelsRow}>
-          <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-            {question.npsLabels?.lower ?? ''}
-          </Text>
-          <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-            {question.npsLabels?.upper ?? ''}
+        {!!question.subtitle && (
+          <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {question.subtitle}
           </Text>
+        )}
+
+        {/* NPS Scale — single row, always-visible category colors */}
+        <View style={styles.scaleRow}>
+          {Array.from({ length: 11 }, (_, i) => {
+            const selected = selectedScore === i;
+            const color = npsColor(i, question.npsLabels);
+            return (
+              <Animated.View key={i} style={[styles.scoreCell, { transform: [{ scale: scaleAnim[i] }] }]}>
+                <TouchableOpacity
+                  style={[
+                    styles.scoreButton,
+                    {
+                      backgroundColor: color,
+                      borderColor: selected ? '#000000' : color,
+                      borderWidth: selected ? 2.5 : 1.5,
+                    },
+                  ]}
+                  onPress={() => handleScorePress(i)}
+                  activeOpacity={0.8}
+                >
+                  <Text style={[
+                    styles.scoreText,
+                    { color: isColorDark(color) ? '#FFFFFF' : selected ? '#111111' : '#444444' },
+                  ]}>
+                    {i}
+                  </Text>
+                </TouchableOpacity>
+              </Animated.View>
+            );
+          })}
         </View>
-      )}
 
-      {/* Conditional follow-up (NPS Pro) */}
-      {selectedScore !== null && activeFollowUp && (
-        <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
-          <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-            {activeFollowUp.followUpQuestion}
-          </Text>
-          {activeFollowUp.followUpType === XeboQuestionType.singleChoice && activeFollowUp.followUpOptions.length > 0 ? (
-            activeFollowUp.followUpOptions.map(opt => (
-              <TouchableOpacity
-                key={opt.id}
-                style={[
-                  styles.followUpOption,
-                  followUpChoice === opt.id && { borderColor: theme.primaryColor },
-                ]}
-                onPress={() => setFollowUpChoice(opt.id)}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.followUpOptionText, { color: theme.textColor }]}>{opt.text}</Text>
-              </TouchableOpacity>
-            ))
-          ) : (
+        {/* Lower / Upper labels */}
+        {(question.npsLabels?.lower || question.npsLabels?.upper) && (
+          <View style={styles.labelsRow}>
+            <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {question.npsLabels?.lower ?? ''}
+            </Text>
+            <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {question.npsLabels?.upper ?? ''}
+            </Text>
+          </View>
+        )}
+
+        {/* Conditional follow-up (NPS Pro) */}
+        {selectedScore !== null && activeFollowUp && (
+          <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
+            <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {activeFollowUp.followUpQuestion}
+            </Text>
+            {activeFollowUp.followUpType === XeboQuestionType.singleChoice && activeFollowUp.followUpOptions.length > 0 ? (
+              activeFollowUp.followUpOptions.map(opt => (
+                <TouchableOpacity
+                  key={opt.id}
+                  style={[
+                    styles.followUpOption,
+                    followUpChoice === opt.id && { borderColor: theme.primaryColor },
+                  ]}
+                  onPress={() => setFollowUpChoice(opt.id)}
+                  activeOpacity={0.7}
+                >
+                  <Text style={[styles.followUpOptionText, { color: theme.textColor }]}>{opt.text}</Text>
+                </TouchableOpacity>
+              ))
+            ) : (
+              <TextInput
+                style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
+                placeholder="Your comment..."
+                placeholderTextColor="#9CA3AF"
+                value={followUpText}
+                onChangeText={setFollowUpText}
+                multiline
+                numberOfLines={3}
+                textAlignVertical="top"
+              />
+            )}
+          </View>
+        )}
+
+        {/* Simple text follow-up */}
+        {selectedScore !== null && hasTextFollowUp && (
+          <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
+            <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {question.followUpQuestion}
+            </Text>
             <TextInput
               style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
               placeholder="Your comment..."
@@ -211,34 +231,12 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
               numberOfLines={3}
               textAlignVertical="top"
             />
-          )}
-        </View>
-      )}
-
-      {/* Simple text follow-up */}
-      {selectedScore !== null && hasTextFollowUp && (
-        <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
-          <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-            {question.followUpQuestion}
-          </Text>
-          <TextInput
-            style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
-            placeholder="Your comment..."
-            placeholderTextColor="#9CA3AF"
-            value={followUpText}
-            onChangeText={setFollowUpText}
-            multiline
-            numberOfLines={3}
-            textAlignVertical="top"
-          />
-        </View>
-      )}
+          </View>
+        )}
+      </ScrollView>
 
+      {/* Error + button always visible at bottom, outside scroll */}
       {!!error && <Text style={styles.errorText}>{error}</Text>}
-
-      {/* Spacer pushes button to bottom */}
-      <View style={{ flex: 1 }} />
-
       <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
         <TouchableOpacity
           style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius, opacity: selectedScore === null ? 0.4 : 1 }]}
@@ -251,17 +249,20 @@ export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswe
           </Text>
         </TouchableOpacity>
       </Animated.View>
-    </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  scroll: { flex: 1 },
-  container: {
+  outer: {
+    flex: 1,
     paddingHorizontal: 20,
+    paddingBottom: 16,
+  },
+  scroll: { flex: 1 },
+  scrollContent: {
     paddingTop: 16,
-    paddingBottom: 24,
-    flexGrow: 1,
+    paddingBottom: 8,
   },
   title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
@@ -283,7 +284,7 @@ const styles = StyleSheet.create({
   labelsRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 20,
+    marginBottom: 16,
   },
   label: { fontSize: 12, opacity: 0.6 },
   followUpCard: {
@@ -307,6 +308,6 @@ const styles = StyleSheet.create({
     minHeight: 80,
   },
   errorText: { color: '#EF4444', fontSize: 13, marginBottom: 8 },
-  button: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  button: { paddingVertical: 14, alignItems: 'center', marginTop: 8 },
   buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
 });

package/src/components/XeboRatingView.tsx

@@ -27,14 +27,12 @@ function RatingIcon({
   selected,
   filled,
   color,
-  scale,
 }: {
   style: string;
   index: number;
   selected: boolean;
   filled: boolean;
   color: string;
-  scale: number;
 }) {
   const activeColor = color || '#F59E0B';
   const inactive = '#E5E7EB';
@@ -138,84 +136,83 @@ export const XeboRatingView: React.FC<Props> = ({ question, isLastQuestion, onAn
   };
 
   return (
-    <ScrollView
-      style={styles.scroll}
-      contentContainerStyle={styles.container}
-      showsVerticalScrollIndicator={false}
-      keyboardShouldPersistTaps="handled"
-    >
-      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-        {question.title}
-      </Text>
-      {!!question.subtitle && (
-        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-          {question.subtitle}
+    // Outer view fills modal content area; button pinned at bottom outside ScrollView
+    <View style={styles.outer}>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.title}
         </Text>
-      )}
-
-      {/* Rating icons row */}
-      <View style={styles.iconsRow}>
-        {Array.from({ length: totalSteps }, (_, i) => {
-          const isFilled = isCumulative ? selected !== null && i <= selected : i === selected;
-          return (
-            <TouchableOpacity
-              key={i}
-              onPress={() => handleSelect(i)}
-              style={styles.iconButton}
-              activeOpacity={0.7}
-            >
-              <RatingIcon
-                style={ratingStyle}
-                index={i}
-                selected={i === selected}
-                filled={isFilled}
-                color={ratingColor}
-                scale={1}
-              />
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-
-      {/* Column labels */}
-      {question.showColLabels && question.columns && (
-        <View style={styles.colLabels}>
-          {question.columns.map((col, i) => (
-            <Text
-              key={col.id}
-              style={[styles.colLabel, { color: theme.textColor, fontFamily: theme.fontFamily }]}
-              numberOfLines={1}
-            >
-              {col.text}
-            </Text>
-          ))}
-        </View>
-      )}
-
-      {/* Follow-up after rating */}
-      {selected !== null && !!question.followUpQuestion && (
-        <View style={[styles.followUpCard, { borderRadius: theme.cornerRadius }]}>
-          <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
-            {question.followUpQuestion}
+        {!!question.subtitle && (
+          <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {question.subtitle}
           </Text>
-          <TextInput
-            style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
-            placeholder="Your comment..."
-            placeholderTextColor="#9CA3AF"
-            value={followUpText}
-            onChangeText={setFollowUpText}
-            multiline
-            numberOfLines={3}
-            textAlignVertical="top"
-          />
+        )}
+
+        {/* Rating icons row */}
+        <View style={styles.iconsRow}>
+          {Array.from({ length: totalSteps }, (_, i) => {
+            const isFilled = isCumulative ? selected !== null && i <= selected : i === selected;
+            return (
+              <TouchableOpacity
+                key={i}
+                onPress={() => handleSelect(i)}
+                style={styles.iconButton}
+                activeOpacity={0.7}
+              >
+                <RatingIcon
+                  style={ratingStyle}
+                  index={i}
+                  selected={i === selected}
+                  filled={isFilled}
+                  color={ratingColor}
+                />
+              </TouchableOpacity>
+            );
+          })}
         </View>
-      )}
 
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
+        {/* Column labels */}
+        {question.showColLabels && question.columns && (
+          <View style={styles.colLabels}>
+            {question.columns.map((col) => (
+              <Text
+                key={col.id}
+                style={[styles.colLabel, { color: theme.textColor, fontFamily: theme.fontFamily }]}
+                numberOfLines={1}
+              >
+                {col.text}
+              </Text>
+            ))}
+          </View>
+        )}
 
-      {/* Spacer pushes button to bottom */}
-      <View style={{ flex: 1 }} />
+        {/* Follow-up after rating */}
+        {selected !== null && !!question.followUpQuestion && (
+          <View style={[styles.followUpCard, { borderRadius: theme.cornerRadius }]}>
+            <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+              {question.followUpQuestion}
+            </Text>
+            <TextInput
+              style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
+              placeholder="Your comment..."
+              placeholderTextColor="#9CA3AF"
+              value={followUpText}
+              onChangeText={setFollowUpText}
+              multiline
+              numberOfLines={3}
+              textAlignVertical="top"
+            />
+          </View>
+        )}
+      </ScrollView>
 
+      {/* Error + button always visible at bottom, outside scroll */}
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
       <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
         <TouchableOpacity
           style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius, opacity: selected === null ? 0.4 : 1 }]}
@@ -228,13 +225,18 @@ export const XeboRatingView: React.FC<Props> = ({ question, isLastQuestion, onAn
           </Text>
         </TouchableOpacity>
       </Animated.View>
-    </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingBottom: 16,
+  },
   scroll: { flex: 1 },
-  container: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24, flexGrow: 1 },
+  scrollContent: { paddingTop: 16, paddingBottom: 8 },
   title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
   iconsRow: { flexDirection: 'row', marginBottom: 8, flexWrap: 'nowrap', justifyContent: 'space-between' },
@@ -259,6 +261,6 @@ const styles = StyleSheet.create({
     minHeight: 80,
   },
   errorText: { color: '#EF4444', fontSize: 13, marginBottom: 8 },
-  button: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  button: { paddingVertical: 14, alignItems: 'center', marginTop: 8 },
   buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
 });

package/src/components/XeboSurveyModal.tsx

@@ -33,7 +33,7 @@ const SCREEN_HEIGHT = Dimensions.get('screen').height;
 
 function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
   if (screen === 'thankYou') return SCREEN_HEIGHT * 0.32;
-  if (screen === 'intro')    return SCREEN_HEIGHT * 0.52;
+  if (screen === 'intro')    return SCREEN_HEIGHT * 0.42;
   if (!question) return SCREEN_HEIGHT * 0.48;
   switch (question.type) {
     case XeboQuestionType.multiNps:

package/src/components/XeboTextBoxView.tsx

@@ -7,11 +7,8 @@ import {
   StyleSheet,
   ScrollView,
   Animated,
-  KeyboardAvoidingView,
-  Platform,
 } from 'react-native';
-import { XeboQuestion, XeboAnswer } from '../models/XeboModels';
-import { XeboQuestionType } from '../models/XeboModels';
+import { XeboQuestion, XeboAnswer, XeboQuestionType } from '../models/XeboModels';
 import { getTheme } from '../theme/XeboTheme';
 
 interface Props {
@@ -62,13 +59,12 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
   };
 
   return (
-    <KeyboardAvoidingView
-      style={styles.kvContainer}
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-    >
+    // 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}>
       <ScrollView
         style={styles.scroll}
-        contentContainerStyle={styles.container}
+        contentContainerStyle={styles.scrollContent}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
       >
@@ -109,37 +105,37 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
             />
           </View>
         ))}
-
-        {!!error && <Text style={styles.errorText}>{error}</Text>}
-
-        <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
-          <TouchableOpacity
-            style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
-            onPress={handleSubmit}
-            activeOpacity={0.8}
-          >
-            <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
-              {isLastQuestion ? 'Submit' : 'Next'}
-            </Text>
-          </TouchableOpacity>
-        </Animated.View>
       </ScrollView>
-    </KeyboardAvoidingView>
+
+      {/* Error + button always visible at bottom, outside scroll */}
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+      <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+          onPress={handleSubmit}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+            {isLastQuestion ? 'Submit' : 'Next'}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  kvContainer: {
+  outer: {
     flex: 1,
+    paddingHorizontal: 20,
+    paddingBottom: 16,
   },
   scroll: {
     flex: 1,
   },
-  container: {
-    paddingHorizontal: 20,
+  scrollContent: {
     paddingTop: 16,
-    paddingBottom: 24,
-    flexGrow: 1,
+    paddingBottom: 8,
   },
   title: {
     fontSize: 18,