Package Exports

react-native-onboarding-modal
react-native-onboarding-modal/build/dist/OnboardingModal.js

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 (react-native-onboarding-modal) 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 Typescript Library Starter

Installation

Add the dependency:

npm i react-native-onboarding-modal

Peer Dependencies

IMPORTANT! You need install them

"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

~~LICENSE~~

Change Log

Change log will be here !

Author

Sevval Eygul, sevvalleygull@gmail.com

License

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