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
<ActionSheet> Flexible and extensible content container React Native Modal
<Badge> Numerical indicators used to notify an element
React Native View
  • primary
blue background color
  • success
green background color
  • info
light blue background color
  • warning
yellow background color
  • danger
red background color
<Button> Submit or reset a form, Navigate etc React Native -
TouchableOpacity (iOS)
TouchableNativeFeedback (Android)
  • active
state of button
  • transparent
renders child element of button
  • bordered
outline button style
  • rounded
button with slightly round shaped edges
  • block
block level button
  • full
full width button
  • disabled
disables click option for 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
  • light
light white background color
  • primary
blue background color
  • success
green background color
  • info
light blue background color
  • warning
yellow background color
  • danger
red background color
<Card> Flexible and extensible content container React Native View
  • transparent
iOS - no card shadow
Android - no elevation
  • dataArray
array of data chunks to render iteratively
  • renderRow
Flag indicating whether empty section headers should be rendered
<CardItem> Child component of <Card> React Native TouchableOpacity / View
  • header
renders text as header for cards
  • cardBody
body section for card
  • footer
renders text as footer for cards
  • button
navigate on click of a card item
  • bordered
adds border to card item
<CheckBox> Multiple selections from a set of choices React Native TouchableOpacity
  • checked
represents the state value of an item
  • color
background color of checkbox
  • onPress
Handler to be called when checkbox is tapped
<Content> Renders as body element of your screen React Native KeyboardAwareScrollView
  • padder
applies margin at all sides to Content section
  • disableKBDismissScroll
disables automatic scroll on focus
  • enableResetScrollToCoords
lets the user enable or disable automatic resetScrollToCoords
<DeckSwiper> Swipes the card to left and right React Native <View>
<Fab> Provides special type of promoted action. React Native <Animated>
  • active
toggle status of FAB
  • direction
direction of buttons that popup on click of FAB
  • position
position of FAB on screen
  • containerStyle
padding options to render FAB
<FooterTab> Tabs at Footer which is horizontal region of buttons or links for navigation. React Native <View>
  • active
button prop, sets a footer button active
  • badge
button prop, set to true if using Badges.
  • vertical
button prop, vertically align footer elements.
<Form> Includes group of related input components React Native <View>
  • <Input>
component for inputting text React Native <TextInput>
  • <Item>
wrap around component with specific styles React Native <TouchableOpacity>
  • <Label>
component for displaying text React Native <Text>
  • fixedLabel
label is fixed to the left of the Input
  • floatingLabel
label that animates upwards/downwards when input is selected/erased
  • inlineLabel
label placed to the left of the input element
  • stackedLabel
places the label on top of input element which appears like a stack
  • bordered
includes border with the textbox
  • rounded
includes rounded border with the textbox
  • regular
includes rectangular border with the textbox
  • underline
includes underline border with the textbox
  • disabled
disables inputting data
  • placeholderLabel
renders the same way the TextInput does with the form styling of NativeBase
  • placeholder
string that will be rendered before text input has been entered
  • last
style the Form Item for the last Item of the Form
  • error
border color of textbox for invalid input
  • success
border color of textbox for valid input
<Header> Renders as Header for your screen React Native <View>
  • <Left>
components render to the left in Header
  • <Body>
components render at the centre in Header
  • <Right>
components render to the right in Header
  • iosBarStyle
set iOS barStyle
  • androidStatusBarColor
set background color for status bar in android
  • backgroundColor
set background color
  • noShadow
removes elevation from android
  • searchBar
add searchBar to header or not
  • rounded
make Header searchBar rounded
  • hasSubtitle
add subtitle to the Header component
  • hasSegment
add Segments to Header component
  • hasTabs
add Tabs to Header component
  • hasText
button prop, add padding to Left for Text Button (iOS)
  • noLeft
eliminates Left, moves Title to left (Android)
  • span
doubles the header sizet
<Icon> High definition icons and pixel ideal fonts React Native Vector Icons <Icon>
  • name
name of icon
  • ios
name of the icon for iOS devices
  • android
name of the icon for Android devices
  • active
renders filled icon
  • color
color for icon
  • fontSize
size of icon
  • type
Specify icon family
<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> - iOS
<TouchableNativeFeedback> - Android
  • button
navigate on click of a list item
  • selected
highlights the selected item
  • enableEmptySections
flag indicating whether empty section headers should be rendered
  • itemDivider
organize and group the list items
  • itemHeader
style the item as the header for the ListItes
  • first
adds style of first ListItem
  • last
adds style of last ListItem
  • icon
to have list styling of icons
  • avatar
style the list to have Avatars
  • thumbnail
style the list to have Thumbnails
  • noIndent
removes margin from left
<Picker> Native picker component React Native <Picker>
  • renderHeader
makes component that appears as header of the Picker
  • headerStyle
custom style to be given to Header
  • headerBackButtonText
custom text for the header back button
  • headerBackButtonTextStyle
custom text style for the header back button
  • headerTitleStyle
custom title style for the header title
  • iosIcon
icon with picker dropdown
  • iosHeader
custom text for the header title
  • textStyle
text style of header
  • itemStyle
style of items in the Picker
  • itemTextStyle
text style of item component in Picker
  • supportedOrientations
allows the modal to be rotated to any of the specified orientations
  • placeholder
default placeholder when no value is selected
  • placeholderStyle
Custom style for placeholder text in iOS
  • placeholderIconColor
Set placeholder icon color in iOS
<Radio> Single selection from a set of choices React Native <TouchableOpacity>
  • selected
represents the state value of an item
  • color
inactive radio color
  • selectedColor
active radio color
Searchbar Includes search bar in the <Header> section React Native <View>
  • rounded
wraps the search bar with predefined border options
<Segment> Best used as an alternative for tabs React Native <View>
<Spinner> Page loader React Native <ActivityIndicator>
  • color
color of Spinner.
<Swipeable List> ListItems that swipe open and close
<Tabs> Horizontal page swiper react-native-scrollable-tab-view <ScrollableTabView>
  • locked
disable swipe
  • initialPage
set default active tab
  • page
set selected tab
  • tabBarPosition
set position of Tabs
  • tabBarUnderlineStyle
style of the default tab bar's underline
  • onChangeTab
function to call when tab changes
  • onScroll
function to call when pages are sliding
<Thumbnail> Showcase an image with variuos dimensions and shapes React Native <Image>
  • source
size of icon
  • circle
shape of thumbnail (default)
  • square
shape of thumbnail
  • small
small thumbnail with width and height of 36px
  • large
large thumbnail with width and height of 80px
<Toast> Display quick warning or error messages React Native <View>
  • text
text content to be shown in the toast
  • textStyle
style text content for toast
  • buttonText
text to be displayed inside the button
  • buttonTextStyle
style button text for toast
  • buttonStyle
style button for toast
  • position
sets position for the Toast
  • type
sets context to the Toast
  • duration
milliseconds after which Toast disappers
  • onClose
called just before the toast hides
Typography Heading Tags React Native <Text>
  • H1
font-size: 27
  • H2
font-size: 24
  • H3
font-size: 21

results matching ""

    No results matching ""