NativeBase Cheat Sheet

0.1. 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>

0.2. 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
<InputGroup> 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

results matching ""

    No results matching ""