Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
Replacing Component: React Native <View>
| iOS | Android |
}}) |
}}) |
|---|
Syntax
import React, { Component } from 'react';
import { Container, Content, Footer, FooterTab, Button, Icon, Badge, Text } from 'native-base/ui';
export default class FooterTabsExample extends Component {
render() {
return (
<Container>
<Content />
<Footer>
<FooterTab>
<Button badgeValue={2}>
<Icon name='ios-apps-outline' />
<Text>Apps</Text>
</Button>
<Button>
<Icon name='ios-camera-outline' />
<Text>Camera</Text>
</Button>
<Button active>
<Icon name='ios-compass' />
<Text>Navigate</Text>
</Button>
<Button>
<Icon name='ios-contact-outline' />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}Configuration
| Property | Default | Option | Description |
|---|---|---|---|
| badgeValue | - | user-defined | Represents the value in badge. |
| badgeColor | - | primary | Background color for badge. |
| badgeValueStyle | - | - | Style for value in badge. |