Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Icons get cut off

See original GitHub issue

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
    }
})