ModernHeader: Size typo enhancements. Example is updated

Author: WrathChaos

example/App.js

@@ -1,5 +1,10 @@
 import React, { Fragment } from "react";
-import { StatusBar, SafeAreaView, TouchableOpacity } from "react-native";
+import {
+  StatusBar,
+  SafeAreaView,
+  TouchableOpacity,
+  Linking
+} from "react-native";
 import {
   AppleHeader,
   ModernHeader,
@@ -12,7 +17,7 @@ const App = () => {
     <Fragment>
       <StatusBar barStyle="dark-content" />
       <SafeAreaView>
-        <ClassicHeader
+        {/* <ClassicHeader
           statusBarHidden
           headerTitle="Header"
           rightComponent={
@@ -23,8 +28,8 @@ const App = () => {
               <Icon name="github" type="AntDesign" size={30} color="purple" />
             </TouchableOpacity>
           }
-        />
-        {/* <ModernHeader /> */}
+        /> */}
+        <ModernHeader />
         {/* <AppleHeader /> */}
       </SafeAreaView>
     </Fragment>

example/package-lock.json

@@ -8,7 +8,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@freakycoder/react-native-header-view": "^0.4.9",
+    "@freakycoder/react-native-header-view": "^0.4.10",
     "@freakycoder/react-native-helpers": "0.0.21",
     "react": "16.8.6",
     "react-native": "0.60.4",

example/package.json

@@ -35,34 +35,38 @@ const ModernHeader = props => {
   } = props;
   return (
     <View style={styles.container}>
-      {!leftDisable && <TouchableOpacity
-        style={leftCompStyle(left)}
-        hitSlop={hitslopObj}
-        onPress={leftIconOnPress}
-      >
-        {leftIconComponent || (
-          <Icon
-            name={leftIconName}
-            type={leftIconType}
-            size={leftIconSize}
-            color={leftIconColor}
-          />
-        )}
-      </TouchableOpacity>}
+      {!leftDisable && (
+        <TouchableOpacity
+          style={leftCompStyle(left)}
+          hitSlop={hitslopObj}
+          onPress={leftIconOnPress}
+        >
+          {leftIconComponent || (
+            <Icon
+              name={leftIconName}
+              type={leftIconType}
+              size={leftIconSize}
+              color={leftIconColor}
+            />
+          )}
+        </TouchableOpacity>
+      )}
       <Text style={textStyle}>{text}</Text>
-      {!rightDisable && <TouchableOpacity
-        style={rightCompStyle(right)}
-        onPress={rightIconOnPress}
-      >
-        {rightIconComponent || (
-          <Icon
-            name={rightIconName}
-            type={rightIconType}
-            size={rightIconSize}
-            color={rightIconColor}
-          />
-        )}
-      </TouchableOpacity>}
+      {!rightDisable && (
+        <TouchableOpacity
+          style={rightCompStyle(right)}
+          onPress={rightIconOnPress}
+        >
+          {rightIconComponent || (
+            <Icon
+              name={rightIconName}
+              type={rightIconType}
+              size={rightIconSize}
+              color={rightIconColor}
+            />
+          )}
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -73,27 +77,27 @@ ModernHeader.propTypes = {
   text: PropTypes.string,
   leftIconName: PropTypes.string,
   leftIconType: PropTypes.string,
-  leftIconSize: PropTypes.string,
   leftIconColor: PropTypes.string,
   rightIconName: PropTypes.string,
   rightIconType: PropTypes.string,
-  rightIconSize: PropTypes.string,
-  rightIconColor: PropTypes.string
+  rightIconColor: PropTypes.string,
+  leftIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  rightIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
 ModernHeader.defaultProps = {
   left: 16,
   right: 16,
-  text: "Header Title",
-  textStyle: styles.textStyle,
-  leftIconName: "ios-arrow-back",
-  leftIconType: "Ionicons",
   leftIconSize: 25,
-  leftIconColor: "#bbbabe",
+  rightIconSize: 25,
+  text: "Header Title",
   rightIconName: "heart",
   rightIconType: "Entypo",
-  rightIconSize: 25,
-  rightIconColor: "#23c4c1"
+  leftIconType: "Ionicons",
+  leftIconColor: "#bbbabe",
+  rightIconColor: "#23c4c1",
+  textStyle: styles.textStyle,
+  leftIconName: "ios-arrow-back"
 };
 
 export default ModernHeader;

lib/src/components/ModernHeader/ModernHeader.js

@@ -1,6 +1,6 @@
 {
   "name": "@freakycoder/react-native-header-view",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "description": "Fully customizable Header View for React Native.",
   "keywords": [
     "apple",