Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add new prop buttonTextStyle to style default button text #264

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

chore: add new prop buttonTextStyle to style default button text #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee8a709
chore: add new prop buttonTextStyle to style default button text
manuelbieh Nov 30, 2022
9e23e23
chore: add publish config to package.json
manuelbieh Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 35 additions & 39 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -98,15 +98,15 @@ const styles = StyleSheet.create({
// slides = [...]

export default class App extends React.Component {
_renderItem = ({ item }) => {
_renderItem = ({item}) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
);
}
};
_renderNextButton = () => {
return (
<View style={styles.buttonCircle}>
Expand All @@ -121,11 +121,7 @@ export default class App extends React.Component {
_renderDoneButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="md-checkmark"
color="rgba(255, 255, 255, .9)"
size={24}
/>
<Icon name="md-checkmark" color="rgba(255, 255, 255, .9)" size={24} />
</View>
);
};
Expand All @@ -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
Expand All @@ -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

Expand All @@ -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)
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}'",
Expand Down
8 changes: 7 additions & 1 deletion src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
GestureResponderEvent,
LayoutChangeEvent,
ListRenderItemInfo,
TextStyle,
} from 'react-native';
import mergeExtraData from './merge-extradata';

Expand All @@ -35,6 +36,7 @@ type Props<ItemT> = {
onDone?: () => void;
renderPagination?: (activeIndex: number) => React.ReactNode;
activeDotStyle: ViewStyle;
buttonTextStyle?: TextStyle;
dotStyle: ViewStyle;
dotClickEnabled: boolean;
skipLabel: string;
Expand Down Expand Up @@ -120,7 +122,11 @@ export default class AppIntroSlider<ItemT = any> extends React.Component<
};

_renderDefaultButton = (name: string, label: string) => {
let content = <Text style={styles.buttonText}>{label}</Text>;
let content = (
<Text style={[styles.buttonText, this.props.buttonTextStyle]}>
{label}
</Text>
);
if (this.props.bottomButton) {
content = (
<View
Expand Down