Top Tabs

Top Bar provides top navigation.

import { RadioGroup } from '../components'
<View>
<RadioGroup
items={items}
selectedIndex={tab1State}
onChange={index => setTab1State(index)}
underline
/>
<Text>{items[tab1State]}</Text>
</View>

Tabs also may contain icons, to provide a better user interfaces.

import { RadioGroup } from '../components'
<View>
<RadioGroup
items={[
<View
style={{
alignItems: 'center',
flexDirection: 'row',
color: 'inherit',
}}
>
<Text style={{ color: 'inherit' }}>One</Text>
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
</View>,
<View
style={{
alignItems: 'center',
flexDirection: 'row',
color: 'inherit',
}}
>
<Text>Two</Text>
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
</View>,
<View
style={{
alignItems: 'center',
flexDirection: 'row',
color: 'inherit',
}}
>
<Text>Three</Text>
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
</View>,
]}
selectedIndex={tab1State}
onChange={index => setTab1State(index)}
underline
/>
<Text>{items[tab1State]}</Text>
</View>