From 55501ff89af11976a585d151b8a38d2003326ea2 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 4 Feb 2018 02:21:40 -0600 Subject: [PATCH 01/17] badge support added badge support --- lib/Tab.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/lib/Tab.js b/lib/Tab.js index fbf1ba3..376b3f4 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -14,6 +14,7 @@ import { StyleSheet, TouchableWithoutFeedback } from 'react-native' +import { Badge } from "react-native-material-ui"; import { easeInOut } from './utils/easing' @@ -30,7 +31,8 @@ type TabProps = { labelColor: string, activeLabelColor?: string, onTabPress: () => void, - onPress: () => void + onPress: () => void, + notificationCount: number, } type TabState = { @@ -121,9 +123,28 @@ export default class Tab extends Component { ) } + _renderBadge = () => { + const { active, icon, activeIcon, notificationCount } = this.props; + + if (!notificationCount) { + return ( + active && activeIcon ? activeIcon : icon + ) + } + + return ( + + {active && activeIcon ? activeIcon : icon} + + ) + } + _renderIcon = () => { const mode = this._getModeString() - const { active, icon, activeIcon } = this.props return ( + - {active && activeIcon ? activeIcon : icon} + {this._renderBadge()} ) From 246a2e6bbb7f2e3ae5a3dc525548e5fcf902f548 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 00:34:33 -0600 Subject: [PATCH 02/17] remove react-native-material-ui removed react-native-material-ui as dependency. implemented importing local badge component. --- lib/Tab.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/lib/Tab.js b/lib/Tab.js index 376b3f4..7ae70cd 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -14,7 +14,7 @@ import { StyleSheet, TouchableWithoutFeedback } from 'react-native' -import { Badge } from "react-native-material-ui"; +import Badge from "./Badge" import { easeInOut } from './utils/easing' @@ -124,19 +124,18 @@ export default class Tab extends Component { } _renderBadge = () => { - const { active, icon, activeIcon, notificationCount } = this.props; + const { active, icon, activeIcon, badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props; - if (!notificationCount) { - return ( - active && activeIcon ? activeIcon : icon - ) + if (!badgeText) { + return active && activeIcon ? activeIcon : icon; } return ( {active && activeIcon ? activeIcon : icon} From 12dfe076a984dd8a878be896fb5d9623b8af8eaa Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 00:35:27 -0600 Subject: [PATCH 03/17] Added Badge.js Added Badge component to use instead of react-native-material-ui badge --- lib/Badge.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 lib/Badge.js diff --git a/lib/Badge.js b/lib/Badge.js new file mode 100644 index 0000000..8ed08e4 --- /dev/null +++ b/lib/Badge.js @@ -0,0 +1,85 @@ +/** + * Material badge for showing notifications, maybe more functionality in the future + * @flow + */ + +import React, { Component } from 'react' +import { + View, + Text, + Animated, + Platform, + StyleSheet +} from 'react-native'; + +type BProps = { + text: string, + size: number, + children: Array>, + style: any, + isVisible: boolean, +} + +const defaultProps = { + size: 20, + isVisible: true, + style: {}, +} + +export default class RippleBackgroundTransition extends Component { + static defaultProps: typeof defaultProps + props: BProps + static defaultProps = defaultProps + + createStyles() { + const { size, style } = this.props; + const container = Object.assign( + {}, + { + position: "relative", + width: size, + height: size, + borderRadius: size / 2, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#F50057", + zIndex: 9999, + bottom: 5, + right: 10, + }, + style.container + ); + + const text = Object.assign( + {}, + { + color: "#fff", + fontWeight: "500", + fontSize: 12, + }, + style.text + ) + + return StyleSheet.create({ + container, + text, + }) + } + + render() { + const { children, text, isVisible } = this.props; + const styles = this.createStyles(); + if (!isVisible) { + return children ? children : null; + } + + return ( + + {children ? children : null} + + {text} + + + ) + } +} From f51f54cfb48c855e5daa032609a6998928ead21a Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 00:39:15 -0600 Subject: [PATCH 04/17] updated prop types updated prop types --- lib/Tab.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/Tab.js b/lib/Tab.js index 7ae70cd..7ce4140 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -33,6 +33,10 @@ type TabProps = { onTabPress: () => void, onPress: () => void, notificationCount: number, + badgeText: string, + badgeSize: number, + badgeStyle: any, + isBadgeVisible: boolean, } type TabState = { From 8d8c6eb6e69f84cc1ec1d5dff05bbcc13dbcb03f Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 00:41:26 -0600 Subject: [PATCH 05/17] removed old prop type removed old prop type --- lib/Tab.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/Tab.js b/lib/Tab.js index 7ce4140..4d3d89a 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -32,7 +32,6 @@ type TabProps = { activeLabelColor?: string, onTabPress: () => void, onPress: () => void, - notificationCount: number, badgeText: string, badgeSize: number, badgeStyle: any, From ff505da4a67a5abe941f50d68ad8921c9ca39593 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 01:00:11 -0600 Subject: [PATCH 06/17] documented badge changes documented badge changes --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e838ef..d8b647e 100644 --- a/README.md +++ b/README.md @@ -128,7 +128,10 @@ Don't skip this part. You will be happy to know about all the good stuff you can | **`activeLabelColor`** | Text Color of the Label when the Tab is active. | `string` | `activeLabelColor` of BottomNavigation | | **`barBackgroundColor`** | Background color for the whole component, if the tab is active. | `string` | `backgroundColor` of BottomNavigation | | **`onPress`** | Function to be called when the Tab was pressed. **When you use this, the pressed tab won't be active automatically. You need to set it to active by updating `BottomNavigation.activeTab`.** This function will be called with the parameter `(newTabIndex) => {}` | `function` | – | - +| **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - | +| **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `number` | 20 | +| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "relative", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, bottom: 5, right: 10 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | +| **`isBadgeVisible`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `boolean` | - | ## Behind the Navigation Bar From cff84032fd74dfcfd4bbf61b5378218efade9e28 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 01:01:36 -0600 Subject: [PATCH 07/17] fixed isBadgeVisible documentation fixed isBadgeVisible documentation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d8b647e..2e7bda8 100644 --- a/README.md +++ b/README.md @@ -131,7 +131,7 @@ Don't skip this part. You will be happy to know about all the good stuff you can | **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - | | **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `number` | 20 | | **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "relative", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, bottom: 5, right: 10 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | -| **`isBadgeVisible`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `boolean` | - | +| **`isBadgeVisible`** | Determines if the badge is visible or not | `boolean` | - | ## Behind the Navigation Bar From 99ed535e085a68168fc061ab172e0efee0308d6f Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 01:04:53 -0600 Subject: [PATCH 08/17] Final changes final changes --- lib/Tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Tab.js b/lib/Tab.js index 4d3d89a..33a29a8 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -129,7 +129,7 @@ export default class Tab extends Component { _renderBadge = () => { const { active, icon, activeIcon, badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props; - if (!badgeText) { + if (badgeText === undefined && !isBadgeVisible) { return active && activeIcon ? activeIcon : icon; } From 6d2d59f5f2e7062664dfa319e109ea64b0511153 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 01:05:37 -0600 Subject: [PATCH 09/17] final changes final changes --- lib/Badge.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Badge.js b/lib/Badge.js index 8ed08e4..304019f 100644 --- a/lib/Badge.js +++ b/lib/Badge.js @@ -15,7 +15,7 @@ import { type BProps = { text: string, size: number, - children: Array>, + children: Array>, style: any, isVisible: boolean, } From 3f70221a611029b13f416f6ab51c2de569679d40 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Wed, 7 Feb 2018 01:11:56 -0600 Subject: [PATCH 10/17] removed extra dependencies removed extra dependencies --- lib/Badge.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/Badge.js b/lib/Badge.js index 304019f..17d28b5 100644 --- a/lib/Badge.js +++ b/lib/Badge.js @@ -7,8 +7,6 @@ import React, { Component } from 'react' import { View, Text, - Animated, - Platform, StyleSheet } from 'react-native'; From d1566fa09ba76fd75e7d231cb5dca724c5d0361a Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 02:26:34 -0600 Subject: [PATCH 11/17] android compatibility android compatibility --- lib/Badge.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/lib/Badge.js b/lib/Badge.js index 17d28b5..0148d32 100644 --- a/lib/Badge.js +++ b/lib/Badge.js @@ -24,7 +24,7 @@ const defaultProps = { style: {}, } -export default class RippleBackgroundTransition extends Component { +export default class Badge extends Component { static defaultProps: typeof defaultProps props: BProps static defaultProps = defaultProps @@ -34,7 +34,7 @@ export default class RippleBackgroundTransition extends Component { const container = Object.assign( {}, { - position: "relative", + position: "absolute", width: size, height: size, borderRadius: size / 2, @@ -42,8 +42,7 @@ export default class RippleBackgroundTransition extends Component { justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, - bottom: 5, - right: 10, + bottom: 10, }, style.container ); @@ -68,12 +67,11 @@ export default class RippleBackgroundTransition extends Component { const { children, text, isVisible } = this.props; const styles = this.createStyles(); if (!isVisible) { - return children ? children : null; + return null; } return ( - - {children ? children : null} + {text} From 30c1f935224b6c924cb983b2398e937d9f0c6123 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 02:27:30 -0600 Subject: [PATCH 12/17] android compatibility android compatibility --- lib/Tab.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/lib/Tab.js b/lib/Tab.js index 33a29a8..b4da627 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -120,6 +120,7 @@ export default class Tab extends Component { ]} > {this._renderIcon()} + {this._renderBadge()} {this._renderLabel()} @@ -127,10 +128,10 @@ export default class Tab extends Component { } _renderBadge = () => { - const { active, icon, activeIcon, badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props; + const { badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props; if (badgeText === undefined && !isBadgeVisible) { - return active && activeIcon ? activeIcon : icon; + return null; } return ( @@ -139,14 +140,13 @@ export default class Tab extends Component { size={badgeSize} style={badgeStyle} isVisible={isBadgeVisible} - > - {active && activeIcon ? activeIcon : icon} - + /> ) } _renderIcon = () => { - const mode = this._getModeString() + const mode = this._getModeString(); + const { active, icon, activeIcon } = this.props; return ( - {this._renderBadge()} + {active && activeIcon ? activeIcon : icon} ) @@ -300,7 +300,8 @@ const styles = StyleSheet.create({ paddingBottom: 10, paddingLeft: 12, paddingRight: 12, - backgroundColor: 'transparent' + backgroundColor: 'transparent', + position: "relative", }, shiftingInactiveContainer: { maxWidth: 96, @@ -322,6 +323,7 @@ const styles = StyleSheet.create({ includeFontPadding: false, textAlignVertical: 'center', justifyContent: 'flex-end', - backgroundColor: 'transparent' + backgroundColor: 'transparent', + zIndex: 0 } }) From d79ab78ea2c0d5b85e41a9a1ebf1515fa8fb7236 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 13:30:26 -0600 Subject: [PATCH 13/17] animation fix animation fix --- lib/Badge.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/lib/Badge.js b/lib/Badge.js index 0148d32..d26ccc7 100644 --- a/lib/Badge.js +++ b/lib/Badge.js @@ -7,7 +7,8 @@ import React, { Component } from 'react' import { View, Text, - StyleSheet + StyleSheet, + Animated } from 'react-native'; type BProps = { @@ -16,6 +17,7 @@ type BProps = { children: Array>, style: any, isVisible: boolean, + translateY: number, } const defaultProps = { @@ -42,7 +44,8 @@ export default class Badge extends Component { justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, - bottom: 10, + top: 3, + right: 27, }, style.container ); @@ -64,18 +67,21 @@ export default class Badge extends Component { } render() { - const { children, text, isVisible } = this.props; + const { children, text, isVisible, translateY } = this.props; const styles = this.createStyles(); if (!isVisible) { return null; } return ( - - - {text} - - + + {text} + ) } } From 37195dd069826a2d9fcf7b4459f32f97e0834f17 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 13:30:48 -0600 Subject: [PATCH 14/17] animation fix animation fix --- lib/Tab.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/Tab.js b/lib/Tab.js index b4da627..9f2e43a 100644 --- a/lib/Tab.js +++ b/lib/Tab.js @@ -129,18 +129,20 @@ export default class Tab extends Component { _renderBadge = () => { const { badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props; + const mode = this._getModeString(); if (badgeText === undefined && !isBadgeVisible) { return null; } return ( - + ) } From d8e347e2e9840803aca4b854722da17d23b6bd23 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 13:31:37 -0600 Subject: [PATCH 15/17] updated readme updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2e7bda8..e1c3006 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,7 @@ Don't skip this part. You will be happy to know about all the good stuff you can | **`onPress`** | Function to be called when the Tab was pressed. **When you use this, the pressed tab won't be active automatically. You need to set it to active by updating `BottomNavigation.activeTab`.** This function will be called with the parameter `(newTabIndex) => {}` | `function` | – | | **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - | | **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `number` | 20 | -| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "relative", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, bottom: 5, right: 10 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | +| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, top: 3, right: 27 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | | **`isBadgeVisible`** | Determines if the badge is visible or not | `boolean` | - | ## Behind the Navigation Bar From 83880aea14befc3ca56fcb7495b8243f91e825bc Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 13:55:50 -0600 Subject: [PATCH 16/17] changed fixed position value to dynamic changed fixed position value to dynamic --- lib/Badge.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/Badge.js b/lib/Badge.js index d26ccc7..878ca43 100644 --- a/lib/Badge.js +++ b/lib/Badge.js @@ -45,7 +45,8 @@ export default class Badge extends Component { backgroundColor: "#F50057", zIndex: 9999, top: 3, - right: 27, + left: "50%", + marginLeft: 15 }, style.container ); From a504e7849f3fbe9b17f8ccad5edea0c258329bf2 Mon Sep 17 00:00:00 2001 From: Shayan Javadi Date: Sun, 11 Feb 2018 13:56:27 -0600 Subject: [PATCH 17/17] updated readme with new styles updated readme with new styles --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index be08a8f..5540ac7 100644 --- a/README.md +++ b/README.md @@ -131,7 +131,7 @@ Don't skip this part. You will be happy to know about all the good stuff you can | **`onPress`** | Function to be called when the Tab was pressed. **When you use this, the pressed tab won't be active automatically. You need to set it to active by updating `BottomNavigation.activeTab`.** This function will be called with the parameter `(newTabIndex) => {}` | `function` | – | | **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - | | **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2) | `number` | 20 | -| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, top: 3, right: 27 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | +| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, top: 3, left: "50%", marginLeft: 15 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` | | **`isBadgeVisible`** | Determines if the badge is visible or not | `boolean` | - | ## Behind the Navigation Bar