Install in Expo project | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
3.4.x
Search
⌘
K
Hire us
Nativebase logo
NativeBase
Introduction
Getting Started
Installation
Setup NativeBase Provider
Resources
Contribution
Core Concepts
Utility First
Design Tokens
Pseudo Props
Responsive
Features
Utility Props
Color mode (Dark Mode)
NativeBase Factory
SafeAreaView Props
Accessibility
Theme
Default Theme
Customizing Theme
Customizing Fonts
Customizing Components
Making components dark mode compatible
Breakpoints
Using Theme
Layout
Box
Center
Container
Flex
HStack / Row
Stack
VStack / Column
ZStack
Forms
Button
Pressable
Checkbox
FormControl
IconButton
Input
Link
Radio
Select
Slider
Switch
TextArea
Data Display
Badge
Divider
Feedback
Alert
Progress
Spinner
Toast
Typography
Text
Heading
Overlay
Alert Dialog
Menu
Modal
Popover
Tooltip
Disclosure
ActionSheet
Media and Icons
Avatar
Icon
Image
Transition
PresenceTransition
Slide
Stagger
Others
Fab
ReactNative Components
ScrollView
View
KeyboardAvoidingView
StatusBar
FlatList
SectionList
Hooks
useDisclose
useBreakpointValue
useClipboard
useMediaQuery
useTheme
useToken
useColorMode
useColorModeValue
useContrastText
useAccessibleColors
Examples
Todo-List
Kitchen Sink
Community Integration
React Hook Forms
Formik
Recipes
Designs
AppBar
Card
Drawer Navigation
Tab View
Swipe List
Forms
Form with Validation
Login/Signup Forms
SearchBar
Layout
App Drawer
Footer
Migration
Guide to v3
Components Migration
ActionSheet
Badge
Button
Card
Checkbox
DatePicker
DeckSwiper
Drawer
FABs
FooterTab
Form
Header
Icon
Layout
Picker
Radio Button
Searchbar
Segment
Spinner
SwipeList
Tabs
Thumbnail
Toast
Typography
More
Changelog
FAQ's
IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack instead.
Explore gluestack
Know More
Install in Expo project
Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration.
Create a new expo project
Copy
npm install --global expo-cli
expo init my-project
cd my-project/
Refer this link
for additional information on Expo and setting up an Expo starter app.
Install dependencies
yarn
npm
Copy
expo install react-native-svg@12.1.1
Copy
expo install react-native-safe-area-context@3.3.2
Run the Hello world example
Put the below code in your App.js
Copy
import React from "react";
import { NativeBaseProvider, Box } from "native-base";


function App() {
  return (
    <NativeBaseProvider>
      <Box>Hello world</Box>
    </NativeBaseProvider>
  );
}
Customize NativeBaseProvider
NativeBaseProvider provides theme throughout your application
Theme
Read more about the default NativeBase theme and how to override it
Utility props
Shorthands of commonly used styling props which maps with the provided theme
Previous
Installation
Next
Setup NativeBase Provider
Quick Nav
Create a new expo project
Install dependencies
Run the Hello world example
Nativebase logo
MadeWithNativeBase