Set icon size in bottomTab configuration react-native-navigation

Question

I am developing an app in react native and using react-native-navigation library to create a bottom tab.

Here I am unable to provide size to bottom icons. I am using a icon of size 25*25 right now which is blurry in high resolution device. When I use larger icon (for example 30*30), icons are overlapping each other in ios only.

react-native-navigation library link - https://wix.github.io/react-native-navigation/#

Below is the link which I have gone through :-

https://github.com/wix/react-native-navigation/issues/3527#

https://github.com/wix/react-native-navigation/issues/4420

Navigation.setRoot({
        root: {
            bottomTabs: {
                children: [

                    {

                        stack: {
                            id: Stackid.Stackid2,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen1Stack,

                                    }
                                },
                            ],

                            options: {

                                bottomTab: {
                                    text: 'Tab1',
                                    fontSize: 12,
                                    icon: require('../assets/firstImage.png'), 
                                    iconColor:'red',
                                    currentTabId: Stackid.Screen1,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',


                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                },
                                statusBar: {
                                    visible: true,
                                    backgroundColor: 'grey',
                                    drawBehind: false,
                                    style: "light" //Or dark
                                },
                            }
                        }
                    },
                    {

                        stack: {
                            id: Stackid2,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen2,

                                    }
                                },
                            ],
                            options: {
                                bottomTab: {
                                    text: 'Tab2',
                                    fontSize: 12,
                                    icon: require('../assets/SecondImage.png'), 
                                    iconColor:'red',
                                    currentTabId: Stackid.Screen2,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',

                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                }
                            }
                        }
                    },
                    {
                        stack: {
                            id: Stackid.Stackid3,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen3,

                                    }
                                },
                            ],
                            options: {
                                bottomTab: {
                                    text: 'Tab3',
                                    fontSize: 12,
                                    icon: require('../assets/ThirdImage.png'),

                                    iconColor:'red',            
                                    currentTabId: Stackid.Screen3,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',

                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                }
                            }
                        }
                    },




                ],
                tabBarOptions: {
                    style: {
                        // width: windowsWidth,
                        height: 170,
                    },
                    labelStyle: {
                        fontSize: 14,
                        color: 'black',
                    },
                }




            }
        }

    });

};

}

Dependencies :-

"dependencies": {
    "lodash": "^4.17.11",
    "prop-types": "^15.6.2",
    "react": "16.6.3",
    "react-native": "^0.57.8",
    "react-native-elements": "^0.19.1",
    "react-native-iphone-x-helper": "^1.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-modal-datetime-picker": "^7.4.0",
    "react-native-navigation": "^2.3.0",
    "react-native-secure-key-store": "^2.0.2",
    "react-native-segmented-control-tab": "^3.3.1",

  },

Please help me. Thanks in advance.

@EdisonBiba, yes I tried scale but it is not consistent in all device and also image sharpness is very low. — Vikas S, Sep 16 '19 at 14:33

hong developer · Answer 1 · 2019-09-15T15:06:20.840

2

Add images to assets in Xcode and try them.

For images included via Xcode asset catalogs use the image name without the extension:

add Asset in Xcode

Example

<Image source={{uri: 'AppIcon'}} style={{width: 40, height: 40}} />

If you want to do it differently on different platforms, For images included in the Android drawable folder, use the image name without the extension:

let appicon = Platform.OS === "ios" ? "AppIcon" : "asset:/AppIcon.png"
<Image source={{uri: appicon }} style={{width: 40, height: 40}} />

edited Sep 15 '19 at 15:06

answered Sep 13 '19 at 09:29

hong developer

13,291
4
38
68

Thanks for your response @hong I have implemented this but after scaling the image I am getting smaller icon in iPhone 5, 6 as compare to other device(7, X, Rr, Xs Max). Can you please suggest why it is happening? Now a new challenge for me is to use icon for both platform natively in a single image source. – Vikas S Sep 14 '19 at 09:14
Are the icons fixed in size? Of course, the size of the icons varies depending on the size of the screen. Because the screen is large, the icon has to be larger. – hong developer Sep 15 '19 at 15:02
If you want to do it differently on different platforms, You can use `Platform` – hong developer Sep 15 '19 at 15:03
I edited my answer as you wanted. If my answer was helpful, would you please check and select the 'V' and arrow? – hong developer Sep 15 '19 at 15:06
1

Hi hong I am very close to resolve this issue by implementing your above solution, but there are some issue which am facing right now : 1. I am unable to use Image because react-native-navigation library doesn't support Image. 2. When I provide height and width it is getting crash 3. I am able to use scale but it is not consistent thought all iPhone devices, 4. When I use scale the icon quality is not good, sharpness is missing here. – Vikas S Sep 16 '19 at 14:28
Here how I am using the scale factor in my code: options: { bottomTab: { text: 'Tab1', fontSize: 12, icon: { scale:1.7, uri: Platform.OS === 'ios' ? 'tab1_ios':'tab1_androidd', }, } react-native-navigation library link - https://wix.github.io/react-native-navigation/#/ Could you please suggest what I am doing wrong? – Vikas S Sep 16 '19 at 14:28
icons size 1x = 24px 2x = 48px 3x = 72px – Vikas S Sep 16 '19 at 14:30

Set icon size in bottomTab configuration react-native-navigation

1 Answers1