Icons get cut off

[JanOwiesniak]

What kind of Issue is this?

• (x) Bug Report

How are you using the Bottom Navigation?

• (x) I use the standalone version.

Expected behavior

I expect icons to be fully visible, independent of the given size.

Actual behavior

Icons will be cut off if size increases above a given point.

Additional description and resources

import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/SimpleLineIcons'
import React from "react";
import { StyleSheet } from 'react-native';

export default class Main extends React.Component {
    render() {
        return (
            <BottomNavigation
                activeTab="1"
                style={styles.bottomNavigation}
            >
                <Tab
                    barBackgroundColor="#FFFAFB"
                    icon={<Icon size={40} color="#282A2A" name="people" />}
                    activeIcon={<Icon size={40} color="#F9D861" name="people" />}
                />
                <Tab
                    labelColor="#282A2A"
                    barBackgroundColor="#FFFAFB"
                    icon={<Icon size={40} color="#282A2A" name="hourglass" />}
                    activeIcon={<Icon size={40} color="#F9D861" name="hourglass" />}
                />
                <Tab
                    barBackgroundColor="#FFFAFB"
                    icon={<Icon size={40} color="#282A2A" name="present" />}
                    activeIcon={<Icon size={40} color="#F9D861" name="present" />}
                />
            </BottomNavigation>
        );
    }
}

const styles = StyleSheet.create({
    bottomNavigation: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: 56
    }
})

Screenshot

Environment

• React Native versions: 0.50.3
• react-native-material-bottom-navigation version: 0.7.0
• I tested this with: iOS

[JanOwiesniak]

Maybe related to https://github.com/oblador/react-native-vector-icons/issues/540

[timomeh]

The size of the Icon should be 24 (see docs for icon prop in the Tab Section of the README). You can't make the Icons larger than that or else they will be cut off, independend of the Icon Component you use.

[JanOwiesniak]

Thanks for the super fast response. But what if i really want bigger icons than 24? Is there any way to archive this?

[timomeh]

Unfortunately, no. This Component follows the specs of Material Design Bottom navigation. Supporting more customizations like the icon size, label text size etc. would also mean that the animations need to adapt to that, or also be customizable, which would increase complexity, bugs, support, and so on...

[JanOwiesniak]

Ok, get it. Thanks for the explanation. I will just go with a 24 size for now.

[bijomon-tolexo]

Same issue, for now solving issue placing ICON inside TEXT <Text><Icon type="MaterialIcons" name="crop-portrait" /></Text>