@99xt/first-born - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

package.json

 {
     "name": "@99xt/first-born",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "React Native UI Framework",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -838,7 +838,8 @@ # first-born
 
-| Prop                | Description                          | Default                                                       |
-|---------------------|--------------------------------------|---------------------------------------------------------------|
-| **`color`**         | Background color of the `TabBar`.    | _primary_ for Android, `'#F8F8F8'` for iOS                    |
-| **`activeColor`**   | Text and Icon color of active tab.   | _white_ for Android, `'#0a60ff'` for iOS                      |
-| **`inactiveColor`** | Text and Icon color of inactive tab. | `'rgba(209, 216, 224, 0.8)'` for Android, `'#8e8e93'` for iOS |
+| Prop                | Description                                        | Default                                                       |
+|---------------------|----------------------------------------------------|---------------------------------------------------------------|
+| **`color`**         | Background color of the `TabBar`.                  | _primary_ for Android, `'#F8F8F8'` for iOS                    |
+| **`activeColor`**   | Text and Icon color of active tab.                 | _white_ for Android, `'#0a60ff'` for iOS                      |
+| **`inactiveColor`** | Text and Icon color of inactive tab.               | `'rgba(209, 216, 224, 0.8)'` for Android, `'#8e8e93'` for iOS |
+| **`top`**           | If the TabBar is on top of the page. Android only. | _false_                                                       |
 
@@ -845,0 +846,0 @@ `TabItem` is the button element to be used within the `TabBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). In addition, it contains the following properties as well;

src/organisms/navigation/footer/TabBar.js

@@ -9,11 +9,18 @@ import React, { Component } from "react";
     render() {
-        const { color, activeColor, inactiveColor, ...otherProps } = this.props;
+        const {
+            color,
+            activeColor,
+            inactiveColor,
+            children,
+            top,
+            ...otherProps
+        } = this.props;
 
         let tabBarStyle = [styles.container, { backgroundColor: color }];
 
-        if (isIphoneX()) {
+        if (isIphoneX() && !top) {
             tabBarStyle.push({ paddingBottom: 15 });
         }
 
-        const children = React.Children.map(this.props.children, child =>
+        const newChildren = React.Children.map(children, child =>
             child
@@ -23,3 +30,4 @@ ? React.cloneElement(child, {
                       activeColor,
-                      inactiveColor
+                      inactiveColor,
+                      top
                   })
@@ -31,3 +39,3 @@ : null
             <View style={tabBarStyle} {...otherProps}>
-                {children && children}
+                {newChildren && newChildren}
             </View>
@@ -42,2 +50,3 @@ );
     inactiveColor: PropTypes.string,
+    top: PropTypes.bool,
     ...View.propTypes
@@ -47,3 +56,4 @@ };
 TabBar.defaultProps = {
-    color: Platform.OS === "android" ? commonColors.primary : "#f8f8f8"
+    color: Platform.OS === "android" ? commonColors.primary : "#f8f8f8",
+    top: false
 };
@@ -50,0 +60,0 @@

src/organisms/navigation/footer/TabItem.js

@@ -17,2 +17,3 @@ import React, { Component } from "react";
             active,
+            top,
             ...otherProps
@@ -23,4 +24,10 @@ } = this.props;
 
+        let topPosition = top && Platform.OS === "android";
+
         const color = active ? activeColor : inactiveColor;
 
+        let containerStyle = topPosition
+            ? [styles.container, styles.containerTop]
+            : styles.container;
+
         if (children) {
@@ -31,5 +38,8 @@ newChildren = React.Children.map(children, child =>
                           ...child.props,
-                          size: "footnote",
+                          size: topPosition ? "footnote" : "caption_big",
                           color,
-                          style: { ...child.props.style }
+                          style: {
+                              ...child.props.style,
+                              opacity: active ? 1 : 0.8
+                          }
                       })
@@ -39,5 +49,9 @@ : child && child.type === Icon
                           ...child.props,
-                          size: 28,
+                          size: topPosition ? 20 : 28,
                           color,
-                          style: { ...child.props.style }
+                          style: {
+                              ...child.props.style,
+                              opacity: active ? 1 : 0.8,
+                              marginRight: topPosition ? 5 : 0
+                          }
                       })
@@ -48,5 +62,6 @@ : child && child.type === Image
                               ...child.props.style,
-                              width: 28,
-                              height: 28,
-                              opacity: active ? 1 : 0.8
+                              width: topPosition ? 20 : 28,
+                              height: topPosition ? 20 : 28,
+                              opacity: active ? 1 : 0.8,
+                              marginRight: topPosition ? 5 : 0
                           },
@@ -60,3 +75,3 @@ ...child.props
         return (
-            <TouchableOpacity style={styles.container} {...otherProps}>
+            <TouchableOpacity style={containerStyle} {...otherProps}>
                 {newChildren && newChildren}
@@ -72,2 +87,3 @@ </TouchableOpacity>
     active: PropTypes.bool,
+    top: PropTypes.bool,
     ...TouchableOpacity.propTypes
@@ -80,3 +96,4 @@ };
         Platform.OS === "android" ? "rgba(209, 216, 224, 0.8)" : "#8e8e93",
-    active: false
+    active: false,
+    top: false
 };
@@ -90,3 +107,6 @@
         paddingVertical: 10
+    },
+    containerTop: {
+        flexDirection: "row"
     }
 });

src/organisms/navigation/header/NavBar.js

@@ -184,3 +184,3 @@ import React, { Component } from "react";
         elevation: 3,
-        shadowColor: "#000",
+        shadowColor: commonColors.black,
         shadowOffset: { width: 0, height: 3 },
@@ -187,0 +187,0 @@ shadowOpacity: 0.4,

No alert changes

Improved metrics

Total package byte prevSize

190356

increased by0.62%

Lines of code

3921

increased by0.72%

Number of lines in readme file

917

increased by0.11%

No dependency changes