rn-viewpager - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

index.js

@@ -11,2 +11,3 @@ /**
 import PagerTitleIndicator from './viewpager/indicator/PagerTitleIndicator';
+import PagerTabIndicator from './viewpager/indicator/PagerTabIndicator';
 
@@ -17,3 +18,4 @@ export {
     PagerDotIndicator,
-    PagerTitleIndicator
+    PagerTitleIndicator,
+    PagerTabIndicator
 };

package.json

 {
   "name": "rn-viewpager",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "ViewPager component for react-native, same api on both android and ios.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # React-Native-ViewPager
+ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content). 
 
+## Features
+- unify \<ViewPagerAndroid\> and \<ScrollView pagingEnabled={true}\> to \<ViewPager\>, add offer same props as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content). 
+- \<IndicatorViewPager\> component support render indicator
+- implement common indicator: DotIndicator, TitleIndicator and TabIndicator
+
+
+## Preview
+<img src="./imgs/preview.png" width="300">  
+<img src="./imgs/tabPreview.png" width="300">
+
+## Build and run the demo
+
+```  
+cd demo/
+npm install
+react-native run-android
+ 
+```
+
 ## Usage
@@ -53,2 +73,17 @@
                 </IndicatorViewPager>
+                
+                <IndicatorViewPager
+                    style={{flex:1,marginTop:10}}
+                    indicator={this._renderTabIndicator()}
+                >
+                    <View style={{backgroundColor:'cadetblue'}}>
+                        <Text>{'count' + this.state.count}</Text>
+                    </View>
+                    <View style={{backgroundColor:'cornflowerblue'}}>
+                        <Text>page two</Text>
+                    </View>
+                    <View style={{backgroundColor:'#1AA094'}}>
+                        <Text>page three</Text>
+                    </View>
+                </IndicatorViewPager>
             </View>
@@ -73,5 +108,32 @@ );
     }
+    
+    _renderTabIndicator() {
+        let tabs = [
+            {
+                text: 'Home',
+                iconSource: require('../imgs/ic_tab_home_normal.png'),
+                selectedIconSource: require('../imgs/ic_tab_home_click.png')
+            },
+            {
+                text: 'Message',
+                iconSource: require('../imgs/ic_tab_task_normal.png'),
+                selectedIconSource: require('../imgs/ic_tab_task_click.png')
+            },
+            {
+                text: 'Profile',
+                iconSource: require('../imgs/ic_tab_my_normal.png'),
+                selectedIconSource: require('../imgs/ic_tab_my_click.png')
+            }
+        ];
+        return (
+            <PagerTabIndicator
+                tabs={tabs}
+            />
+        );
+    }
+
 }
 ```
 
-## TODO
+## Known issue
+- onPageScrollStateChanged prop not support on iOS ):

viewpager/indicator/PagerDotIndicator.js

@@ -6,6 +6,6 @@ /**
 'use strict';
+import React, {Component} from 'react';
+import {StyleSheet, View, PropTypes} from 'react-native';
+import IndicatorViewPager from '../IndicatorViewPager';
 
-import React, {Component, StyleSheet, View, PropTypes} from 'react-native';
-import IndicatorViewPager from './../IndicatorViewPager';
-
 const DEFAULT_DOT_RADIUS = 6;
@@ -12,0 +12,0 @@ export default class PagerDotIndicator extends Component {

viewpager/indicator/PagerTitleIndicator.js

@@ -7,4 +7,5 @@ /**
 
-import React, {Component, StyleSheet, View, PropTypes, Text, TouchableOpacity} from 'react-native';
-import IndicatorViewPager from './../IndicatorViewPager';
+import React, {Component} from 'react';
+import {StyleSheet, View, PropTypes, Text, TouchableOpacity} from 'react-native';
+import IndicatorViewPager from '../IndicatorViewPager';
 
@@ -15,4 +16,4 @@ export default class PagerTitleIndicator extends Component {
         initialPage: PropTypes.number,
+        pager: PropTypes.instanceOf(IndicatorViewPager),
         titles: PropTypes.arrayOf(PropTypes.string).isRequired,
-        pager: PropTypes.instanceOf(IndicatorViewPager),
         itemStyle: View.propTypes.style,
@@ -19,0 +20,0 @@ itemTextStyle: Text.propTypes.style,

viewpager/IndicatorViewPager.js

@@ -7,3 +7,4 @@ /**
 
-import React, {Component, StyleSheet, View, PropTypes} from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, View, PropTypes} from 'react-native';
 import ViewPager from './ViewPager';
@@ -10,0 +11,0 @@

viewpager/ViewPager.js

@@ -7,3 +7,4 @@ /**
 
-import React, {Component, StyleSheet, View, ViewPagerAndroid, ScrollView, Platform} from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, View, ViewPagerAndroid, ScrollView, Platform} from 'react-native';
 
@@ -62,3 +63,3 @@ const SCROLLVIEW_REF = 'scrollView';
             contentOffset: {x: this.state.width * initialPage, y: 0},
-            decelerationRate: 'fast',
+            decelerationRate: 0.9,
 
@@ -65,0 +66,0 @@ onScroll: !this.props.onPageScroll && !this.props.onPageSelected ? null : this._onScrollOnIOS.bind(this),

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

Improved metrics

Total package byte prevSize

122372

increased by164.67%

Number of package files

18

increased by20%

Lines of code

441

increased by28.2%

Number of lines in readme file

137

increased by82.67%

No dependency changes