Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

Mobile first accessible
components for
React Native & Web.

An accessible & utility-first component library to build your design system for all the platforms (web in alpha).

Now Available for both Mobile & Web

Powered by React Native Web. Build consistent UIs across Web, Android and iOS with ease.

Out of the Box Accessibility

Powered by React Native ARIA.

React Native ARIA provides React hooks that enable you to build accessible design systems in no time.

Now Supporting Utility Props

Powered by Styled System so you can rapidly build custom UI components with constraint-based utility style props.

1
<Box rounded="pill" w={80} shadow={4}>
2
<Image
3
roundedTop="pill"
4
h={56}
5
source={require("./assets/fish.jpeg")}
6
alt="NativeBase Card"
7
/>
8
<Stack p={4} space={3}>
9
<Heading color="blueGray.600">Clownfish</Heading>
10
<Text color="blueGray.500">
11
Bright orange with three distinctive white bars, clown anemonefish are
12
among the most recognizable at all reef-dwellers.
13
</Text>
14
<HStack space={4}>
15
<Button variant="ghost" colorScheme="blue" p={0} minH={0}>
16
SHARE
17
</Button>
18
<Button variant="ghost" colorScheme="blue" p={0} minH={0}>
19
LEARN MORE
20
</Button>
21
</HStack>
22
</Stack>
23
</Box>
Kitchen Sink iOS

Highly themeable, the only limit is your imagination

Themeability is one of the core elements of NativeBase. Customise your app theme and component styles to your heart's content.

1
<Box rounded="pill" w={64} shadow={4}>
2
<Image
3
h={64}
4
rounded="pill"
5
source={require("./assets/forest.jpeg")}
6
alt="NativeBase Card"
7
/>
8
<Center position="absolute" height="100%" width="100%">
9
<Icon
10
type="AntDesign"
11
name="play"
12
color="gray.200"
13
size={12}
14
opacity={0.8}
15
/>
16
</Center>
17
<HStack
18
position="absolute"
19
bottom={4}
20
w={64}
21
px={4}
22
alignItems="center"
23
justifyContent="space-between"
24
>
25
<Stack>
26
<Heading color="gray.200" size="md">
27
Sacred Grove
28
</Heading>
29
<Text color="gray.200">Meghalaya</Text>
30
</Stack>
31
<Icon name="more-horizontal" type="Feather" color="white" />
32
</HStack>
33
</Box>
NativeBase Themeable

Responsiveness made easy

Instead of manually adding responsiveness, NativeBase V3 allows you to provide object and array values to add responsive styles.

1
<Box
2
flexDirection={{ base: 'column', md: 'row' }}
3
shadow={4}
4
rounded="xl"
5
overflow="hidden"
6
>
7
<Box width={{ md: 24 }} height={{ base: 32, md: '100%' }}>
8
<Image
9
source={{
10
uri:
11
'https://static.nike.com/a/images/f_auto/dpr_2.0/w_1328,c_limit/b56d1e9b-3861-4c89-995d-b8fb6240a762/nike-just-do-it.jpg'
12
}}
13
alt="Shoes"
14
/>
15
</Box>
16
<Stack p={3} space={2} minW={32}>
17
<Text fontSize="xs" color="red.400" fontWeight="semibold">
18
Just In
19
</Text>
20
<Stack space={1}>
21
<Heading size="sm">Jordan MA2</Heading>
22
<Text fontWeight="medium" color="blueGray.600">
23
Older Kids' Shoe
24
</Text>
25
<Text fontWeight="medium" color="blueGray.600">
26
2 colors
27
</Text>
28
</Stack>
29
<Text fontSize="md" fontWeight="semibold" color="blueGray.600">
30
$ 150
31
</Text>
32
</Stack>
33
</Box>
Kitchen Sink iOS

We are growing

38.2k

Downloads per week

14.8k

Github stars

196

Contributors

53.6k

Dependents

Watch our Talk

Join Sankhadeep Roy & Sanket Sahu from GeekyAnts as they discuss previous versions of NativeBase & the roadmap for NativeBase 3.0, all while building it live.

Join our Community

We have a lively community built on our shared love for React & React Native. Check out our recent blog posts and come join us!

Chat with us on Discord

Meet the Creators

NativeBase 3.0 has come to fruition only due to the amazing team that worked tirelessly on it. Here are our creators:

    theankurkediaMD-REHMANrayan1810intergalacticspacehighwayvidhi499himanshu-satijamakkarMeenuAjamuarsanketsahugauravguha

More from the Authors

Interested in other projects we've worked on? We're delighted! Learn more here:

We use our own and third-party cookies and other tracking technologies, by continuing to browse the website, you accept our use of cookies and tracking technologies.