react-native-my-survey-sdk 2.2.9 → 2.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "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/XeboDropdownView.tsx

@@ -61,28 +61,28 @@ export const XeboDropdownView: React.FC<Props> = ({ question, isLastQuestion, on
         </Text>
       )}
 
-      {/* Dropdown trigger */}
-      <TouchableOpacity
-        style={[styles.trigger, { borderColor: isOpen ? theme.primaryColor : '#E5E7EB', borderRadius: theme.cornerRadius }]}
-        onPress={() => setIsOpen(prev => !prev)}
-        activeOpacity={0.8}
-      >
-        <Text
-          style={[
-            styles.triggerText,
-            { color: selectedChoice ? theme.textColor : '#9CA3AF', fontFamily: theme.fontFamily },
-          ]}
+      <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+        <TouchableOpacity
+          style={[styles.trigger, { borderColor: isOpen ? theme.primaryColor : '#E5E7EB', borderRadius: theme.cornerRadius }]}
+          onPress={() => setIsOpen(prev => !prev)}
+          activeOpacity={0.8}
         >
-          {selectedChoice ? selectedChoice.text : (question.placeholder || 'Select an option')}
-        </Text>
-        <Text style={[styles.chevron, { color: theme.textColor }]}>{isOpen ? '▲' : '▼'}</Text>
-      </TouchableOpacity>
+          <Text
+            style={[
+              styles.triggerText,
+              { color: selectedChoice ? theme.textColor : '#9CA3AF', fontFamily: theme.fontFamily },
+            ]}
+          >
+            {selectedChoice ? selectedChoice.text : (question.placeholder || 'Select an option')}
+          </Text>
+          <Text style={[styles.chevron, { color: theme.textColor }]}>{isOpen ? '▲' : '▼'}</Text>
+        </TouchableOpacity>
+      </Animated.View>
 
-      {/* Options list */}
       {isOpen && (
         <View style={[styles.optionsList, { borderColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}>
           <ScrollView nestedScrollEnabled style={styles.optionsScroll} showsVerticalScrollIndicator={false}>
-            {(question.options ?? []).map(choice => (
+            {(question.options ?? []).map((choice: XeboChoice) => (
               <TouchableOpacity
                 key={choice.id}
                 style={[
@@ -112,26 +112,25 @@ export const XeboDropdownView: React.FC<Props> = ({ question, isLastQuestion, on
 
       {!!error && <Text style={styles.errorText}>{error}</Text>}
 
-      {selectedChoice && (
-        <Animated.View style={[styles.buttonWrap, { transform: [{ translateX: shakeAnim }] }]}>
-          <TouchableOpacity
-            style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
-            onPress={handleNext}
-            activeOpacity={0.8}
-          >
-            <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
-              {isLastQuestion ? 'Submit' : 'Next'}
-            </Text>
-          </TouchableOpacity>
-        </Animated.View>
-      )}
+      <TouchableOpacity
+        style={[
+          styles.button,
+          { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius },
+          (question.isRequired && !selectedChoice) && styles.buttonDisabled,
+        ]}
+        onPress={handleNext}
+        activeOpacity={0.8}
+      >
+        <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+          {isLastQuestion ? 'Submit' : 'Next'}
+        </Text>
+      </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     paddingHorizontal: 20,
     paddingTop: 16,
     paddingBottom: 24,
@@ -139,7 +138,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '700',
-    marginBottom: 6,
+    marginBottom: 16,
   },
   subtitle: {
     fontSize: 14,
@@ -151,7 +150,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1.5,
     padding: 14,
-    marginBottom: 4,
   },
   triggerText: {
     fontSize: 15,
@@ -162,11 +160,13 @@ const styles = StyleSheet.create({
   },
   optionsList: {
     borderWidth: 1.5,
-    maxHeight: 220,
+    maxHeight: 200,
+    marginTop: 6,
     marginBottom: 12,
+    overflow: 'hidden',
   },
   optionsScroll: {
-    flexGrow: 0,
+    flex: 1,
   },
   optionRow: {
     padding: 14,
@@ -179,15 +179,16 @@ const styles = StyleSheet.create({
   errorText: {
     color: '#EF4444',
     fontSize: 13,
-    marginBottom: 8,
-  },
-  buttonWrap: {
-    marginTop: 'auto',
+    marginTop: 6,
+    marginBottom: 4,
   },
   button: {
     paddingVertical: 14,
     alignItems: 'center',
-    marginTop: 8,
+    marginTop: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.4,
   },
   buttonText: {
     color: '#FFFFFF',

package/src/components/XeboIntroView.tsx

@@ -12,20 +12,18 @@ export const XeboIntroView: React.FC<Props> = ({ introPage, onStart }) => {
   const theme = getTheme();
 
   return (
-    // Same pattern as NPS/Rating: outer flex view, scroll takes remaining space,
-    // button sits OUTSIDE scroll in normal flow — no absolute positioning needed.
     <View style={styles.outer}>
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {!!introPage.content && (
+      {!!introPage.content && (
+        <ScrollView
+          style={styles.scroll}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.scrollContent}
+        >
           <Text style={[styles.content, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
             {introPage.content}
           </Text>
-        )}
-      </ScrollView>
+        </ScrollView>
+      )}
 
       <TouchableOpacity
         style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
@@ -42,26 +40,25 @@ export const XeboIntroView: React.FC<Props> = ({ introPage, onStart }) => {
 
 const styles = StyleSheet.create({
   outer: {
-    flex: 1,
     paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
   },
   scroll: {
-    flex: 1,
-    minHeight: 0,
+    maxHeight: 220,
+    marginBottom: 4,
   },
   scrollContent: {
     paddingBottom: 8,
   },
   content: {
     fontSize: 16,
-    lineHeight: 24,
+    lineHeight: 26,
   },
   button: {
     paddingVertical: 14,
     alignItems: 'center',
-    marginTop: 12,
+    marginTop: 16,
   },
   buttonText: {
     color: '#FFFFFF',

package/src/components/XeboMultiRatingView.tsx

@@ -142,11 +142,11 @@ export const XeboMultiRatingView: React.FC<Props> = ({ question, isLastQuestion,
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
-  title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
+  container: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 16 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
-  scroll: { flex: 1, minHeight: 0, marginBottom: 12 },
-  rowWrap: { marginBottom: 20 },
+  scroll: { maxHeight: 280, marginBottom: 12 },
+  rowWrap: { marginBottom: 24 },
   rowLabel: { fontSize: 15, fontWeight: '500', marginBottom: 8 },
   iconsRow: { flexDirection: 'row', flexWrap: 'nowrap', justifyContent: 'space-between' },
   iconButton: { alignItems: 'center', justifyContent: 'center' },

package/src/components/XeboMultipleChoiceView.tsx

@@ -54,7 +54,7 @@ export const XeboMultipleChoiceView: React.FC<Props> = ({ question, isLastQuesti
       questionId: question.id,
       value: Array.from(selectedIds).map(id => ({
         rowId: id,
-        text: question.options?.find(o => o.id === id)?.text,
+        text: question.options?.find((o: XeboChoice) => o.id === id)?.text,
       })),
     });
   };
@@ -71,7 +71,7 @@ export const XeboMultipleChoiceView: React.FC<Props> = ({ question, isLastQuesti
       )}
 
       <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
-        {(question.options ?? []).map(choice => {
+        {(question.options ?? []).map((choice: XeboChoice) => {
           const selected = selectedIds.has(choice.id);
           return (
             <TouchableOpacity
@@ -121,7 +121,6 @@ export const XeboMultipleChoiceView: React.FC<Props> = ({ question, isLastQuesti
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     paddingHorizontal: 20,
     paddingTop: 16,
     paddingBottom: 24,
@@ -129,7 +128,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '700',
-    marginBottom: 6,
+    marginBottom: 16,
   },
   subtitle: {
     fontSize: 14,
@@ -137,8 +136,7 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   optionsList: {
-    flex: 1,
-    minHeight: 0,
+    maxHeight: 280,
     marginBottom: 12,
   },
   optionRow: {

package/src/components/XeboRatingView.tsx

@@ -233,15 +233,14 @@ export const XeboRatingView: React.FC<Props> = ({ question, isLastQuestion, onAn
 
 const styles = StyleSheet.create({
   outer: {
-    flex: 1,
     paddingHorizontal: 20,
-    paddingBottom: 16,
+    paddingBottom: 24,
   },
-  scroll: { flex: 1, minHeight: 0 },
+  scroll: { maxHeight: 320 },
   scrollContent: { paddingTop: 16, paddingBottom: 8 },
-  title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 16 },
   subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
-  iconsRow: { flexDirection: 'row', marginBottom: 8, flexWrap: 'nowrap', justifyContent: 'space-between' },
+  iconsRow: { flexDirection: 'row', marginTop: 4, marginBottom: 20, flexWrap: 'nowrap', justifyContent: 'space-between' },
   iconButton: { alignItems: 'center', justifyContent: 'center' },
   colLabels: {
     flexDirection: 'row',

package/src/components/XeboSingleChoiceView.tsx

@@ -106,7 +106,6 @@ export const XeboSingleChoiceView: React.FC<Props> = ({ question, isLastQuestion
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     paddingHorizontal: 20,
     paddingTop: 16,
     paddingBottom: 24,
@@ -114,7 +113,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '700',
-    marginBottom: 6,
+    marginBottom: 16,
   },
   subtitle: {
     fontSize: 14,
@@ -122,8 +121,7 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   optionsList: {
-    flex: 1,
-    minHeight: 0,
+    maxHeight: 280,
     marginBottom: 12,
   },
   optionRow: {

package/src/components/XeboSurveyModal.tsx

@@ -42,7 +42,7 @@ const _androidNavBar = Platform.OS === 'android'
 
 function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
   if (screen === 'thankYou') return SCREEN_HEIGHT * 0.35;
-  if (screen === 'intro')    return SCREEN_HEIGHT * 0.55;
+  if (screen === 'intro')    return SCREEN_HEIGHT * 0.40;
   if (!question) return SCREEN_HEIGHT * 0.48;
   switch (question.type) {
     case XeboQuestionType.multiNps:
@@ -289,14 +289,43 @@ export const XeboSurveyModal: React.FC = () => {
               <View style={styles.handle} />
             </View>
 
-            {/* Skip button — right aligned */}
-            {screen !== 'thankYou' && (
-              <View style={styles.skipRow}>
+            {/* Header row: progress bar + Skip / X close */}
+            <View style={styles.headerRow}>
+              <View style={styles.progressArea}>
+                {screen === 'question' && survey && (() => {
+                  const realQs = survey.questions.filter((q: XeboQuestion) => q.id !== 'thank_you_auto');
+                  const total = realQs.length;
+                  if (total === 0) return null;
+                  return (
+                    <View style={styles.progressContainer}>
+                      <View style={[styles.progressTrack, { backgroundColor: '#E5E7EB' }]}>
+                        <View
+                          style={[
+                            styles.progressFill,
+                            {
+                              backgroundColor: theme.primaryColor,
+                              width: `${((questionIndex + 1) / total) * 100}%` as any,
+                            },
+                          ]}
+                        />
+                      </View>
+                      <Text style={[styles.progressText, { color: theme.textColor }]}>
+                        {questionIndex + 1} / {total}
+                      </Text>
+                    </View>
+                  );
+                })()}
+              </View>
+              {screen === 'thankYou' ? (
+                <TouchableOpacity onPress={handleSkip} style={styles.closeButton} activeOpacity={0.7}>
+                  <Text style={[styles.closeText, { color: theme.textColor }]}>✕</Text>
+                </TouchableOpacity>
+              ) : (
                 <TouchableOpacity onPress={handleSkip} style={styles.skipButton} activeOpacity={0.7}>
                   <Text style={[styles.skipText, { color: theme.textColor }]}>Skip</Text>
                 </TouchableOpacity>
-              </View>
-            )}
+              )}
+            </View>
 
             {/* Main content */}
             <View style={styles.content}>{renderContent()}</View>
@@ -336,11 +365,36 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     backgroundColor: '#D1D5DB',
   },
-  skipRow: {
+  headerRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-end',
+    alignItems: 'center',
     paddingHorizontal: 16,
     paddingBottom: 4,
+    minHeight: 36,
+  },
+  progressArea: {
+    flex: 1,
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  progressTrack: {
+    flex: 1,
+    height: 4,
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: 4,
+    borderRadius: 2,
+  },
+  progressText: {
+    fontSize: 12,
+    opacity: 0.6,
+    minWidth: 36,
+    textAlign: 'right',
   },
   skipButton: {
     paddingHorizontal: 12,
@@ -351,6 +405,15 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     opacity: 0.6,
   },
+  closeButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  closeText: {
+    fontSize: 18,
+    fontWeight: '600',
+    opacity: 0.7,
+  },
   content: {
     flex: 1,
   },

package/src/components/XeboTextBoxView.tsx

@@ -136,13 +136,11 @@ export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onA
 
 const styles = StyleSheet.create({
   outer: {
-    flex: 1,
     paddingHorizontal: 20,
-    paddingBottom: 16,
+    paddingBottom: 24,
   },
   scroll: {
-    flex: 1,
-    minHeight: 0,
+    maxHeight: 340,
   },
   scrollContent: {
     paddingTop: 16,
@@ -151,7 +149,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '700',
-    marginBottom: 6,
+    marginBottom: 16,
   },
   subtitle: {
     fontSize: 14,