Make bottom tabs more visually correct (#7788)

I have made some changes it order to make the bottom tabs more correct when rendering visually (by using react-native-web). before: ![image](https://github.com/wix/react-native-navigation/assets/8758348/6d8c9717-e8bc-4ddd-b711-c1d5bb704559) after: ![image](https://github.com/wix/react-native-navigation/assets/8758348/8a75748b-437d-42e1-ac3f-987a66b45ed1)
wix · Sep 20, 2023 · dab2ee3 · dab2ee3
1 parent f6f423f
commit dab2ee3
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/lib/Mock/Components/ComponentScreen.tsx b/lib/Mock/Components/ComponentScreen.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { Button, View, Text } from 'react-native';
-import { Navigation } from 'react-native-navigation';
+import { View, Text, TouchableOpacity, Image, ImageURISource} from 'react-native';
+import { Navigation, ImageResource} from 'react-native-navigation';
 import { ComponentProps } from '../ComponentProps';
 import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
@@ -10,6 +10,11 @@ import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
 import { switchTabByIndex } from '../actions/layoutActions';
 
+
+function isURISource(src: ImageResource| undefined): src is ImageURISource {
+  return !!src && typeof src === 'object' && 'uri' in src;
+}
+
 export const ComponentScreen = connect(
   class extends Component<ComponentProps> {
     constructor(props: ComponentProps) {
@@ -27,30 +32,41 @@ export const ComponentScreen = connect(
     renderTabBar() {
       const bottomTabs = this.props.layoutNode.getBottomTabs();
       if (!bottomTabs) return null;
-
       const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
       if (bottomTabsOptions?.visible === false) return null;
       const buttons = bottomTabs!.children!.map((child, i) => {
         const bottomTabOptions = child.resolveOptions().bottomTab;
+        const icon = (bottomTabs as any).selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+        const iconURI = isURISource(icon) ? icon.uri : undefined;
         return (
           <View key={`tab-${i}`}>
-            <Button
+            <TouchableOpacity
+              style={{padding:10}}
               testID={bottomTabOptions?.testID}
-              title={bottomTabOptions?.text || ''}
               onPress={() => {
                 events.invokeBottomTabPressed({
                   tabIndex: i,
                 });
                 if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
                   switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
-            />
-            <Text>{bottomTabOptions?.badge}</Text>
+            >
+            <View style={{justifyContent: 'center', alignItems: 'center'}}>
+              <Text>{bottomTabOptions?.badge}</Text>
+              {iconURI && <Image style={{width: 18, height: 18, marginBottom: 5}} source={{uri: iconURI}}/>}
+              <Text style={{fontSize: 12}}>{bottomTabOptions?.text || ''}</Text>
+            </View>
+            </TouchableOpacity>
           </View>
         );
       });
 
-      return <View testID={bottomTabsOptions?.testID}>{buttons}</View>;
+      return (
+      <View 
+        testID={bottomTabsOptions?.testID} 
+        style={{flexDirection: 'row',justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5'}}>
+          {buttons}
+      </View>);
     }
 
     render() {
@@ -67,8 +83,8 @@ export const ComponentScreen = connect(
               backButtonOptions={this.props.layoutNode.resolveOptions().topBar?.backButton}
             />
           )}
-          {this.renderTabBar()}
           <Component componentId={this.props.layoutNode.nodeId} />
+          {this.renderTabBar()}
         </View>
       );
     }