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
<Accordion> Toggle the visibility of content across items of your screen -
  • dataArray
 Array of data chunks to render iteratively
  • expanded
 Index of accordion set open
  • headerStyle
 Style accordion header
  • contentStyle
 Style accordion content
  • icon
 Icon when accordion is closed
  • expandedIcon
 Icon when accordion is open
  • iconStyle
 Icon style when accordion is closed
  • expandedIconStyle
 Icon style when accordion is open
  • renderHeader
 Custom design of Accordion header
  • renderContent
 Custom design of Accordion content
<ActionSheet> Flexible and extensible content container React Native Modal
  • options
 List of button titles
  • cancelButtonIndex
 index of cancel button in 'options'
  • destructiveButtonIndex
 index of destructive button in 'options'
  • title
 a title to show above the ActionSheet
  • show()
 show ActionSheet
  • hide()
 hide ActionSheet
<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
  • contentContainerStyle
 lets the user style the Content component.
<DatePicker> Select a date from a time range React Native DatePickerIOS
  • defaultDate
 Sets default date in calendar
  • minimumDate
 Sets minimum date that can be set in calendar
  • maximumDate
 Sets maximum date that can be set in calender
  • androidMode
 can take either of values 'default','calendar','spinner'
  • animationType
 can take either of values 'fade','slide','none'
  • disabled
 Prevent user from making selection of date
  • iconStyle
 Icon style when accordion is closed
  • expandedIconStyle
 Icon style when accordion is open
  • renderHeader
 Custom design of Accordion header
  • renderContent
 Custom design of Accordion content
  • supportedOrientations
 allows the modal to be rotated to any of the specified orientations
<DeckSwiper> Swipes the card to left and right React Native <View>
  • dataSource
 Chunk of data(object)
  • renderEmpty
 Callback called when all cards are swiped & dataSource empty
  • renderItem
 Callback takes a chunk of data & returns a component
  • renderTop
 Callback takes a chunk of data & returns a top layer component
  • renderBottom
 Callback takes a chunk of data & returns a bottom layer component
  • looping
 Loop through the data
  • onSwipeRight
 Callback called when Card is swiped Right
  • onSwipeLeft
 Callback called when Card is swiped Left
<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
  • placeholderTextColor
 color of the Input placeholder
  • 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 in iOS
  • 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>
(Multiple Rows)		 Swipeable List are ListItems that swipe open and close
  • dataSource
 data chunks to render iteratively
  • renderRow
 Callback which takes a chunk of data from dataSource and returns as a body component, which is visible
  • renderLeftHiddenRow
 Callback which takes a chunk of data from dataSource and returns as a left component, which is hidden
  • renderRightHiddenRow
 Callback which takes a chunk of data from dataSource and returns as a right component, which is hidden
  • leftOpenValue
 TranslateX value for opening the row to the left (Positive Value)
  • rightOpenValue
 TranslateX value for opening the row to the right (Negative Value)
  • closeOnRowBeginSwipe
 Open row be closed as soon as a row begin to swipe open
  • swipeToOpenPercent
 Swipe percent of left/right component's width to trigger the row opening
  • disableLeftSwipe
 Disable ability to swipe the row left
  • disableRightSwipe
 Disable ability to swipe the row right
  • onRowOpen, onRowClose
 Callback function which triggers when a swipe row is animating open/close
  • onRowDidOpen, onRowDidClose
 Callback function which triggers when a swipe row has animated open/close
<Swipeable List>
(Single Row)		 Single Swipable ListItem (Outside List)
  • body
 Native Base or React Native component(Visible Component)
  • left
 Native Base or React Native component(Left hidden Component)
  • right
 Native Base or React Native component(Right hidden Component)
  • leftOpenValue
 TranslateX value for opening the row to the left (Positive Value)
  • rightOpenValue
 TranslateX value for opening the row to the right (Negative Value)
  • stopLeftSwipe
 TranslateX value to stop the row to the swipe left (Positive number)
  • stopRightSwipe
 TranslateX value to stop the row to the swipe right (Negative number)
  • swipeToOpenPercent
 Swipe percent of left/right component's width to trigger the row opening
  • disableLeftSwipe
 Disable ability to swipe the row left
  • disableRightSwipe
 Disable ability to swipe the row right
  • onRowOpen, onRowClose
 Callback function which triggers when a swipe row is animating open/close
  • openLeftRow, openRightRow
 Dynamically toggle SwipeRow
  • style
 Style body
<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
<Tab>,<TabHeading> Individual Tab react-native-scrollable-tab-view <ScrollableTabView>
  • heading(only for Tab)
 Label String, or Component
  • style(only for TabHeading)
 Style for TabHeading Component
  • tabStyle
 Style for tab bar
  • activeTabStyle
 Style for active tab bar
  • textStyle
 Style for text
  • activeTextStyle
 Style for active text
<ScrollableTab> Horizontal scrolling of tabs react-native-scrollable-tab-view <ScrollableTabView>
  • style
 Style for ScrollableTab
  • tabsContainerStyle
 Style for tabs within ScrollableTab
  • underlineStyle
 Style of the Scrollable Tab's underline
  • 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 ""