Set icon size in bottomTab configuration

[dabit3]

Issue Description

Right now, there is no way to set the size of icons in the bottomTab configuration. I think it would be nice to either be able to pass in an Image component here with its own config / styling, or to have something like iconSize or iconStyle prop to be able to have control over the size of the icon.

Steps to Reproduce / Code Snippets / Screenshots

1. Create bottomTabs navigation
2. Set the bottomTab icon property

---

Environment

• React Native Navigation version: 2.0.2399
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[LRNZ09]

On Android icons are resized automatically, on iOS this does not happen and it ends up like this:

[nilocoelhojunior]

We had the same problem. For fix in IOS, we set the icons for size 25x25

[andres-gr]

What I have read indicates that on Android icon size is automatically set by the native component that RNN uses for the bottom tabs.

On iOS we have a property scale that is not the v2 docs

bottomTab: {
    icon: {
        scale: 1.5, // the higher the number the smaller the icon
        uri: 'person'
    },
    text: 'PERFIL'
}

hope this helps

[LRNZ09]

@andres-gr I've tried your workaround on latest version (2.8.0), but it seems it doesn't work.

[andres-gr]

@LRNZ09 had no idea, it works on version 2.7.1

[MakhouT]

Having the same issue...

[sharifashraful]

just add the following line for icon size.. at react-native-navigation>lib>android>src>app>main>res>values>dimen.xml

30dp

default icon size 24dp

[nywooz]

Had the same issue, i resize the image myself. That fixed my issue.

[nathantqn]

Hi @andres-gr, I tried to export a small 30px png icon and use it directly with icon: require('path') but because it's so small, the image quality is very bad, that's why I really want to use your approach (I export a large image with x3 quality), then use the scale to make it smaller, however I cannot make it work. The exceptionpathExtension cannot be nil was thrown. So I really want to ask how can you define the uri path in this case.

bottomTab: {
    icon: {
        scale: 1.5, // the higher the number the smaller the icon
        uri: 'person'
    },
    text: 'PERFIL'
}

I mean if I store the image in the app folder assets/images/icon.png then when I tried to use

bottomTab: {
              icon: {
                scale: 3,
                uri: '/assets/images/icon.png',
              },
            },

it will raise the error pathExtension cannot be nil. I already tried different kind of paths (../assets) but none of them work. Could you please help me to clarify this, thank you

[andres-gr]

@nenjamin2405 I believe the solution I posted only works on svg icon files that have been added to the native assets.

That's how you can call them by using only their name, without a path or file extension. And also why the scale property affects them.

[nathantqn]

@andres-gr many thanks for your reply, I don't have much experience about adding svg icon files to native assets, could you please give me some advices or related articles of how to implement that in react native? Really appreciate it

[andres-gr]

@nenjamin2405 You can find it very quickly on Google or stack overflow, I don't have a reference on hand right now, it's been a long time since I have worked with React native.

A tip I can give you us that for iOS, for some odd reason, you need to add svg icons as pdf files.

You can also search for a command line utility that transforms .svg files to .pdf files.

[nathantqn]

@andres-gr Many thanks, really appreciate your response, I'll investigate about it :D

[nathantqn]

For those who have the same problem, I followed this topic in StackOverflow and it works: https://stackoverflow.com/questions/57920195/set-icon-size-in-bottomtab-configuration-react-native-navigation

Basically, all you need to do is:

1. Open your project in XCode
2. Go to Images.xcassets
3. Drag your big image to that folder
4. Use the below snippet in your navigator settings, use the appropriate scale value, use the file name without the extension (instead of using "your-icon.png", use "your-icon")

          options: {
            bottomTab: {
              icon: {
                scale: 3,
                uri: 'your-icon',
              },
              selectedIcon: {
                scale: 3,
                uri: 'your-icon-selected',
              },
            },
          },

[ehxxn]

Open XCode Go to Images.xcassets Drag your image to that folder

for android you can use your local images directory and for ios, you can use the name of the image the you put inside that Images.xcassets folder

{
        bottomTab: {
            ...(Platform.OS === 'ios'
              ? {
                  icon: {
                    uri: 'cart-icon',
                    scale: 3
                  },
                }
              : {
                  icon: require('../assets/cart-icon.png'),
                }),
          }
 }