Repository: callstack/react-native-paper
Pull request #747 (2019-01-23 06:19:54)

fixing parenthesis locations
On the following line the parenthesis are not properly located:
https://github.com/callstack/react-native-paper/blob/bcef4a60ba72669d51cd9418a341193c9bb0cfc8/example/App.js#L41

this is how it is right now:
drawerPosition: Platform.OS === 'android' && (I18nManager.isRTL ? 'right' : 'left'),

this is how it should be:
drawerPosition: (Platform.OS === 'android' && I18nManager.isRTL) ? 'right' : 'left',

since "drawerPosition" accepts the values: { 'left', 'right' }

Thanks.

Trancever: @napolev Thanks for PR! Could you fix eslint error? It's a problem with formatting.

Patch:
diff --git a/example/App.js b/example/App.js
index 7f4eaf73e..9ddeb2c4f 100644
--- a/example/App.js
+++ b/example/App.js
@@ -38,7 +38,7 @@ const App = createDrawerNavigator(
     ),
     // set drawerPosition to support rtl toggle on android
     drawerPosition:
-      Platform.OS === 'android' && (I18nManager.isRTL ? 'right' : 'left'),
+      Platform.OS === 'android' && I18nManager.isRTL ? 'right' : 'left',
   }
 );
 
diff --git a/example/src/BottomNavigationExample.js b/example/src/BottomNavigationExample.js
index 39ef8e06e..55c9380e9 100644
--- a/example/src/BottomNavigationExample.js
+++ b/example/src/BottomNavigationExample.js
@@ -11,6 +11,7 @@ type State = {
     title: string,
     icon: string,
     color: string,
+    badge?: boolean,
   }>,
 };
 
@@ -45,6 +46,7 @@ export default class BottomNavigationExample extends React.Component<
         title: 'Library',
         icon: 'inbox',
         color: '#2962ff',
+        badge: true,
       },
       {
         key: 'favorites',
diff --git a/src/components/Badge.js b/src/components/Badge.js
index bdb06d445..afeec5a3a 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -81,6 +81,7 @@ class Badge extends React.Component<Props, State> {
 
     return (
       <Animated.Text
+        numberOfLines={1}
         style={[
           {
             opacity,
diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js
index eb2196be4..f367f672e 100644
--- a/src/components/BottomNavigation.js
+++ b/src/components/BottomNavigation.js
@@ -15,6 +15,7 @@ import { polyfill } from 'react-lifecycles-compat';
 import color from 'color';
 import Icon from './Icon';
 import Surface from './Surface';
+import Badge from './Badge';
 import TouchableRipple from './TouchableRipple';
 import Text from './Typography/Text';
 import { black, white } from '../styles/colors';
@@ -28,6 +29,7 @@ type Route = $Shape<{
   key: string,
   title: string,
   icon: IconSource,
+  badge: string | number | boolean,
   color: string,
   accessibilityLabel: string,
   testID: string,
@@ -60,6 +62,7 @@ type Props<T> = {
    * - `title`: title of the route to use as the tab label
    * - `icon`: icon to use as the tab icon, can be a string, an image source or a react component
    * - `color`: color to use as background color for shifting bottom navigation
+   * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
    * - `accessibilityLabel`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
@@ -153,6 +156,11 @@ type Props<T> = {
    * Get the id to locate this tab button in tests, uses `route.testID` by default.
    */
   getTestID?: (props: { route: T }) => ?string,
+  /**
+   * Get badge for the tab, uses `route.badge` by default.
+   */
+  getBadge?: (props: { route: T }) => boolean | number | string,
+  /**
   /**
    * Get color for the tab, uses `route.color` by default.
    */
@@ -535,6 +543,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
       renderIcon,
       renderLabel,
       getLabelText = ({ route }: Object) => route.title,
+      getBadge = ({ route }: Object) => route.badge,
       getColor = ({ route }: Object) => route.color,
       getAccessibilityLabel = ({ route }: Object) => route.accessibilityLabel,
       getTestID = ({ route }: Object) => route.testID,
@@ -734,6 +743,8 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                   outputRange: [1, 0],
                 });
 
+                const badge = getBadge({ route });
+
                 return (
                   <Touchable
                     key={route.key}
@@ -797,6 +808,25 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                             />
                           )}
                         </Animated.View>
+                        <View
+                          style={[
+                            styles.badgeContainer,
+                            {
+                              right:
+                                (badge != null && typeof badge !== 'boolean'
+                                  ? String(badge).length * -2
+                                  : 0) - 2,
+                            },
+                          ]}
+                        >
+                          {typeof badge === 'boolean' ? (
+                            <Badge visible={badge} size={8} />
+                          ) : (
+                            <Badge visible={badge != null} size={16}>
+                              {badge}
+                            </Badge>
+                          )}
+                        </View>
                       </Animated.View>
                       {labeled ? (
                         <Animated.View
@@ -924,4 +954,9 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     backgroundColor: 'transparent',
   },
+  badgeContainer: {
+    position: 'absolute',
+    left: 0,
+    top: -2,
+  },
 });


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Badge.test.js.snap b/src/components/__tests__/__snapshots__/Badge.test.js.snap
index e27ca991b..b0ec628e1 100644
--- a/src/components/__tests__/__snapshots__/Badge.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Badge.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`renders badge 1`] = `
 <Text
+  numberOfLines={1}
   style={
     Object {
       "alignSelf": "flex-end",
@@ -24,6 +25,7 @@ exports[`renders badge 1`] = `
 
 exports[`renders badge as hidden 1`] = `
 <Text
+  numberOfLines={1}
   style={
     Object {
       "alignSelf": "flex-end",
@@ -48,6 +50,7 @@ exports[`renders badge as hidden 1`] = `
 
 exports[`renders badge in different color 1`] = `
 <Text
+  numberOfLines={1}
   style={
     Object {
       "alignSelf": "flex-end",
@@ -72,6 +75,7 @@ exports[`renders badge in different color 1`] = `
 
 exports[`renders badge in different size 1`] = `
 <Text
+  numberOfLines={1}
   style={
     Object {
       "alignSelf": "flex-end",
@@ -96,6 +100,7 @@ exports[`renders badge in different size 1`] = `
 
 exports[`renders badge with content 1`] = `
 <Text
+  numberOfLines={1}
   style={
     Object {
       "alignSelf": "flex-end",
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 9a624df28..eaa385ad0 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -242,6 +242,41 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -391,6 +426,41 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -540,6 +610,41 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -819,6 +924,41 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -968,6 +1108,41 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1117,6 +1292,41 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1318,6 +1528,41 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   3d-rotation
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1447,6 +1692,41 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   ac-unit
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1576,6 +1856,41 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   access-alarm
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1835,6 +2150,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   3d-rotation
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -1948,6 +2298,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   ac-unit
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -2061,6 +2446,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   access-alarm
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -2174,6 +2594,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   access-alarms
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -2287,6 +2742,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   access-time
                 </icon>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -2568,6 +3058,41 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -2789,6 +3314,41 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -3010,6 +3570,41 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -3361,6 +3956,41 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -3549,6 +4179,41 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -3737,6 +4402,41 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -4035,6 +4735,41 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -4256,6 +4991,41 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -4477,6 +5247,41 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -4828,6 +5633,41 @@ exports[`renders shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -5016,6 +5856,41 @@ exports[`renders shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -5204,6 +6079,41 @@ exports[`renders shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -5392,6 +6302,41 @@ exports[`renders shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={
@@ -5580,6 +6525,41 @@ exports[`renders shifting bottom navigation 1`] = `
                   
                 </Text>
               </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "left": 0,
+                      "position": "absolute",
+                      "top": -2,
+                    },
+                    Object {
+                      "right": -2,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "alignSelf": "flex-end",
+                      "backgroundColor": "#f50057",
+                      "borderRadius": 8,
+                      "color": "#ffffff",
+                      "fontFamily": "Helvetica Neue",
+                      "fontSize": 8,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "minWidth": 16,
+                      "opacity": 0,
+                      "paddingHorizontal": 4,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    }
+                  }
+                />
+              </View>
             </View>
             <View
               style={