Custom tab bar item will be covered in Android. But works in iOS.

[zhaiyjgithub]

Hi,

Thanks for the package.

Today, I try to use it to custom my tab bar.
It works in iOS, the tab bar item can be visible over the tabbar container.

But in the android, not worked. Could you give me some suggestions?
Thanks a lot.

[cmdominguez]

@zhaiyjgithub wow didn't try this approach, you could try making a view that contains your tab bar taller and transparent and play with https://wix.github.io/react-native-navigation/api/options-bottomTabs#drawbehind

[zhaiyjgithub]

@cmdominguez Thanks for your response.
Could you give me demo code about it.

I tried below but not working, the view(100px) only expand to the bottom:
`
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {Navigation} from 'react-native-navigation';

const CustomTabs = () => {
  const changeTab = (idxTab: number) => {
    console.log(idxTab);
    Navigation.mergeOptions('tabbar', {
      bottomTabs: {
        currentTabIndex: idxTab,
      },
    });
  };
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        height: 100,
        backgroundColor: 'transparent',
      }}>
      <TouchableOpacity onPress={() => changeTab(0)}>
        <Text style={{color: 'red', backgroundColor: '#ff00ff'}}>Tab 1</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => changeTab(0)}>
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'blue',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: -25,
          }}>
          <Text style={{color: 'red', backgroundColor: '#ff00ff'}}>Tab</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => changeTab(1)}>
        <Text>Tab 3</Text>
      </TouchableOpacity>
    </View>
  );
};

export default CustomTabs;

`

Thanks a lot.

[cmdominguez]

@zhaiyjgithub Thanks to your issue I detected that I was missing something in the documentation (I already updated it).
Basically you can add an xml overwriting the default height of RNN, I leave you the link on how to do it https://github.com/cmdominguez/react-native-custom-bottom-tabs#personalizaci%C3%B3n-de-la-altura-de-la-tab-bar

[zhaiyjgithub]

Thanks for your improvement. I will try it later. @cmdominguez