Package Exports

@pspatel/react-native-app-intro

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@pspatel/react-native-app-intro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native App Intro

React Native App Intro License React Native App Intro Top Language

This project is a React Native onboarding library that can be used to beautify user onboarding experience.

The library is completely written in typescript and highly customizable.

Library Highlights

Some of the key highlights of this library is as below:

Beautiful pagination animations.
Custom pagination component support.
Completely written in typescript.
Cross-platform support.
Highly customizable.

Properties

Interfaces

// page indicator animation whlie changing screen.
type animationType =
  | "sliding-border"
  | "sliding-dot"
  | "scaling-dot"
  | "expanding";

// Pagination component props
interface PaginationProps {
  activeDotColor?: string;
  inactiveDotColor?: string;
  dotSize?: number;
  dotSpacing?: number;
  animationType?: animationType;
  dotStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  activeDotStyle?: StyleProp<ViewStyle>;
}

// Bottom Button Props
interface BottomProps {
  showSkipButton?: boolean;
  skipButtonText?: string;
  nextButtonText?: string;
  skipTextStyle?: StyleProp<TextStyle>;
  nextTextStyle?: StyleProp<TextStyle>;
  skipContainerStyle?: StyleProp<ViewStyle>;
  nextContainerStyle?: StyleProp<ViewStyle>;
  onSkipPress?: () => void;
  onNextPress?: (activeIndex: number, nextIndex: number) => void;
  onDonePress?: () => void;
}

// Page Component Props
interface PageProps {
  title: string;
  image: ImageSourcePropType;
  description?: string;
  containerStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  imageStyle?: StyleProp<ImageStyle>;
  descriptionStyle?: StyleProp<TextStyle>;
}

Property Name	Expected Type	Default Value	Required
showPagination	boolean	false	false
paginationProps	Pagination Props	undefined	false
buttonProps	Bottom Props	undefined	false
renderPagination	( activeIndex:number , totalSlides:number ) => ReactNode	undefined	false
onSlideChange	(currentIndex: number, prevIndex: number) => void	undefined	false

Start

To add this library, simply run :

$ npm install @pspatel/react-native-app-intro

$ yarn add @pspatel/react-native-app-intro

Usage

import React from "react";
import { View, Text } from "react-native";
import { IntroSlider } from "@pspatel/react-native-app-intro";

const Screen = ({ title }) => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>{title}</Text>
    </View>
  );
};

const App = () => {
  return (
    <IntroSlider
      showPagination
      buttonProps={{
        showSkipButton: true,
      }}
    >
      <IntroSlider.Page
        title={"Any Title"}
        image={require("./path-to-image")}
        desciption={"screen description"}
        // Read more about supported props in interfaces section
      />
      <Screen title={"Screen 2"} />
      <Screen title={"Screen 3"} />
    </IntroSlider>
  );
};

Roadmap

Add a permission based component and function.
Add an option to render custom skip and next button component.
Add example directory.
Add output screenshots/gif(s).
Expose goToSlide method to end developers.