https://github.com/interfacekit/react-native-js-app-tutorial
A library for React Native to build a tutorial intro
https://github.com/interfacekit/react-native-js-app-tutorial
interfacekit react-native ui-components
Last synced: 9 months ago
JSON representation
A library for React Native to build a tutorial intro
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-js-app-tutorial
- Owner: InterfaceKit
- License: mit
- Created: 2018-03-05T15:51:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:25:40.000Z (over 3 years ago)
- Last Synced: 2025-08-05T09:28:07.219Z (10 months ago)
- Topics: interfacekit, react-native, ui-components
- Language: JavaScript
- Size: 3.29 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-js-app-tutorial
A library for React Native to build a tutorial intro.
## Getting started
```sh
$ yarn add react-native-js-app-tutorial
```
## Usage
`react-native-js-app-tutorial` has ready templates to show pages. You can import `Slide`, a template prepared to show a slide with a default style. If you prefer, you can provide your own template. Just make sure that it belongs to `IntroSlider` component (as a child).
You can also override the default skip button, passing a `skipButton` prop to `IntroSlider`.
```js
/* @flow */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { IntroSlider, Slide } from 'react-native-js-app-tutorial';
type Props = {
navigator: Object
};
class Example extends Component {
_onSkip = () => {
console.log('onSkip pressed');
};
render() {
return (
);
}
}
const styles = StyleSheet.create({
activeDot: {
backgroundColor: 'white'
},
title: {
fontFamily: 'AvenirNext-Bold'
},
description: {
fontFamily: 'Avenir Next'
},
image: {
width: '80%',
height: 200
}
});
export default Example;
```
## API
| Prop | Type | Required | Description |
| :-----------------: | :-----------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| page | number | No | Index of initial page that should be selected |
| onSkip | Function | No | Function to execute when default skip button is pressed |
| activeDotStyle | Object | No | Styles object of active dot at the bottom |
| inactiveDotStyle | Object | No | Styles object of inactive dot at the bottom |
| skipTitleButton | string | No | Title of the skip button |
| skipLastTitleButton | string | No | Title of the skip button when last page is displayed |
| skipButton | React.Element | No | Display a custom skip button component to override the default template |
| animationType | string | No | Choose a predefined animation to apply on ScrollView's children (default: `Parallax`, types: Parallax, Pager, ZoomOut, TranslateY, RotateX, RotateY, Flip & FadeIn) |
| customAnimation | Object | No | Custom animation to apply on ScrollView's children |
## License
MIT License
Copyright (c) 2018 InterfaceKit
## Author
Antonio Moreno Valls ``
Built with 💛 by [APSL](https://github.com/apsl).