Top Tabs

Search…
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>
​
Top Navigation
Bottom Tabs
Last modified 2yr ago
Copy link