10

Please feel free to point me in the correct direction if this has been answered elsewhere, but I can't find it via here, or Google. Maybe I just don't know this correct name for this thing?

I am currently working with React-navigation (for react-native) and I wonder if it is possible to make one icon in the center of the tab bar larger than the others, in particular with transparency behind it when the page scrolls.

Mock up here for an example: Larger icon in middle overlaying scrollable area of screen

Does anybody if this is possible with this library, and how it might be achieved?

I was also thinking to try out the Wix library react-native-navigation once they have actually released a version which isn't broken, buggy, actually comes with accurate documentation, and isn't broken with the current version of react-native. (it's a bit of a disaster area there right now, but it looks very good so I'm keen to try it once it actually works again), so is it possible with their library and I'll just have to wait to try it out?

Martin Wood
  • 131
  • 1
  • 6
  • I had to do something similar, and couldn't find anything either. I ended up creating my own navigation component and doing a custom implementation sort of thing. We just have to wait out for a new library it seems – Ryan Turnbull Apr 26 '17 at 06:51
  • Which icon library you're using? Most of them have properties, like _size_ to define it larger. I'm personally using react-native-vector-icons with React Navigation. – Samuli Hakoniemi Apr 26 '17 at 08:57
  • 1
    @RyanTurnbull Ouch, that sounds like at least a weekend (or more) of my time. Haha. But thanks for the tip. If no other solutions materialise, I may have to consider investigating how to do that. – Martin Wood Apr 26 '17 at 09:25
  • 1
    @zvona I'm fairly new to react-native and haven't yet got as far as playing with many libraries. Right now I'm just require()-ing the icon images directly into the navigationOptions. Not sure a size property would do it anyway. With what I have now I am able to make only 1 icon bigger by simply downloading a bigger one from the website I get them off, then with a little style it becomes bigger. But the tabbar just expands. And if you force the tabbar height the icon will overflow, but downwards off the screen, not upwards overflowing like I'd want it to. – Martin Wood Apr 26 '17 at 09:28

1 Answers1

3

I was able to create a similar style with the following configuration:

export const Tabs = TabNavigator({
  Profile: {
    screen: ProfileStack,
    navigationOptions: {
      title: 'Profile',
      tabBarLabel: 'Profile',
      tabBarIcon: ({tintColor}) => <Icon name="ios-settings-outline" 
      type="ionicon" size={33} color={tintColor}/>
    }
  },
  Charities: {
    screen: Charities,
    navigationOptions: {
      title: 'Browse',
      tabBarLabel: 'Browse',
      tabBarIcon: ({tintColor}) => 
      <View style={{
          height: 80,
          width: 80,
          borderRadius: 100,
          backgroundColor: '#FE6D64',
          paddingTop: 15}}>
        <Icon name="ios-heart-outline" type="ionicon" size={45} 
         color{tintColor}/>
      </View>
    }
  },
  Account: {
    screen: AccountStack,
    navigationOptions: {
      title: 'Account',
      tabBarLabel: 'Account',
      tabBarIcon: ({tintColor}) => <Icon name="connectdevelop" type="font-
      awesome" size={25} color={tintColor}/>
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: '#84E1BF',
    inactiveTintColor: 'white',
    labelStyle: {
      fontSize: 12
    },
    style: {
      backgroundColor: '#283940'
    },
    showLabel: false
  }
});

The Charities tab extends outside the tabbar because the tabBarIcon is wrapped in a View component with a height greater than that of the tabbar. The circular shape is then made with borderRadius:100.

There may be an better way to do this, but this was pretty straighforward.

TabBar Image

Community
  • 1
  • 1
AMarieA
  • 39
  • 2