react-native-viewpager-enhanced - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

index.js

@@ -0,0 +0,0 @@ /**

package.json

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

README.md

@@ -0,0 +0,0 @@ # First

viewpager/indicator/PagerDotIndicator.js

@@ -0,0 +0,0 @@ /**

viewpager/indicator/PagerTabIndicator.js

@@ -0,0 +0,0 @@ /**

viewpager/indicator/PagerTitleIndicator.js

@@ -14,22 +14,33 @@ /**
         ...View.propTypes,
-            initialPage: PropTypes.number,
-            pager: PropTypes.instanceOf(IndicatorViewPager),
-    titles: PropTypes.arrayOf(PropTypes.string).isRequired,
-            itemStyle: View.propTypes.style,
-            itemTextStyle: Text.propTypes.style,
-            selectedItemTextStyle: Text.propTypes.style,
-            selectedBorderStyle: View.propTypes.style,
-            renderTitle: React.PropTypes.func,
-            };
+        initialPage: PropTypes.number,
+        pager: PropTypes.instanceOf(IndicatorViewPager),
+        titles: PropTypes.arrayOf(PropTypes.string).isRequired,
+        itemStyle: View.propTypes.style,
+        itemTextStyle: Text.propTypes.style,
+        selectedItemTextStyle: Text.propTypes.style,
+        selectedBorderStyle: View.propTypes.style,
+        renderTitle: React.PropTypes.func,
+        autoUpdateTitle: React.PropTypes.bool,
+        topTitleEnabled: React.PropTypes.bool,
+        topTitleValue: React.PropTypes.string,
+        topTitleContainerStyle: Text.propTypes.style,
+        topTitleTextStyle: Text.propTypes.style,
+        itemsContainerStyle: Text.propTypes.style,
+    };
 
     static defaultProps = {
         titles: [],
-        initialPage: 0
+        autoUpdateTitle: true,
+        initialPage: 0,
+        topTitleEnabled: true,
+        topTitleValue: 'Home',
+        topTitleStyle: {}
     };
 
     state = {
-        selectedIndex: this.props.initialPage
+        selectedIndex: this.props.initialPage,
+        topTitleValue: this.props.autoUpdateTitle && this.props.topTitleEnabled && this.props.titles && this.props.titles.length > 0 ? this.props.titles[0] : 'Home',
+        topTitleEnabled: this.props.topTitleEnabled
     };
 
-
     constructor(props) {
@@ -39,4 +50,11 @@ super(props);
         this.onItemPress = this.onItemPress.bind(this);
+        this.setTopTitle = this.setTopTitle.bind(this);
     }
 
+    setTopTitle(newTitle) {
+        this.setState({
+            topTitleValue: newTitle
+        });
+    }
+
     onItemPress(pager, index, isSelected) {
@@ -76,17 +94,35 @@ if (this.props.onItemPress) {
             return (
-                    <TouchableOpacity
-                            style={[styles.titleContainer, itemStyle]}
-                            activeOpacity={0.6}
-                            key={index}
-                            onPress={() => {this.onItemPress(pager, index, isSelected)}}
-                        >
-                        {titleView}
-                        {isSelected ? <View style={[styles.selectedBorder, selectedBorderStyle]}/> : null}
-                    </TouchableOpacity>
+                <TouchableOpacity
+                        style={[styles.titleContainer, itemStyle]}
+                        activeOpacity={0.6}
+                        key={index}
+                        onPress={() => {this.onItemPress(pager, index, isSelected)}}
+                    >
+                    {titleView}
+                    {isSelected ? <View style={[styles.selectedBorder, selectedBorderStyle]}/> : null}
+                </TouchableOpacity>
             );
         });
+
+        if (!this.state.topTitleEnabled) {
+            return (
+                <View style={[styles.barContainerWithoutTitle, this.props.style]}>
+                    <View style={[styles.indicatorContainer, this.props.itemsContainerStyle]}>
+                        {titleViews}
+                    </View>
+                </View>
+            );
+        }
+
         return (
-                <View style={[styles.indicatorContainer, this.props.style]}>
+            <View style={[styles.barContainerWithTitle, this.props.style]}>
+                <View style={[styles.titleContainer, this.props.topTitleContainerStyle]}>
+                    <Text style={[styles.topTitleTextStyle, this.props.topTitleTextStyle]}>
+                        {this.state.topTitleValue}
+                    </Text>
+                </View>
+                <View style={[styles.indicatorContainer, this.props.itemsContainerStyle]}>
                     {titleViews}
                 </View>
+            </View>
         );
@@ -97,6 +133,11 @@ }
         if (this.state.selectedIndex != e.position) {
-            this.setState({selectedIndex: e.position});
 
+            if (this.props.autoUpdateTitle && this.props.topTitleEnabled && this.props.titles && this.props.titles.length > 0) {
+                this.setState({selectedIndex: e.position, topTitleValue: this.props.titles[e.position] });
+            } else {
+                this.setState({selectedIndex: e.position});
+            }
+
             if (this.props.onPageChange) {
-                this.props.onPageChange(e.position);
+                this.props.onPageChange(e.position, this);
             }
@@ -108,6 +149,50 @@ }
 const styles = StyleSheet.create({
+
+    barContainerWithoutTitle: {
+        height:40,
+        zIndex:10,
+        backgroundColor:'white',
+        flexDirection: 'column',
+        justifyContent:'flex-start',
+        alignItems:'flex-start',
+        elevation: 4,
+        shadowOffset: {width: 0,height: 0.2},
+        shadowColor: '#222',
+        shadowOpacity: 0.5,
+    },
+
+    barContainerWithTitle: {
+        height:90,
+        zIndex:10,
+        backgroundColor:'white',
+        flexDirection: 'column',
+        justifyContent:'flex-start',
+        alignItems:'flex-start',
+        elevation: 4,
+        shadowOffset: {width: 0,height: 0.2},
+        shadowColor: '#222',
+        shadowOpacity: 0.5,
+    },
+
+    topTitleContainerStyle: {
+        backgroundColor:'white',
+        alignSelf:'stretch',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems:'center'
+    },
+
+
+    topTitleTextStyle: {
+        marginLeft:15,
+        color: '#999',
+        fontSize:18,
+        fontFamily: 'normal',
+        fontWeight:'bold'
+    },
+
     indicatorContainer: {
         height: 40,
         flexDirection: 'row',
-        backgroundColor: '#F6F6F6'
+        backgroundColor: '#FFFFFF'
     },
@@ -114,0 +199,0 @@ titleText: {

viewpager/IndicatorViewPager.js

@@ -0,0 +0,0 @@ /**

viewpager/ViewPager.js

@@ -0,0 +0,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

29922

increased by14.1%

Lines of code

616

increased by14.07%

No dependency changes