react-native-app-onboard 0.1.1

package/src/components/Page.tsx

@@ -0,0 +1,90 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import React from 'react';
+
+export type Page = {
+  title: string;
+  subtitle: string;
+  image: React.ReactNode;
+  backgroundColor: string;
+  color?: string;
+  width?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageContainerStyle?: StyleProp<ViewStyle>;
+  titleContainerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+};
+
+const { width, height } = Dimensions.get('window');
+const potrait = height > width;
+
+export function OnboardingPage(props: Page) {
+  return (
+    <View
+      style={[styles.container, { width: props.width }, props.containerStyle]}
+    >
+      <View style={[styles.imageContainer, props.imageContainerStyle]}>
+        {props.image}
+      </View>
+      <View style={[styles.titleContainer, props.titleContainerStyle]}>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: props.color,
+            },
+            props.titleStyle,
+          ]}
+        >
+          {props.title}
+        </Text>
+        <Text
+          style={[
+            styles.subtitle,
+            {
+              color: props.color,
+            },
+            props.subtitleStyle,
+          ]}
+        >
+          {props.subtitle}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    paddingBottom: 15,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 18,
+    textAlign: 'center',
+  },
+  imageContainer: {
+    flex: 0,
+    paddingBottom: potrait ? 60 : 10,
+    alignItems: 'center',
+    width: '100%',
+  },
+  titleContainer: {
+    marginHorizontal: 30,
+  },
+});

package/src/components/Pagination.tsx

@@ -0,0 +1,151 @@
+import {
+  View,
+  Animated,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import React from 'react';
+import { useOnboarding } from '../hooks/useOnboarding';
+import { Button } from './button';
+
+type FooterProps = {
+  animatedValue: Animated.Value;
+  numberOfScreens: number;
+  backgroundColor: string;
+  color: string;
+  width: number;
+  showDone?: boolean;
+  showSkip?: boolean;
+  showNext?: boolean;
+  nextLabel?: string | React.ReactNode;
+  skipLabel?: string | React.ReactNode;
+  doneLabel?: string | React.ReactNode;
+  paginationContainerStyle?: StyleProp<ViewStyle>;
+  buttonRightContainerStyle?: StyleProp<ViewStyle>;
+  buttonLeftContainerStyle?: StyleProp<ViewStyle>;
+  dotsContainerStyle?: StyleProp<ViewStyle>;
+  doneLabelStyle?: StyleProp<TextStyle>;
+  skipLabelStyle?: StyleProp<TextStyle>;
+  nextLabelStyle?: StyleProp<TextStyle>;
+  paginationPosition?: 'top' | 'bottom';
+  onDone?: () => void;
+  onSkip?: () => void;
+  onNext?: () => void;
+};
+
+export function Pagination(props: FooterProps) {
+  const { isDone } = useOnboarding();
+  const dots = Array.from({ length: props.numberOfScreens }, (_, i) => i);
+  const width = props.width;
+  return (
+    <View
+      style={[
+        styles.pagination,
+        {
+          backgroundColor: props.backgroundColor,
+        },
+        props.paginationContainerStyle,
+      ]}
+    >
+      <View
+        style={[
+          styles.buttons,
+          styles.leftButton,
+          props.buttonLeftContainerStyle,
+        ]}
+      >
+        {props.showSkip && (
+          <Button
+            onPress={props.onSkip}
+            buttonTextStyle={props.skipLabelStyle}
+            label={props.skipLabel || 'Skip'}
+          />
+        )}
+      </View>
+      <View style={styles.dotsContainer}>
+        {dots.map((_, i) => {
+          const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+          const dotOpacity = props.animatedValue.interpolate({
+            inputRange,
+            outputRange: [0.3, 1, 0.3],
+            extrapolate: 'clamp',
+          });
+          return (
+            <Animated.View
+              key={i}
+              style={[
+                styles.dot,
+                {
+                  backgroundColor: props.color,
+                  opacity: dotOpacity,
+                },
+                props.dotsContainerStyle,
+              ]}
+            />
+          );
+        })}
+      </View>
+      <View
+        style={[
+          styles.buttons,
+          styles.rightButton,
+          props.buttonRightContainerStyle,
+        ]}
+      >
+        {!isDone && props.showNext && (
+          <Button
+            onPress={props.onNext}
+            label={props.nextLabel || 'Next'}
+            buttonTextStyle={props.nextLabelStyle}
+          />
+        )}
+        {isDone && props.showDone && (
+          <Button
+            onPress={props.onDone}
+            label={props.doneLabel || 'Done'}
+            buttonTextStyle={props.doneLabelStyle}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pagination: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: 60,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+  },
+  dot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    backgroundColor: 'blue',
+    marginHorizontal: 8,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  buttons: {
+    minWidth: 200,
+  },
+  rightButton: {
+    alignItems: 'flex-end',
+    paddingRight: 30,
+  },
+  leftButton: {
+    alignItems: 'flex-start',
+    paddingLeft: 30,
+  },
+});

package/src/components/Swiper.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { OnboardingPages } from './OnboardingPages';
+import { CustomPages } from './CustomPages';
+import { Animated } from 'react-native';
+import { useOnboarding } from '../hooks/useOnboarding';
+import type { OnboardingProps } from '../types';
+
+export const Swiper: React.FC<OnboardingProps> = (props) => {
+  const scrollX = React.useRef(new Animated.Value(0)).current;
+  const {
+    flatListRef,
+    setCurrentPage,
+    currentPage,
+    numberOfScreens,
+    nextPage,
+    scrollEnabled,
+  } = useOnboarding();
+  if (props.children) {
+    return (
+      <CustomPages
+        customFooter={props.customFooter}
+        showPagination={props.showPagination}
+        flatListRef={flatListRef}
+        scrollX={scrollX}
+        setPage={setCurrentPage}
+        scrollEnabled={scrollEnabled}
+        currentPage={currentPage}
+        numberOfScreens={numberOfScreens}
+        nextPage={nextPage}
+        showDone={props.showDone}
+        onDone={props.onDone}
+      >
+        {props.children}
+      </CustomPages>
+    );
+  }
+
+  return (
+    <OnboardingPages
+      showDone={props.showDone}
+      customFooter={props.customFooter}
+      flatListRef={flatListRef}
+      scrollX={scrollX}
+      setPage={setCurrentPage}
+      currentPage={currentPage}
+      paginationPosition={props.paginationPosition}
+      nextPage={nextPage}
+      showSkip={props.showSkip}
+      onDone={props.onDone}
+      pages={props.pages || []}
+      width={props.width}
+      color={props.color}
+      onSkip={props.onSkip}
+    />
+  );
+};

package/src/components/button.tsx

@@ -0,0 +1,74 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import React from 'react';
+
+type ButtonProps = {
+  onPress?: () => void;
+  label?: string | React.ReactNode;
+  color?: string;
+  buttonStyle?: StyleProp<ViewStyle>;
+  buttonTextStyle?: StyleProp<TextStyle>;
+};
+
+export const Button = (props: ButtonProps) => {
+  return typeof props.label === 'string' ? (
+    <TouchableOpacity onPress={props.onPress} style={props.buttonStyle}>
+      <Text
+        style={[
+          styles.text,
+          {
+            color: props.color || 'white',
+          },
+          props.buttonTextStyle,
+        ]}
+      >
+        {props.label}
+      </Text>
+    </TouchableOpacity>
+  ) : (
+    props.label
+  );
+};
+
+const styles = StyleSheet.create({
+  pagination: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: 60,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+  },
+  dot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    backgroundColor: 'blue',
+    marginHorizontal: 8,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  buttons: {
+    minWidth: 200,
+  },
+  rightButton: {
+    alignItems: 'flex-end',
+    paddingRight: 30,
+  },
+  leftButton: {
+    alignItems: 'flex-start',
+    paddingLeft: 30,
+  },
+});

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Swiper';

package/src/context/OnboardingContext.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Dimensions, type FlatList } from 'react-native';
+
+export type SliderProps = {
+  currentPage: number;
+  numberOfScreens: number;
+  nextPage: (animated?: boolean) => void;
+  scrollTo: (index: number, animated?: boolean) => void;
+};
+
+type OnboardingContextType = SliderProps & {
+  setCurrentPage: (index: number) => void;
+  flatListRef: React.RefObject<FlatList>;
+  width?: number;
+  numberOfScreens: number;
+  progress: number;
+  scrollEnabled?: boolean;
+  enableScroll: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+  isDone: boolean;
+};
+
+type OnboardingProviderProps = {
+  children: React.ReactNode;
+  width?: number;
+  numberOfScreens: number;
+  scrollEnabled?: boolean;
+};
+
+export const OnboardingContext = React.createContext<
+  OnboardingContextType | undefined
+>(undefined);
+
+export const OnboardingProvider: React.FC<OnboardingProviderProps> = ({
+  children,
+  width = Dimensions.get('window').width,
+  numberOfScreens,
+  scrollEnabled,
+}) => {
+  const getProgress = (page: number) => {
+    return Math.round(((page + 1) / numberOfScreens) * 100);
+  };
+
+  const [currentPage, setPage] = React.useState(0);
+  const [progress, setProgress] = React.useState(getProgress(0));
+  const [isDone, setIsDone] = React.useState(false);
+  const [enableScroll, setEnableScroll] = React.useState<boolean | undefined>(
+    scrollEnabled
+  );
+  const flatListRef = React.useRef<FlatList>(null);
+
+  const setCurrentPage = (index: number) => {
+    setPage(index);
+    setProgress(getProgress(index));
+    setIsDone(index === numberOfScreens - 1);
+  };
+
+  const nextPage = (animated: boolean = true) => {
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        offset: width * (currentPage + 1),
+        animated: animated,
+      });
+    }
+    setCurrentPage(currentPage + 1);
+  };
+
+  const scrollTo = (index: number, animated: boolean = true) => {
+    if (flatListRef.current && index >= 0) {
+      flatListRef.current.scrollToOffset({
+        offset: index * width,
+        animated: animated,
+      });
+      setCurrentPage(index);
+    }
+  };
+
+  const contextValue: OnboardingContextType = {
+    scrollEnabled: enableScroll,
+    enableScroll: setEnableScroll,
+    currentPage,
+    numberOfScreens,
+    nextPage,
+    setCurrentPage,
+    flatListRef,
+    scrollTo,
+    progress,
+    isDone,
+  };
+
+  return (
+    <OnboardingContext.Provider value={contextValue}>
+      {children}
+    </OnboardingContext.Provider>
+  );
+};

package/src/hooks/useOnboarding.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OnboardingContext } from '../context/OnboardingContext';
+
+export const useOnboarding = () => {
+  const context = React.useContext(OnboardingContext);
+  if (!context) {
+    throw new Error(
+      'useOnboardingContext must be used within an OnboardingProvider'
+    );
+  }
+  return context;
+};

package/src/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Swiper } from './components/Swiper';
+import { OnboardingProvider } from './context/OnboardingContext';
+import type { OnboardingProps } from './types';
+
+export { useOnboarding } from './hooks/useOnboarding';
+
+export function Onboarding(props: OnboardingProps) {
+  const numberOfScreens = React.Children.count(props.children);
+  return (
+    <OnboardingProvider
+      scrollEnabled={props.scrollEnabled}
+      numberOfScreens={numberOfScreens || props.pages?.length || 0}
+    >
+      <Swiper {...props}>{props.children}</Swiper>
+    </OnboardingProvider>
+  );
+}

package/src/types/index.ts

@@ -0,0 +1,40 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { Page } from '../components/Page';
+
+export type OnboardingProps = {
+  children?: React.ReactNode[];
+  nextLabel?: string | React.ReactNode;
+  skipLabel?: string | React.ReactNode;
+  doneLabel?: string | React.ReactNode;
+  showSkip?: boolean;
+  showNext?: boolean;
+  showDone?: boolean;
+  onDone?: () => void;
+  onSkip?: () => void;
+  showPagination?: boolean;
+  scrollEnabled?: boolean;
+  customFooter?: (props: { nextPage: () => void }) => React.ReactNode;
+  paginationContainerStyle?: StyleProp<ViewStyle>;
+  buttonRightContainerStyle?: StyleProp<ViewStyle>;
+  buttonLeftContainerStyle?: StyleProp<ViewStyle>;
+  dotsContainerStyle?: StyleProp<ViewStyle>;
+  doneLabelStyle?: StyleProp<TextStyle>;
+  skipLabelStyle?: StyleProp<TextStyle>;
+  nextLabelStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageContainerStyle?: StyleProp<ViewStyle>;
+  titleContainerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  paginationPosition?: 'top' | 'bottom';
+  scrollAnimationDuration?: number;
+  useNativeDriver?: boolean;
+  width?: number;
+  color?: string;
+  pages?: Page[];
+} & (
+  | {
+      children?: React.ReactNode[];
+    }
+  | { pages: Page[] }
+);