CODEWITHSUNDEEP
react-nativestyles
Wouter
Wouter

Reputation: 437

react native footer icon

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

IOS

Android

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>

Upvotes: 0

Views: 1607

Answers (1)

Amr Labib
Amr Labib

Reputation: 4073

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

Upvotes: 2

Related Questions