react native footer icon - react-native

Question

I like the same style as IOS in android. You can see the in IOS the Icon in the middle is nice, but in android it isn't
The code I use is this one
<Footer style={{ backgroundColor: "#FFFFFF" }}>
<FooterTab style={{ backgroundColor: "#FFFFFF" }}>
<Button onPress={() => { Actions.Startpage();}}>
<Icon name="search" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Ontdekken</Text>
</Button>
<Button onPress={() => { Actions.ThemasPage();}}>
<Icon name="id-card" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Thema's</Text>
</Button>
<Button style={{marginBottom:20, borderRadius:50, height: 90, backgroundColor: '#FFFFFF', overflow: 'visible'}} onPress={() => { Actions.EventPage();}}>
<Icon name="calendar-plus-o" size={50} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Evenementen</Text>
</Button>
<Button onPress={() => { Actions.Wildpage();}}>
<Icon name="binoculars" size={30} color="#e50040" />
<Text style={styles.smalltext} numberOfLines={1}>100% Wild</Text>
</Button>
<Button onPress={() => { Actions.MenuPage();}}>
<Icon name="bars" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Menu</Text>
</Button>
</FooterTab>
</Footer>

Answer 1

This is because the button is bigger than the container.
In iOS it will be visible but on android the container will crop any inner element that overflow.
What you can do is to change the height on Footer to be equal to that middle button, and make sure that the other buttons are smaller in height to give you the same effect without any overflow outside parent Component.
And for the gray line you can add a view with height of 1 and full width