# Top Tabs

Top Bar provides top navigation.

```jsx
 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.

```jsx
  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>
```