react-native-app-intro-slider - npm Package Compare versions

Comparing version 0.2.4 to 1.0.0

AppIntroSlider.js

@@ -25,4 +25,8 @@ import React from 'react';
   static defaultProps = {
-    activeDotColor: 'rgba(255, 255, 255, .9)',
-    dotColor: 'rgba(0, 0, 0, .2)',
+    activeDotStyle: {
+      backgroundColor: 'rgba(255, 255, 255, .9)',
+    },
+    dotStyle: {
+      backgroundColor: 'rgba(0, 0, 0, .2)',
+    },
     skipLabel: 'Skip',
@@ -32,2 +36,4 @@ doneLabel: 'Done',
     prevLabel: 'Back',
+    buttonStyle: null,
+    buttonTextStyle: null,
   }
@@ -70,5 +76,9 @@ state = {
   _renderDefaultButton = (name) => {
-    let content = <Text style={styles.buttonText}>{this.props[`${name.toLowerCase()}Label`]}</Text>;
+    let content = (
+      <Text style={[styles.buttonText, this.props.buttonTextStyle]}>
+        {this.props[`${name.toLowerCase()}Label`]}
+      </Text>
+    );
     if (this.props.bottomButton) {
-      content = <View style={[styles.bottomButton, (name === 'Skip' || name === 'Prev') && { backgroundColor: 'transparent' }]}>{content}</View>
+      content = <View style={[styles.bottomButton, (name === 'Skip' || name === 'Prev') && { backgroundColor: 'transparent' }, this.props.buttonStyle]}>{content}</View>
     }
@@ -82,3 +92,3 @@ return content;
       <View style={this.props.bottomButton ? styles.bottomButtonContainer : style}>
-        <TouchableOpacity onPress={onPress} style={this.props.bottomButton && styles.flexOne}>
+        <TouchableOpacity onPress={onPress} style={this.props.bottomButton ? styles.flexOne : this.props.buttonStyle}>
           {content}
@@ -113,4 +123,4 @@ </TouchableOpacity>
               style={[
-                { backgroundColor: i === this.state.activeIndex ? this.props.activeDotColor : this.props.dotColor },
                 styles.dot,
+                i === this.state.activeIndex ? this.props.activeDotStyle : this.props.dotStyle,
               ]}
@@ -155,2 +165,18 @@ />
   render() {
+    // Separate props used by the component to props passed to FlatList
+    const {
+      hidePagination,
+      activeDotStyle,
+      dotStyle,
+      skipLabel,
+      doneLabel,
+      nextLabel,
+      prevLabel,
+      buttonStyle,
+      buttonTextStyle,
+      renderItem,
+      data,
+      ...otherProps,
+    } = this.props;
+
     return (
@@ -170,4 +196,5 @@ <View style={styles.flexOne}>
           onLayout={this._onLayout}
+          {...otherProps}
         />
-        {this._renderPagination()}
+        {!hidePagination && this._renderPagination()}
       </View>
@@ -223,4 +250,4 @@ );
     fontSize: 18,
-    padding: 16,
+    padding: 12,
   }
 });

package.json

 {
   "name": "react-native-app-intro-slider",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "description": "Simple and configurable app introduction slider for react native",
@@ -5,0 +5,0 @@ "main": "AppIntroSlider.js",

README.md

@@ -70,12 +70,16 @@ <h1 align="center">react-native-app-intro-slider</h1>
 export default class App extends React.Component {
+  this.state = {
+    showRealApp: false
+  }
   _onDone = () => {
-    // User finished the introduction. Show "real" app
+    // User finished the introduction. Show real app through
+    // navigation or simply by controlling state
+    this.setState({ showRealApp: true });
   }
   render() {
-    return (
-      <AppIntroSlider
-        slides={slides}
-        onDone={this._onDone}
-      />
-    );
+    if (this.state.showRealApp) {
+      return <App />;
+    } else {
+      return <AppIntroSlider slides={slides} onDone={this._onDone}/>;
+    }
   }
@@ -244,2 +248,4 @@ }
 
+The component extends `FlatList` so all FlatList-props are valid.
+
 ### Configure looks
@@ -254,4 +260,7 @@
 bottomButton     | `boolean`  | `false`                   | Enable to show a full-width button under pagination
-dotColor         | `string`   | 'rgba(0, 0, 0, .2)'       | Color of inactive pagination dots
-activeDotColor   | `string`   | 'rgba(255, 255, 255, .9)' | Color of active pagination dot
+buttonStyle      | `style`    | `null`                    | Styling of outer button component
+buttonTextStyle  | `style`    | `null`                    | Styling of button text component
+dotStyle         | `style`    | {backgroundColor: 'rgba(0, 0, 0, .2)'} | Style of inactive pagination dots
+activeDotStyle   | `style`    | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot
+hidePagination   | `boolean`  | `false`                   | Enable to hide the pagination
 renderNextButton | `function` | renders a Text-component  | Use to supply your own next button
@@ -258,0 +267,0 @@ renderPrevButton | `function` | renders a Text-component  | Use to supply your own prev button

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23026

increased by17.11%

Lines of code

269

increased by10.7%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

308

increased by3.01%

No dependency changes