Installation

Add the dependency:

npm i react-native-onboarding-modal

Peer Dependencies

"react-native-modal": ">=  13.0.0",
"react-native-snap-carousel": ">=  3.9.1"

Usage

Import

import OnboardingModal, { IOnboardingModal } from "react-native-onboarding-modal";

Data Format

const exampleData: IOnboardingModal = [
  {
    title: 'Love Nature',
    subtitle: "Let's live close to nature",
    asset: require('./assets/watering.png'),
  },
}

Basic Usage

<OnboardingModal
  data={exampleData}
  onBottomButtonPress={() => console.log("Handle Let's Go Button")}
/>

Advanced Usage

<OnboardingModal
  onboardingData={exampleData}
  buttonTextColor="#51186E"
  buttonBackgroundColor="#DCCFE2"
  photoStyle={{ width: 300, height: 300 }}
  titleStyle={{ fontSize: 32, color: "#8066BA" }}
  onBottomButtonPress={() => console.log("Handle Let's Go Button")}
/>

Configuration - Props

Fundamentals

| Property | Type | Default | Description | | -------------- | :--------------: | :-------: | ----------------------- | | onboardingData | IOnboardingModal | undefined | set data shown in modal |

Customization (Optionals)

| Property | Type | Default | Description | | --------------------- | :-----------------: | :-------: | ------------------------------------------------------------------------------ | | carouselRef | any | undefined | set carouselRef prop for carousel | | disableBottomButton | boolean | false | set visibility of the bottom button | | buttonContainer | CustomViewStyleProp | default | set your own component instead of default bottom button component | | buttonBackgroundColor | string | #21AE79 | change the button's text color | | buttonText | string | Let's Go | change the button's text | | buttonTextColor | string | #fefefe | change the button's text color | | onBottomButtonPress | function | default | handle bottom button is pressed | | cardContainerStyle | ViewStyle | default | set or override the style object for the modal main container | | carouselItemContainer | CustomViewStyleProp | default | set your own component instead of default react-native-snap-carousel component | | titleStyle | TitleStyle | default | set or override the style object for the title text style | | subtitleStyle | TitleStyle | default | set or override the style object for the subtitle text style | | photoStyle | ImageStyle | default | set or override the style object for the photo style |

Future Plans

• [x] ~~LICENSE~~

Change Log

Change log will be here !

Author

Sevval Eygul, [email protected]

License

React Native Onboarding Modal is available under the MIT license. See the LICENSE file for more info.