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
  • first
 custom card border radius
  • last
 custom card border radius
<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
  • transparent
 No Border, shadow, elevation
<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 ""