diff --git a/README.md b/README.md
index 692791b..7881c2d 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ export default class App extends React.Component {
```javascript
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
-import { StyleSheet, View } from 'react-native';
+import {StyleSheet, View} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
const styles = StyleSheet.create({
@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
// slides = [...]
export default class App extends React.Component {
- _renderItem = ({ item }) => {
+ _renderItem = ({item}) => {
return (
{item.title}
@@ -106,7 +106,7 @@ export default class App extends React.Component {
{item.text}
);
- }
+ };
_renderNextButton = () => {
return (
@@ -121,11 +121,7 @@ export default class App extends React.Component {
_renderDoneButton = () => {
return (
-
+
);
};
@@ -141,7 +137,6 @@ export default class App extends React.Component {
}
```
-
Here a custom `renderItem` is supplied and the `bottomButton`-props has been set to `true`. Notice how the setup of `slides` has been configured to support icons and gradient backgrounds.
## Props and methods
@@ -150,30 +145,31 @@ The component extends `FlatList` so all FlatList-props are valid.
### Props
-| Name | Type | Default | Description |
-| ---------------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| data | `object` | None, required | An array of objects (they should either contain a unique `key`-prop or you should pass a `keyExtractor`-function to the component) |
+| Name | Type | Default | Description |
+| ---------------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data | `object` | None, required | An array of objects (they should either contain a unique `key`-prop or you should pass a `keyExtractor`-function to the component) |
| renderItem | `function` | None, required | [FlatList's renderItem](https://facebook.github.io/react-native/docs/flatlist.html#renderitem). Receives `({item, index, dimensions})` where `dimensions` contains height and width of the slides |
-| onSlideChange | `function` | `void` | Called when user goes changes slide (by swiping or pressing next/prev). Function called with arguments `(index: number, lastIndex: number)` |
-| renderPagination | `function` | | Function to render a custom pagination/button component on top of slides. Receives the index of the currently active slide |
-| onDone | `function` | `void` | Called when user ends the introduction by pressing the done button |
-| onSkip | `function` | Scrolls to the end | Called when user presses the skip button |
-| bottomButton | `boolean` | `false` | Enable to show a full-width button under pagination |
-| dotStyle | `style` | {backgroundColor: 'rgba(0, 0, 0, .2)'} | Style of inactive pagination dots |
-| dotClickEnabled | `boolean` | `true` | Whether users can navigate using the pagination dots |
-| activeDotStyle | `style` | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot |
-| skipLabel | `string` | `Skip` | Custom label for Skip button |
-| doneLabel | `string` | `Done` | Custom label for Done button |
-| nextLabel | `string` | `Next` | Custom label for Next button |
-| prevLabel | `string` | `Back` | Custom label for Prev button |
-| showSkipButton | `boolean` | `false` | Enable to show a skip button to the left of pagination dots. When `bottomButton == true` the skip button is a small text under the full-width next button |
-| showPrevButton | `boolean` | `false` | Enable to show a previous button. If `showSkipButton` is true, the skip button will be displayed on the first page and prev button on subsequent one |
-| showNextButton | `boolean` | `true` | Disable to hide the next button |
-| showDoneButton | `boolean` | `true` | Disable to hide the done button |
-| renderNextButton | `function` | renders a Text-component | Use to supply your own next button. Has no effect if using `renderPagination`. |
-| renderPrevButton | `function` | renders a Text-component | Use to supply your own prev button . Has no effect if using `renderPagination` |
-| renderDoneButton | `function` | renders a Text-component | Use to supply your own done button. Has no effect if using `renderPagination` |
-| renderSkipButton | `function` | renders a Text-component | Use to supply your own skip button. Has no effect if using `renderPagination` |
+| onSlideChange | `function` | `void` | Called when user goes changes slide (by swiping or pressing next/prev). Function called with arguments `(index: number, lastIndex: number)` |
+| renderPagination | `function` | | Function to render a custom pagination/button component on top of slides. Receives the index of the currently active slide |
+| onDone | `function` | `void` | Called when user ends the introduction by pressing the done button |
+| onSkip | `function` | Scrolls to the end | Called when user presses the skip button |
+| bottomButton | `boolean` | `false` | Enable to show a full-width button under pagination |
+| dotStyle | `style` | {backgroundColor: 'rgba(0, 0, 0, .2)'} | Style of inactive pagination dots |
+| dotClickEnabled | `boolean` | `true` | Whether users can navigate using the pagination dots |
+| activeDotStyle | `style` | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot |
+| buttonTextStyle | `style` | {color: 'black', fontSize: 14} | Text style for the default button |
+| skipLabel | `string` | `Skip` | Custom label for Skip button |
+| doneLabel | `string` | `Done` | Custom label for Done button |
+| nextLabel | `string` | `Next` | Custom label for Next button |
+| prevLabel | `string` | `Back` | Custom label for Prev button |
+| showSkipButton | `boolean` | `false` | Enable to show a skip button to the left of pagination dots. When `bottomButton == true` the skip button is a small text under the full-width next button |
+| showPrevButton | `boolean` | `false` | Enable to show a previous button. If `showSkipButton` is true, the skip button will be displayed on the first page and prev button on subsequent one |
+| showNextButton | `boolean` | `true` | Disable to hide the next button |
+| showDoneButton | `boolean` | `true` | Disable to hide the done button |
+| renderNextButton | `function` | renders a Text-component | Use to supply your own next button. Has no effect if using `renderPagination`. |
+| renderPrevButton | `function` | renders a Text-component | Use to supply your own prev button . Has no effect if using `renderPagination` |
+| renderDoneButton | `function` | renders a Text-component | Use to supply your own done button. Has no effect if using `renderPagination` |
+| renderSkipButton | `function` | renders a Text-component | Use to supply your own skip button. Has no effect if using `renderPagination` |
### Methods
@@ -182,11 +178,11 @@ The component extends `FlatList` so all FlatList-props are valid.
| goToSlide | `number` | Change to slide with specified index |
| getListRef | `none` | Returns the Flat List ref |
-
## Examples
-* [Basic](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/Basic/index.tsx)
-* [Bottom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/BottomButton/index.tsx)
-* [Custom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomButtons/index.tsx)
-* [Custom pagination with log in / sign up buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomPagination/index.tsx)
-* [Full-size background Images](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/FullBackgroundImage/index.tsx)
-* [RTL](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/RTL/index.tsx)
+
+- [Basic](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/Basic/index.tsx)
+- [Bottom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/BottomButton/index.tsx)
+- [Custom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomButtons/index.tsx)
+- [Custom pagination with log in / sign up buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomPagination/index.tsx)
+- [Full-size background Images](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/FullBackgroundImage/index.tsx)
+- [RTL](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/RTL/index.tsx)
diff --git a/package.json b/package.json
index c9e4531..ec6a9db 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,12 @@
{
- "name": "react-native-app-intro-slider",
- "version": "4.0.4",
+ "name": "@unbogify/react-native-app-intro-slider",
+ "version": "4.0.4-unbogify.0",
"description": "Simple and configurable app introduction slider for react native",
"main": "dist/index.js",
"types": "dist/index.d.ts",
+ "publishConfig": {
+ "access": "public"
+ },
"scripts": {
"build": "tsc",
"lint": "eslint 'src/**/*.{ts,tsx}'",
diff --git a/src/index.tsx b/src/index.tsx
index a2f6a7c..1d7ebd1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,6 +14,7 @@ import {
GestureResponderEvent,
LayoutChangeEvent,
ListRenderItemInfo,
+ TextStyle,
} from 'react-native';
import mergeExtraData from './merge-extradata';
@@ -35,6 +36,7 @@ type Props = {
onDone?: () => void;
renderPagination?: (activeIndex: number) => React.ReactNode;
activeDotStyle: ViewStyle;
+ buttonTextStyle?: TextStyle;
dotStyle: ViewStyle;
dotClickEnabled: boolean;
skipLabel: string;
@@ -120,7 +122,11 @@ export default class AppIntroSlider extends React.Component<
};
_renderDefaultButton = (name: string, label: string) => {
- let content = {label};
+ let content = (
+
+ {label}
+
+ );
if (this.props.bottomButton) {
content = (