From ee8a70937b765e78f446b66f837ca0d9d33cac2c Mon Sep 17 00:00:00 2001 From: Manuel Bieh Date: Wed, 30 Nov 2022 16:56:31 +0100 Subject: [PATCH 1/2] chore: add new prop buttonTextStyle to style default button text --- README.md | 74 ++++++++++++++++++++++++--------------------------- src/index.tsx | 8 +++++- 2 files changed, 42 insertions(+), 40 deletions(-) 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/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 = ( Date: Wed, 4 Jan 2023 23:10:11 +0100 Subject: [PATCH 2/2] chore: add publish config to package.json --- package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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}'",