Close #138

Author: Jacse

README.md

@@ -153,13 +153,14 @@ The component extends `FlatList` so all FlatList-props are valid.
 | 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)`                                                        |
+| 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                                                                                                                                                                     |

src/index.tsx

@@ -31,6 +31,7 @@ type Props<ItemT> = {
   renderPagination?: (activeIndex: number) => React.ReactNode;
   activeDotStyle: ViewStyle;
   dotStyle: ViewStyle;
+  dotClickEnabled: boolean;
   skipLabel: string;
   doneLabel: string;
   nextLabel: string;
@@ -59,6 +60,7 @@ export default class AppIntroSlider<ItemT> extends React.Component<
     dotStyle: {
       backgroundColor: 'rgba(0, 0, 0, .2)',
     },
+    dotClickEnabled: true,
     skipLabel: 'Skip',
     doneLabel: 'Done',
     nextLabel: 'Next',
@@ -203,18 +205,30 @@ export default class AppIntroSlider<ItemT> extends React.Component<
         <SafeAreaView>
           <View style={styles.paginationDots}>
             {this.props.data.length > 1 &&
-              this.props.data.map((_, i) => (
-                <TouchableOpacity
-                  key={i}
-                  style={[
-                    styles.dot,
-                    this._rtlSafeIndex(i) === this.state.activeIndex
-                      ? this.props.activeDotStyle
-                      : this.props.dotStyle,
-                  ]}
-                  onPress={() => this.goToSlide(i, true)}
-                />
-              ))}
+              this.props.data.map((_, i) =>
+                this.props.dotClickEnabled ? (
+                  <TouchableOpacity
+                    key={i}
+                    style={[
+                      styles.dot,
+                      this._rtlSafeIndex(i) === this.state.activeIndex
+                        ? this.props.activeDotStyle
+                        : this.props.dotStyle,
+                    ]}
+                    onPress={() => this.goToSlide(i, true)}
+                  />
+                ) : (
+                  <View
+                    key={i}
+                    style={[
+                      styles.dot,
+                      this._rtlSafeIndex(i) === this.state.activeIndex
+                        ? this.props.activeDotStyle
+                        : this.props.dotStyle,
+                    ]}
+                  />
+                ),
+              )}
           </View>
           {primaryButton}
           {secondaryButton}