Remove spaces from container

[hamidhadi]

You can see in the image that I attached some spaces around the container. In your demo files there is not any spaces like these. So how can I remove them?

[timomeh]

This doesn't look right, there shouldn't be spaces. The label text in your example also looks smaller than it should be, and the icon isn't centered.

Could you please provide your react-native version and all Code-Snippets for your example which are related to the Bottom Navigation?

[hamidhadi]

@timomeh sure. RN version: 0.42.0 react-navigation version: 1.0.0-beta.6

Here is my code:

const MyApp = TabNavigator({
  Home: { screen: HomeScreen },
  Category: { screen: CategoryScreen },
  Calendar: { screen: CalendarScreen },
  Profile: { screen: ProfileScreen },
  Book: { screen: BookScreen },
}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: '#CCC',
      rippleColor: '#801e5c',
      style: {
        borderTopWidth: 0.5,
        borderColor: '#CCC'
      },
      tabs: {
        Home: {
          barBackgroundColor: '#FFF',
          activeLabelColor: '#801e5c',
          activeIcon: <MCIcon size={24} color='#801e5c' name="home" />
        }
      }
    }
  }
});

[timomeh]

Sorry, but I can't reproduce it (also with RN 0.42 and react-navigation 1.0.0-beta.6; I tried 1.0.0-beta.7, too). That's the exact code I used to reproduce the following:

import React, { Component } from 'react'
import { View } from 'react-native'
import { TabNavigator } from 'react-navigation'
import { NavigationComponent } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons'

class ScreenOne extends Component {
  static navigationOptions = {
    tabBar: {
      label: "Home",
      icon: ({ tintColor }) => <Icon size={24} name="home" color="black" />
    }
  }

  render() {
    return <View />
  }
}

class ScreenTwo extends Component {
  static navigationOptions = {
    tabBar: {
      label: "Two",
      icon: ({ tintColor }) => <Icon size={24} name="bookmark" color="black" />
    }
  }

  render() {
    return <View />
  }
}

export default TabNavigator({
  ScreenOne: { screen: ScreenOne },
  ScreenTwo: { screen: ScreenTwo },
  ScreenThree: { screen: ScreenTwo },
  ScreenFour: { screen: ScreenTwo }
}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: '#CCC',
      rippleColor: '#801e5c',
      activeLabelColor: '#801e5c',
      backgroundColor: '#FFF',
      style: {
        borderTopWidth: 0.5,
        borderColor: '#CCC'
      },
      tabs: {
        ScreenOne: {
          barBackgroundColor: '#FFF',
          activeIcon: <Icon size={24} color="#801e5c" name="home" />
        }
      }
    }
  }
})

(I did notice that animationEnabled: false causes the Touch-Feedback Ripple to be animated twice)

Is there maybe anything else which could affect your styling? I'm a bit clueless why this happens...

[timomeh]

@hamidhadi Were you able to solve it?

[hamidhadi]

Thank you @timomeh . I could not solve it and because I want to use RTL language I wrote my own bottom navigation. But I didn't close this issue, so if anybody has this problem can write a solution to fix it.

[timomeh]

It kinda looks like the flex layout of the tabs isn't working. But I can't reproduce it...

@rishabhrawat11 Do you have a RTL Layout, too? I didn't test the shifting navigation with RTL layout (mainly because I thought it would work 😅) Maybe that's a direction where I could investigate.

[vitorebatista]

I have the same problem. RN version: 0.43.4

[timomeh]

I upgraded to 0.43 and finally I can reproduce it. Will work on a fix quick.

[timomeh]

I just published v0.5.0 which solves that issue.

This is a reported issue in React Native itself, see https://github.com/facebook/react-native/issues/12878. If I set minWidth like it's specified in the guidelines, the Layout engine of React Native will just use that instead of filling the available space, like a minWidth normally behaves.

For now I removed the minWidth, so you guys can use the BottomNavigation.

Thanks for your patience, took a while until I was able to reproduce it.