How to add TabBar badge

[Bundas]

Hello, I know there have been already resolved issues like this #766, but I believe they have not been resolved completely because the badge is not fitting correctly (picture below). Any idea how to fix that? In my opinion it would work fine If the Tab container was wider/bigger.. But I don't know how to do so

import IconBadge from 'react-native-icon-badge';

return TabNavigator(
        {
            Food: {
                screen: stackNavigator,
                navigationOptions: {
                    tabBarIcon: (
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}
                        >
                            <IconBadge
                                MainElement={
                                    <Ionicons
                                        // style={{ margin: 10 }}
                                        name={'cart'}
                                        size={25}
                                        color={'white'}
                                    />
                                }
                                BadgeElement={
                                    <Text style={{ color: '#FFFFFF' }}>
                                        {1}
                                    </Text>
                                }
                                IconBadgeStyle={{
                                    width: 15,
                                    height: 15,
                                    backgroundColor: 'red'
                                }}
                                Hidden={false}
                            />
                        </View>
                    ),
                    tabBarLabel: 'Food'
                }
            },
            Cart: {
                screen: RandomScene,
                navigationOptions: {
                    tabBarIcon: (
                        <Ionicons name={'cart'} size={25} color={'white'} />
                    ),
                    tabBarLabel: 'Cart'
                }
            },
            Profile: {
                screen: RandomScene,
                navigationOptions: {
                    tabBarIcon: (
                        <View>
                            <Ionicons
                                name={'account'}
                                size={25}
                                color={'white'}
                            />
                            {
                                <View
                                    style={{
                                        position: 'absolute',
                                        right: 10,
                                        top: 5,
                                        backgroundColor: 'red',
                                        borderRadius: 9,
                                        width: 18,
                                        height: 18,
                                        justifyContent: 'center',
                                        alignItems: 'center'
                                    }}
                                >
                                    <Text style={{ color: 'white' }}>2</Text>
                                </View>
                            }
                        </View>
                    ),
                    tabBarLabel: 'Profile'
                }
            }
        },
        {
            tabBarPosition: 'bottom',
            lazy: false,
            tabBarOptions: {
                showIcon: true,
                showLabel: false,
                labelStyle: { backgroundColor: 'red' }
            },
            swipeEnabled: false
        }
    );

[matthamil]

👋 Hi! The issues are reserved for bug reports only. If you believe this is a bug in React Navigation, please reopen a new issue with a reproducible Snack. If you have questions about usage, check out Stack Overflow or the Reactiflux Discord server.

[chansuke]

Add position:absolute in IconBadgeStyle and tweak the position will fix this.