React Native Starter
Search…
2.0.0
Getting Started
Architecture
Testing
Internationalization
Adding Pages and Components
Components
Text
Icon
Card
List
Top Navigation
Top Tabs
Bottom Tabs
Menu
Button
Checkbox
Toggle
Input
Screens
Theming
Powered By
GitBook
Button
Buttons allow users to take actions, and make choices, with a single tap.
Default button size is
medium
and status color is
primary
.
1
import
{
Button
}
from
'../components'
2
3
<
Button
4
style
=
{
styles
.
demoButton
}
5
primary
6
caption
=
"
Button
"
7
onPress
=
{()
=>
{}}
8
/>
Copied!
Button can be disabled with
disabled
property.
1
import
{
Button
}
from
'../components'
2
3
<
Button
4
style
=
{
styles
.
demoButton
}
5
primary
6
disabled
7
caption
=
"
Button
"
8
onPress
=
{()
=>
{}}
9
/>
Copied!
Button can be styled with
rounded
,
bordered
properties.
1
import
{
Button
}
from
'../components'
2
3
<
Button
4
style
=
{
styles
.
demoButton
}
5
primary
6
rounded
7
caption
=
"
Button
"
8
onPress
=
{()
=>
{}}
9
/>
10
11
<
Button
12
style
=
{
styles
.
demoButton
}
13
primary
14
bordered
15
caption
=
"
Button
"
16
onPress
=
{()
=>
{}}
17
/>
18
19
<
Button
20
style
=
{
styles
.
demoButton
}
21
primary
22
rounded
23
bordered
24
caption
=
"
Button
"
25
onPress
=
{()
=>
{}}
26
/>
Copied!
Button can be used with icon.
1
import
{
Button
}
from
'../components'
2
3
<
Button
4
style
=
{
styles
.
demoButton
}
5
primary
6
rounded
7
icon
=
{
<
Icon
/>
}
8
caption
=
"
Button
"
9
onPress
=
{()
=>
{}}
10
/>
Copied!
Buttons can be resized by using
sm
,
md
,
lg
property.
1
import
{
Button
}
from
'../components'
2
3
<
Button
4
style
=
{
styles
.
demoButton
}
5
primary
6
sm
7
icon
=
{
<
Icon
/>
}
8
caption
=
"
Button
"
9
onPress
=
{()
=>
{}}
10
/>
11
12
<
Button
13
style
=
{
styles
.
demoButton
}
14
primary
15
icon
=
{
<
Icon
/>
}
16
caption
=
"
Button
"
17
onPress
=
{()
=>
{}}
18
/>
19
20
<
Button
21
style
=
{
styles
.
demoButton
}
22
primary
23
lg
24
icon
=
{
<
Icon
/>
}
25
caption
=
"
Button
"
26
onPress
=
{()
=>
{}}
27
/>
Copied!
You can specify background-color properties.
1
import
{
Button
}
from
'../components'
2
import
{
colors
}
from
'../../styles'
;
3
4
<
Button
5
style
=
{
styles
.
demoButton
}
6
bgColor
=
{
colors
.
green
}
7
icon
=
{
<
Icon
/>
}
8
caption
=
"
Button
"
9
onPress
=
{()
=>
{}}
10
/>
11
12
<
Button
13
style
=
{
styles
.
demoButton
}
14
primary
15
icon
=
{
<
Icon
/>
}
16
caption
=
"
Button
"
17
onPress
=
{()
=>
{}}
18
/>
19
20
<
Button
21
style
=
{
styles
.
demoButton
}
22
secondary
23
icon
=
{
<
Icon
/>
}
24
caption
=
"
Button
"
25
onPress
=
{()
=>
{}}
26
/>
Copied!
Previous
Menu
Next
Checkbox
Last modified
1yr ago
Copy link