React Native Starter
Search…
Top Tabs
Top Bar provides top navigation.
1
import { RadioGroup } from '../components'
2
3
<View>
4
<RadioGroup
5
items={items}
6
selectedIndex={tab1State}
7
onChange={index => setTab1State(index)}
8
underline
9
/>
10
<Text>{items[tab1State]}</Text>
11
</View>
Copied!
Tabs also may contain
icons, to provide a better user interfaces.1
import { RadioGroup } from '../components'
2
3
<View>
4
<RadioGroup
5
items={[
6
<View
7
style={{
8
alignItems: 'center',
9
flexDirection: 'row',
10
color: 'inherit',
11
}}
12
>
13
<Text style={{ color: 'inherit' }}>One</Text>
14
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
15
</View>,
16
<View
17
style={{
18
alignItems: 'center',
19
flexDirection: 'row',
20
color: 'inherit',
21
}}
22
>
23
<Text>Two</Text>
24
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
25
</View>,
26
<View
27
style={{
28
alignItems: 'center',
29
flexDirection: 'row',
30
color: 'inherit',
31
}}
32
>
33
<Text>Three</Text>
34
<Icon name={'staro'} size={20} style={{ marginLeft: 5 }} />
35
</View>,
36
]}
37
selectedIndex={tab1State}
38
onChange={index => setTab1State(index)}
39
underline
40
/>
41
<Text>{items[tab1State]}</Text>
42
</View>
Copied!
Last modified 1yr ago
Copy link