NativeBase Cheat Sheet

Basic Layout

Component Description Replacing Component
<Container> Complete section of screen React Native <View>
<Header> Header or Navbar of screen React Native <View>
<Content> Body element of screen React Native <KeyboardAwareScrollView>

Components

Component Description Replacing Component
<Badge> Numerical indicators used to notify an element
React Native <View>
  • backgroundColor
background color for badge
  • color
text color for badge
  • fontSize
text font size for badge
  • width
dimension of badge
  • lineHeight
padding on top of badge text
<Button> Submit or reset a form, Navigate etc React Native <TouchableOpacity>
  • style
button style
  • textStyle
button text style
  • block
block level button
  • rounded
slightly round shaped edges
  • transparent
renders child element of button
  • small
small size button
  • large
large size button
  • iconLeft
aligns icon to the left in button
  • iconRight
aligns icon to the right in button
  • disabled
disables click option for button
<Card> Flexible and extensible content container React Native <View>
<CardItem> Child component of <Card> React Native <TouchableOpacity>
  • header
renders as header and footer for cards
  • cardBody
body section for card
  • note
sub caption for card header and footer
  • button
navigate on click of a card item
<CheckBox> Multiple selections from a set of choices React Native <TouchableOpacity>
  • checked
represents the state value of an item
<DeckSwiper> Swipes the card to left and right React Native <View>
<Fab> Provides special type of promoted action. React Native <Animated>
<FooterTab> Tabs at Footer which is horizontal region of buttons or links for navigation. React Native <View>
<Icon> High definition icons and pixel ideal fonts React Native Vector Icons <Icon>
  • name
name of icon
  • color
color for icon
  • fontSize
size of icon
<Item> Combines group of components for a textbox React Native <View>
  • borderType
wraps the textbox with predefined border options.
  • iconRight
icon in the input text box appears to the right.
  • success
border color of textbox for valid input.
  • error
border color of textbox for invalid input.
  • disabled
disables inputting data.
<Input> Component for inputting text React Native <TextInput>
  • placeholder
string that will be rendered before text input has been entered.
<Grid> Cellular structure composed of Rows and Cols React Native <View>
<Col> Column component for grid React Native <View>
<Row> Row component for grid React Native <View>
<List> Specifying lists of information React Native <View>
  • dataArray
array of data chunks to render iteratively.
  • renderRow
Callback which takes a chunk of data from dataArray and returns as a component.
<ListItem> Child component of <List> React Native <TouchableOpacity>
  • itemDivider
organize and group the list items
  • note
sub caption for List Item.
  • iconLeft
aligns icon to the left of ListeItem.
  • iconRight
aligns icon to the right of ListeItem.
  • button
navigate on click of a list item
<Picker> Native picker component React Native <Picker>
<Radio> Single selection from a set of choices React Native <TouchableOpacity>
  • selected
represents the state value of an item
Searchbar Includes search bar in the <Header> section React Native <View>
  • searchBar
wraps the search bar with predefined border options
<Spinner> Page loader React Native <ActivityIndicator>
  • color
color of Spinner.
<Tabs> Horizontal page swiper react-native-scrollable-tab-view <ScrollableTabView>
  • tabLabel
name for tabs
<Thumbnail> Showcase an image with variuos dimensions and shapes React Native <Image>
  • source
size of icon
  • square
shape of thumbnail
  • size
dimension of thumbnail
Typography Heading Tags React Native <Text>
  • H1
font-size: 27
  • H2
font-size: 24
  • H3
font-size: 21