@umituz/react-native-onboarding 3.6.7 → 3.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-onboarding",
3
- "version": "3.6.7",
3
+ "version": "3.6.8",
4
4
  "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -12,7 +12,10 @@ export interface BaseSlideProps {
12
12
  contentPosition?: ContentPosition;
13
13
  }
14
14
 
15
- export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlideProps) => {
15
+ export const BaseSlide = ({
16
+ children,
17
+ contentPosition = "center",
18
+ }: BaseSlideProps) => {
16
19
  const isBottom = contentPosition === "bottom";
17
20
 
18
21
  return (
@@ -20,14 +23,12 @@ export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlidePro
20
23
  style={styles.container}
21
24
  contentContainerStyle={[
22
25
  styles.content,
23
- isBottom && styles.contentBottom
26
+ isBottom ? styles.contentBottom : styles.contentCenter,
24
27
  ]}
25
28
  showsVerticalScrollIndicator={false}
26
29
  bounces={false}
27
30
  >
28
- <View style={styles.slideContainer}>
29
- {children}
30
- </View>
31
+ <View style={styles.slideContainer}>{children}</View>
31
32
  </ScrollView>
32
33
  );
33
34
  };
@@ -38,14 +39,17 @@ const styles = StyleSheet.create({
38
39
  },
39
40
  content: {
40
41
  flexGrow: 1,
41
- justifyContent: "center",
42
42
  paddingVertical: 40,
43
43
  },
44
+ contentCenter: {
45
+ justifyContent: "center",
46
+ },
44
47
  contentBottom: {
45
48
  justifyContent: "flex-end",
46
- paddingBottom: 140,
49
+ paddingBottom: 40, // Reduced from 140 as footer handles its own padding
47
50
  },
48
51
  slideContainer: {
52
+ width: "100%",
49
53
  paddingHorizontal: 24,
50
54
  alignItems: "center",
51
55
  },
@@ -90,19 +90,22 @@ export const OnboardingScreenContent = ({
90
90
  />
91
91
  )}
92
92
 
93
- {currentSlide &&
94
- (renderSlide ? (
95
- renderSlide(currentSlide)
96
- ) : currentSlide.type === "question" && currentSlide.question ? (
97
- <QuestionSlide
98
- slide={currentSlide}
99
- value={currentAnswer}
100
- onChange={onAnswerChange}
101
- variant={variant}
102
- />
103
- ) : (
104
- <OnboardingSlideComponent slide={currentSlide} variant={variant} />
105
- ))}
93
+ {currentSlide && (
94
+ <View style={styles.content}>
95
+ {renderSlide ? (
96
+ renderSlide(currentSlide)
97
+ ) : currentSlide.type === "question" && currentSlide.question ? (
98
+ <QuestionSlide
99
+ slide={currentSlide}
100
+ value={currentAnswer}
101
+ onChange={onAnswerChange}
102
+ variant={variant}
103
+ />
104
+ ) : (
105
+ <OnboardingSlideComponent slide={currentSlide} variant={variant} />
106
+ )}
107
+ </View>
108
+ )}
106
109
 
107
110
  {renderFooter ? (
108
111
  renderFooter({
@@ -135,4 +138,7 @@ const styles = StyleSheet.create({
135
138
  container: {
136
139
  flex: 1,
137
140
  },
141
+ content: {
142
+ flex: 1,
143
+ },
138
144
  });
@@ -33,7 +33,7 @@ export const QuestionSlide = ({
33
33
  if (!question) return null;
34
34
 
35
35
  return (
36
- <BaseSlide>
36
+ <BaseSlide contentPosition={slide.contentPosition}>
37
37
  <QuestionSlideHeader slide={slide} />
38
38
 
39
39
  <View style={styles.questionContainer}>