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)
  • style
 button style
  • 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
 callback that returns chunk of data as a component
<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>
<FooterTab> Tabs at Footer which is horizontal region of buttons or links for navigation. React Native <View>
<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
  • 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
<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
<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
  • 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
<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
  • placeholder
 default placeholder when no value is selected
  • iosHeader
 custom text for the header title
  • headerBackButtonText
 custom text for the header back button
  • textStyle
 text style of header
  • itemStyle
 style of items in the Picker
  • headerStyle
 style of header
  • itemTextStyle
 text style of item component in Picker
  • supportedOrientations
 allows the modal to be rotated to any of the specified orientations
  • headerBackButtonText
 used for custom backButton text
<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>
  • 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
  • tabBarPosition
 set position of Tabs
  • tabBarUnderlineStyle
 style of the default tab bar's underline
<Thumbnail> Showcase an image with variuos dimensions and shapes React Native <Image>
  • source
 size of icon
  • square
 shape of thumbnail
  • small
 small thumbnail with width and height of 40px
  • large
 large thumbnail with width and height of 80px
<Toast> Display quick warning or error messages React Native <Image>
  • text
 text content to be shown in the toast
  • buttonText
 text to be displayed inside the button
  • position
 sets position for the Toast
  • type
 sets context to the Toast
  • duration
 milliseconds after which Toast disappers
Typography Heading Tags React Native <Text>
  • H1
 font-size: 27
  • H2
 font-size: 24
  • H3
 font-size: 21

results matching ""

    No results matching ""