fix: BottomNavigation vertical align [issue](#1719) (#1721)

src/components/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -197,10 +197,7 @@ export class BottomNavigation extends React.Component<BottomNavigationProps> {
     const [indicatorElement, ...tabElements] = this.renderComponentChildren(evaStyle);
 
     return (
-      <View
-        testID={testID}
-        style={styles.container}
-      >
+      <View testID={testID}>
         {indicatorElement}
         <View style={[evaStyle.container, styles.elementsContainer, style]}>
           {tabElements}
@@ -211,9 +208,6 @@ export class BottomNavigation extends React.Component<BottomNavigationProps> {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-  },
   elementsContainer: {
     flexDirection: 'row',
   },

src/showcases/components/bottomNavigation/bottomNavigationSimpleUsage.component.tsx

@@ -1,18 +1,44 @@
 import React from 'react';
-import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
+import { BottomNavigation, BottomNavigationTab, Text } from '@ui-kitten/components';
+import { StyleSheet, View } from 'react-native';
 
 export const BottomNavigationSimpleUsageShowcase = (): React.ReactElement => {
 
   const [selectedIndex, setSelectedIndex] = React.useState(0);
 
   return (
-    <BottomNavigation
-      selectedIndex={selectedIndex}
-      onSelect={index => setSelectedIndex(index)}
-    >
-      <BottomNavigationTab title='USERS' />
-      <BottomNavigationTab title='ORDERS' />
-      <BottomNavigationTab title='TRANSACTIONS' />
-    </BottomNavigation>
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Text
+          category='h4'
+          style={styles.text}
+        >
+          Content
+        </Text>
+      </View>
+      <BottomNavigation
+        selectedIndex={selectedIndex}
+        onSelect={index => setSelectedIndex(index)}
+      >
+        <BottomNavigationTab title='USERS' />
+        <BottomNavigationTab title='ORDERS' />
+        <BottomNavigationTab title='TRANSACTIONS' />
+      </BottomNavigation>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    height: 150,
+    backgroundColor: '#EEF1F6',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'white',
+    textAlign: 'center',
+  },
+});