react-native-app-onboard 0.1.3 → 0.1.5

package/src/components/Pagination.tsx

@@ -27,7 +27,11 @@ type FooterProps = {
   buttonLeftContainerStyle?: StyleProp<ViewStyle>;
   dotsContainerStyle?: StyleProp<ViewStyle>;
   doneLabelStyle?: StyleProp<TextStyle>;
+  hasSkipPosition?: boolean;
   skipLabelStyle?: StyleProp<TextStyle>;
+  skipButtonContainerStyle?: StyleProp<ViewStyle>;
+  nextButtonContainerStyle?: StyleProp<ViewStyle>;
+  doneButtonContainerStyle?: StyleProp<ViewStyle>;
   nextLabelStyle?: StyleProp<TextStyle>;
   paginationPosition?: 'top' | 'bottom';
   onDone?: () => void;
@@ -56,10 +60,11 @@ export function Pagination(props: FooterProps) {
           props.buttonLeftContainerStyle,
         ]}
       >
-        {props.showSkip && (
+        {props.showSkip && !props.hasSkipPosition && (
           <Button
             onPress={props.onSkip}
             buttonTextStyle={props.skipLabelStyle}
+            buttonStyle={props.skipButtonContainerStyle}
             label={props.skipLabel || 'Skip'}
           />
         )}
@@ -99,6 +104,7 @@ export function Pagination(props: FooterProps) {
             onPress={props.onNext}
             label={props.nextLabel || 'Next'}
             buttonTextStyle={props.nextLabelStyle}
+            buttonStyle={props.nextButtonContainerStyle}
           />
         )}
         {isDone && props.showDone && (
@@ -106,6 +112,7 @@ export function Pagination(props: FooterProps) {
             onPress={props.onDone}
             label={props.doneLabel || 'Done'}
             buttonTextStyle={props.doneLabelStyle}
+            buttonStyle={props.doneButtonContainerStyle}
           />
         )}
       </View>

package/src/components/Swiper.tsx

@@ -30,6 +30,10 @@ export const Swiper: React.FC<OnboardingProps> = (props) => {
         showDone={props.showDone}
         showNext={props.showNext}
         onDone={props.onDone}
+        skipButtonContainerStyle={props.skipButtonContainerStyle}
+        nextButtonContainerStyle={props.nextButtonContainerStyle}
+        doneButtonContainerStyle={props.doneButtonContainerStyle}
+        skipButtonPosition={props.skipButtonPosition}
       >
         {props.children}
       </CustomPages>
@@ -51,6 +55,12 @@ export const Swiper: React.FC<OnboardingProps> = (props) => {
       pages={props.pages || []}
       width={props.width}
       showNext={props.showNext}
+      skipButtonContainerStyle={props.skipButtonContainerStyle}
+      nextButtonContainerStyle={props.nextButtonContainerStyle}
+      doneButtonContainerStyle={props.doneButtonContainerStyle}
+      skipLabelStyle={props.skipLabelStyle}
+      skipButtonPosition={props.skipButtonPosition}
+      showPagination={props.showPagination}
       color={props.color}
       onSkip={props.onSkip}
     />

package/src/components/button.tsx

@@ -36,6 +36,28 @@ export const Button = (props: ButtonProps) => {
   );
 };
 
+export const SkipButton = (
+  props: ButtonProps & {
+    position?: 'top-left' | 'top-right';
+  }
+) => {
+  const buttonStyle = {
+    top: 20,
+    left: props.position === 'top-left' ? 30 : undefined,
+    right: props.position === 'top-right' ? 30 : undefined,
+  };
+
+  return (
+    <Button
+      label={props.label || 'Skip'}
+      onPress={props.onPress}
+      buttonStyle={[styles.skipButton, buttonStyle, props.buttonStyle]}
+      buttonTextStyle={props.buttonTextStyle}
+      color={props.color}
+    />
+  );
+};
+
 const styles = StyleSheet.create({
   pagination: {
     flexDirection: 'row',
@@ -71,4 +93,8 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     paddingLeft: 30,
   },
+  skipButton: {
+    position: 'absolute',
+    zIndex: 10,
+  },
 });

package/src/context/OnboardingContext.tsx

@@ -55,13 +55,13 @@ export const OnboardingProvider: React.FC<OnboardingProviderProps> = ({
   };
 
   const nextPage = (animated: boolean = true) => {
-    if (flatListRef.current) {
+    if (flatListRef.current && currentPage < numberOfScreens - 1) {
       flatListRef.current.scrollToOffset({
         offset: width * (currentPage + 1),
         animated: animated,
       });
+      setCurrentPage(currentPage + 1);
     }
-    setCurrentPage(currentPage + 1);
   };
 
   const scrollTo = (index: number, animated: boolean = true) => {

package/src/types/index.ts

@@ -20,6 +20,10 @@ export type OnboardingProps = {
   dotsContainerStyle?: StyleProp<ViewStyle>;
   doneLabelStyle?: StyleProp<TextStyle>;
   skipLabelStyle?: StyleProp<TextStyle>;
+  skipButtonContainerStyle?: StyleProp<ViewStyle>;
+  nextButtonContainerStyle?: StyleProp<ViewStyle>;
+  doneButtonContainerStyle?: StyleProp<ViewStyle>;
+  skipButtonPosition?: 'top-left' | 'top-right';
   nextLabelStyle?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   imageContainerStyle?: StyleProp<ViewStyle>;