Cross Platform React Native UI Toolkit

Get Started

If you are using Exponent, you can run npm i react-native-elements --save and skip to step 3.

Step 1

Install react-native-vector-icons (if you do not already have it)

npm i react-native-vector-icons --save && react-native link react-native-vector-icons

If you have any issues with icons not working or installation of React Native Vector Icons, check out their installation guide here

Step 2

Install React Native Elements

npm i react-native-elements --save

or

yarn add react-native-elements

Step 3

Start using components

import {
  Button
} from 'react-native-elements'

<Button
  raised
  icon={{name: 'cached'}}
  title='RAISED WITH ICON' />

Included

• [x] Buttons
• [x] Social Icons / Buttons
• [x] Icons
• [x] Side Menu
• [x] Form Elements
• [x] Search Bar
• [x] ButtonGroup
• [x] Checkboxes
• [x] List Element
• [x] Linked List Element
• [x] Tab Bar Component
• [x] HTML style headings (h1, h2, etc...)
• [x] Card component
• [x] Pricing Component
• [x] Grid Component
• [x] Slider Component
• [x] Tile Component

Roadmap

• [ ] Add radio buttons
• [ ] Searchable Drop Down similar to Bootstrap-3-Typehead
• [ ] Swipeable List Item component
• [ ] Add icons to TextInputs
• [ ] Profile Component in progress
• [ ] Custom Picker
• [ ] Something you's like to see? Submit an issue or a pull request

Examples

Check out the pre built and configured React Native Hackathon Starter Project which uses all of these elements.

Notes

Fonts

React Native Elements uses the System font as the default font family for iOS and Roboto as the default font family for Android.

In the example screenshots, we are using Lato which can be downloaded here.

We are working on a way to make a custom font family configurable through the command line.

Here is a list of fonts available out of the box for each platform, or you can install and use a custom font of your own.

To override the fontFamily in any element, simply provide a fontFamily prop:

<Button
  raised
  icon={{name: 'cached'}}
  title='RAISED WITH ICON'
  fontFamily='Comic Sans MS' />

API

Buttons

Buttons take a title and an optional material icon name, as well as the props below.

You can override Material icons with one of the following: material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop.

import { Button } from 'react-native-elements'

<Button
  title='BUTTON' />

<Button
  raised
  icon={{name: 'cached'}}
  title='BUTTON WITH ICON' />

<Button
  large
  iconRight
  icon={{name: 'code'}}
  title='LARGE WITH RIGHT ICON' />

<Button
  large
  icon={{name: 'envira', type: 'font-awesome'}}
  title='LARGE WITH RIGHT ICON' />

<Button
  large
  icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
  title='OCTICON' />

Button props

Also recevies all TouchableWithoutFeedback props

| prop | default | type | description | | ---- | ---- | ----| ---- | | Component | TouchableHighlight (iOS), TouchableNativeFeedback (android) | React Native Component | Specify other component such as TouchableOpacity or other (optional) | | buttonStyle | none | object (style) | add additional styling for button component (optional) | | title | none | string | button title (required) | | large | false | boolean | makes button large | | fontFamily | System font (iOS), Roboto (android) | string | specify different font family | | fontWeight | none | string | specify font weight for title (optional) | | iconRight | false | boolean | moves icon to right of title | | onPress | none | function | onPress method (required) | | onLongPress | none | function | onLongPress method (optional) | | icon | {color: 'white'} | object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | icon configuration (optional) | | backgroundColor | #397af8 | string (color) | background color of button (optional) | | borderRadius | none | number | adds border radius to card (optional) | | color | white | string(color) | font color (optional) | | textStyle | none | object (style) | text styling (optional) | | fontSize | 18 | number | font size (optional) | | underlayColor | transparent | string(color) | underlay color for button press (optional) | | raised | false | boolean | flag to add raised button styling (optional) | | disabled | false | boolean | prop to indicate button is disabled (optional) | | disabledStyle | none | object (style) | disabled button styling (optional) |

Social Icons & Buttons

import { SocialIcon } from 'react-native-elements'

// Icon
<SocialIcon
  type='twitter'
/>

<SocialIcon
  raised={false}
  type='gitlab'
/>

<SocialIcon
  light
  type='medium'
/>

<SocialIcon
  light
  raised={false}
  type='medium'
/>


// Button
<SocialIcon
  title='Sign In With Facebook'
  button
  type='facebook'
/>

<SocialIcon
  title='Some Twitter Message'
  button
  type='twitter'
/>

<SocialIcon
  button
  type='medium'
/>


<SocialIcon
  button
  light
  type='instagram'
/>

SocialIcon props

| prop | default | type | description | | ---- | ---- | ----| ---- | | title | none | string | title if made into a button (optional) | | type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon, github, github-alt, twitch, medium, soundcloud, gitlab, angellist, codepen) | social media type (required) | | raised | true | boolean | raised adds a drop shadow, set to false to remove | | button | false | boolean | creates button (optional) | | onPress | none | function | onPress method (optional) | | onLongPress | none | function | onLongPress method (optional) | | light | false | boolean | reverses icon color scheme, setting background to white and icon to primary color | | iconStyle | none | object (style) | extra styling for icon component (optional) | | style | none | object (style) | button styling (optional) | | iconColor | white | string | icon color (optional) | | iconSize | 24 | number | icon size (optional) | | component | TouchableHighlight | React Native Component | type of button (optional) | | fontFamily | System font bold (iOS), Roboto-Black (android) | string | specify different font family (optional) | | fontWeight | bold (ios), black(android) | string | specify font weight of title if set as a button with a title | | fontStyle | none | object (style) | specify text styling (optional) | | disabled | false | boolean | disable button (optional) | | loading | false | boolean | shows loading indicator (optional) |

Icons & Icon Buttons

Icons take the name of a material icon as a prop.

You can override Material icons with one of the following: material-community, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, zocial, or entypo by providing a type prop.

Hint: use reverse to make your icon look like a button

import { Icon } from 'react-native-elements'

<Icon
  name='rowing' />

<Icon
  name='g-translate'
  color='#00aced' />

<Icon
  name='sc-telegram'
  type='evilicon'
  color='#517fa4'
/>

<Icon
  reverse
  name='ios-american-football'
  type='ionicon'
  color='#517fa4'
/>

<Icon
  raised
  name='heartbeat'
  type='font-awesome'
  color='#f50'
  onPress={() => console.log('hello')} />

Icon props

| prop | default | type | description | | ---- | ---- | ----| ---- | | name | none | string | name of icon (required) | | type | material | string | type (defaults to material, options are material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, or entypo) | | size | 26 | number | size of icon (optional) | | color | black | string | color of icon (optional) | | iconStyle | inherited style | object (style) | additional styling to icon (optional) | | component | View if no onPress method is defined, TouchableHighlight if onPress method is defined | React Native component | update React Native Component (optional) | | onPress | none | function | onPress method for button (optional) | | onLongPress | none | function | onLongPress method for button (optional) | | underlayColor | icon color | string | underlayColor for press event | | reverse | false | boolean | reverses color scheme (optional) | | raised | false | boolean | adds box shadow to button (optional) | | containerStyle | inherited styling | object (style) | add styling to container holding icon (optional) | | reverseColor | white | string | specify reverse icon color (optional) |

Lists

Using Map Function. Implemented with avatar.

import { List, ListItem } from 'react-native-elements'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

<List containerStyle={{marginBottom: 20}}>
  {
    list.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={{uri:l.avatar_url}}
        key={i}
        title={l.name}
      />
    ))
  }
</List>

Using Map Function. Implemented with link and icon.

import { List, ListItem } from 'react-native-elements'

const list = [
  {
    title: 'Appointments',
    icon: 'av-timer'
  },
  {
    title: 'Trips',
    icon: 'flight-takeoff'
  },
  ... // more items
]

<List>
  {
    list.map((item, i) => (
      <ListItem
        key={i}
        title={item.title}
        leftIcon={{name: item.icon}}
      />
    ))
  }
</List>

Using RN ListView. Implemented with link and avatar.

import { List, ListItem } from 'react-native-elements'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

renderRow (rowData, sectionID) {
  return (
    <ListItem
      roundAvatar
      key={sectionID}
      title={rowData.name}
      subtitle={rowData.subtitle}
      avatar={{uri:rowData.avatar_url}}
    />
  )
}

render () {
  return (
    <List>
      <ListView
        renderRow={this.renderRow}
        dataSource={this.state.dataSource}
      />
    </List>
  )
}

ListItem implemented with custom View for Subtitle

import { List, ListItem } from 'react-native-elements'

render () {
  return (
    <List>
      <ListItem
        roundAvatar
        title='Limited supply! Its like digital gold!'
        subtitle={
          <View style={styles.subtitleView}>
            <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
            <Text style={styles.ratingText}>5 months ago</Text>
          </View>
        }
        avatar={require('../images/avatar1.jpg')}
      />
    </List>
  )
}

styles = StyleSheet.create({
  subtitleView: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingTop: 5
  },
  ratingImage: {
    height: 19.21,
    width: 100
  },
  ratingText: {
    paddingLeft: 10,
    color: 'grey'
  }
})

List Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9 | object (style) | style the list container |

ListItem props

| prop | default | type | description | | ---- | ---- | ----| ---- | | avatar | none | object| left avatar (optional). Refer to React Native Image Source | | avatarStyle | none | object (style) | avatar styling (optional) | | chevronColor | #bdc6cf | string | set chevron color | | component | View or TouchableHighlight if onPress method is added as prop | React Native element | replace element with custom element (optional) | | containerStyle | none | object (style) | additional main container styling (optional) | | hideChevron | false | boolean | set if you do not want a chevron (optional) | | leftIcon | none | object {name, color, style, type} (type defaults to material icons) | icon configuration for left icon (optional) | | rightIcon | {name: 'chevron-right'} | object {name, color, style, type} (type defaults to material icons) | icon configuration for right icon (optional). Shows up unless hideChevron or rightTitle is set | | onPress | none | function | onPress method for link (optional) | | onLongPress | none | function | onLongPress method for link (optional) | | roundAvatar | false | boolean | make left avatar round | | subtitle | none | string or object | subtitle text or custom view (optional) | | subtitleContainerStyle | none | style (object) | provide styling for subtitle container | | subtitleStyle | none | object (style) | additional subtitle styling (optional ) | | title | none | string or object | main title for list item, can be text or custom view (required) | | titleStyle | none | object (style) | additional title styling (optional) | | titleContainerStyle | none | style (object) | provide styling for title container | | wrapperStyle | none | object (style) | additional wrapper styling (optional) | | underlayColor | white | string | define underlay color for TouchableHighlight (optional) | | fontFamily | HelevticaNeue (iOS), Roboto (android) | string | specify different font family | | rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button, will override any icon on the right | | rightTitleContainerStyle | flex: 1, alignItems: 'flex-end', justifyContent: 'center' | object (style) | style the outer container of the rightTitle text | | rightTitleStyle | marginRight: 5, color: '#bdc6cf' | object (style) | style the text of the rightTitle text | | label | none | react native component | add a label with your own styling by providing a label={} prop to ListItem |

Badges

You can now easily add a badge to your List Item

| prop | default | type | description | | ---- | ---- | ----| ---- | | badge | none | object, accepts the following properties: value (string), badgeContainerStyle (object), badgeTextStyle (object). You can override the default badge by providing your own component with it's own styling by providing badge={{ element: }} | add a badge to the ListItem by using this prop |

Example badge usage

<ListItem
  ...
  badge={{ value: 3, badgeTextStyle: { color: 'orange' }, badgeContainerStyle: { marginTop: -20 } }}
/>

<ListItem
  ...
  badge={{ element: <MyCustomElement> }}
/>

SideMenu

This component implements react-native-side-menu which is part of the react-native-community.

import { SideMenu, List, ListItem } from 'react-native-elements'

constructor () {
  super()
  this.state = {
    isOpen: false
  }
  this.toggleSideMenu = this.toggleSideMenu.bind(this)
}

toggleSideMenu () {
  this.setState({
    isOpen: !this.state.isOpen
  })
}

render () {
  const MenuComponent = (
    <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
      <List containerStyle={{marginBottom: 20}}>
      {
        list.map((l, i) => (
          <ListItem
            roundAvatar
            onPress={() => console.log('Pressed')}
            avatar={l.avatar_url}
            key={i}
            title={l.name}
            subtitle={l.subtitle}
          />
        ))
      }
      </List>
    </View>
  )

  return (
    <SideMenu
      isOpen={this.state.isOpen}
      menu={MenuComponent}>
      <App toggleSideMenu={this.toggleSideMenu.bind(this)} />
    </SideMenu>
  )
}

SideMenu props

| prop | default | type | description | | ---- | ---- | ----| ---- | | menu | inherited | React.Component | Menu component | | isOpen |false | Boolean | Props driven control over menu open state | | openMenuOffset | 2/3 of device screen width | Number | Content view left margin if menu is opened | | hiddenMenuOffset | none | Number | Content view left margin if menu is hidden | | edgeHitWidth | none | Number | Edge distance on content view to open side menu, defaults to 60 | | toleranceX | none | Number | X axis tolerance | | toleranceY | none | Number | Y axis tolerance | | disableGestures | false | Bool | Disable whether the menu can be opened with gestures or not | | onStartShould SetResponderCapture | none | Function | Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details | | onChange | none | Function | Callback on menu open/close. Is passed isOpen as an argument | | onMove | none | Function | Callback on menu move. Is passed left as an argument | | menuPosition | left | String | either 'left' or 'right' | | animationFunction | none | (Function -> Object) | Function that accept 2 arguments (prop, value) and return an object: - prop you should use at the place you specify parameter to animate - value you should use to specify the final value of prop | | animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object: - value you should use at the place you need current value of animated parameter (left offset of content view) | | bounceBackOnOverdraw | true | boolean | when true, content view will bounce back to openMenuOffset when dragged further |

For issues or feature requests related to SideMenu component please click here

Search Bar

import { SearchBar } from 'react-native-elements'

<SearchBar
  onChangeText={someMethod}
  placeholder='Type Here...' />

<SearchBar
  noIcon
  onChangeText={someMethod}
  placeholder='Type Here...' />

<SearchBar
  round
  onChangeText={someMethod}
  placeholder='Type Here...' />

<SearchBar
  lightTheme
  onChangeText={someMethod}
  placeholder='Type Here...' />

SearchBar props

This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:

| prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | inherited styling | object (style) | style the container of the TextInput | | inputStyle | inherited styling | object (style) | style the TextInput | | icon | { color: '#86939e', name: 'search' } | object {name (string), color (string), style (object)} | specify color, styling, or another Material Icon Name | | noIcon | false | boolean | remove icon from textinput | | lightTheme | false | boolean | change theme to light theme | | round | false | boolean | change TextInput styling to rounded corners | | containerRef | none | ref | ref for TextInput conainer | | textInputRef | none | ref | ref for TextInput | | focus | none | function | call focus on the textinput(optional), eg this.refs.someInputRef.focus() | | underlineColorAndroid | transparent | string (color) | specify other than the default transparent underline color | | loadingIcon | { color: '#86939e' } | object {color (string), style (object)} | specify color, styling of the loading ActivityIndicator effect | | showLoadingIcon | false | boolean | show the loading ActivityIndicator effect | | placeholder | '' | string | set the placeholder text | | placeholderTextColor | '#86939e' | string | set the color of the placeholder text | | onChangeText | none | function | method to fire when text is changed |

Tab Bar Component

This component implements the react-native-tab-navigator from Exponent. Check out Exponent if you haven't already!

import { Tabs, Tab, Icon } from 'react-native-elements'

constructor() {
  super()
  this.state = {
    selectedTab: 'profile',
  }
}

changeTab (selectedTab) {
  this.setState({selectedTab})
}

const { selectedTab } = this.state

<Tabs>
  <Tab
    titleStyle={{fontWeight: 'bold', fontSize: 10}}
    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
    selected={selectedTab === 'feed'}
    title={selectedTab === 'feed' ? 'FEED' : null}
    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
    renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
    onPress={() => this.changeTab('feed')}>
    <Feed />
  </Tab>
  <Tab
    titleStyle={{fontWeight: 'bold', fontSize: 10}}
    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
    selected={selectedTab === 'profile'}
    title={selectedTab === 'profile' ? 'PROFILE' : null}
    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
    renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
    onPress={() => this.changeTab('profile')}>
    <Profile />
  </Tab>
  /* ... more tabs here */
</Tabs>

Hide Tab Bar

constructor () {
  super()
  this.state = {
    hideTabBar: true,
  }
}

hideTabBar(value) {
  this.setState({
    hideTabBar: value
  });
}

let tabBarStyle = {};
let sceneStyle = {};
if (this.state.hideTabBar) {
  tabBarStyle.height = 0;
  tabBarStyle.overflow = 'hidden';
  sceneStyle.paddingBottom = 0;
}

<Tabs hidesTabTouch tabBarStyle={tabBarStyle} sceneStyle={sceneStyle}>
  <Tab>
    <LoginView hideTabBar={this.hideTabBar.bind(this)} />
  </Tab>
  /* ... tabs here */
</Tabs>

Tabs Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | sceneStyle | inherited | object (style) | define for rendered scene | | tabBarStyle | inherited | object (style) | define style for TabBar | | tabBarShadowStyle | inherited | object (style) | define shadow style for tabBar | | hidesTabTouch | false | boolean | disable onPress opacity for Tab |

Tab Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | renderIcon | none | function | returns Item icon | | renderSelectedIcon | none | function | returns selected Item icon | | badgeText | none | string or number | text for Item badge | | renderBadge | none | function | returns Item badge | | title | none | string | Item title | | titleStyle | inherited | style | styling for Item title | | selectedTitleStyle | none | style | styling for selected Item title | | tabStyle | inherited | style | styling for tab | | selected | none | boolean | return whether the item is selected | | onPress | none | function | onPress method for Item | | allowFontScaling | false | boolean | allow font scaling for title |

For issues or feature requests related to Tab Bar component please click here

HTML Style Headings

<Text h1>Heading 1</Text>
<Text h2>Heading 2</Text>
<Text h3>Heading 3</Text>
<Text h4>Heading 4</Text>

Headings Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | h1 | none | boolean | font size 40 (optional) | | h2 | none | boolean | font size 34 (optional) | | h3 | none | boolean | font size 28 (optional) | | h4 | none | boolean | font size 22 (optional) | | fontFamily | none | string | font family name (optional) | | style | none | object (style) | add additional styling for Text (optional) |

ButtonGroup

Using strings

constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

render () {
  const buttons = ['Hello', 'World', 'Buttons']
  const { selectedIndex } = this.state
  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 100}} />
  )
}

Using components

constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

const component1 = () => <Text>Hello</Text>
const component2 = () => <Text>World</Text>
const component3 = () => <Text>ButtonGroup</Text>

render () {
  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
  const { selectedIndex } = this.state
  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 100}} />
  )
}

ButtonGroup props

This component inherits all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements, along with the following:

| prop | default | type | description | | ---- | ---- | ----| ---- | | selectedIndex | none | number | current selected index of array of buttons (required) | | onPress | none | function | method to update Button Group Index (required) | | buttons | none | array | array of buttons for component (required), if returning a component, must be an object with { element: componentName } | | component | TouchableHighlight | React Native Component | Choose other button component such as TouchableOpacity (optional) | | containerStyle | inherited styling | object (style) | specify styling for main button container (optional) | | selectedBackgroundColor | white | string | specify color for selected state of button (optional) | | textStyle | inherited styling | object (style) | specify specific styling for text (optional) | | selectedTextStyle | inherited styling | object (style) | specify specific styling for text in the selected state (optional)| | underlayColor | white | string | specify underlayColor for TouchableHighlight (optional) | | borderStyle | inherited styling | object (style) | update the styling of the interior border of the list of buttons (optional) |

Checkboxes

import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checkedIcon='dot-circle-o'
  uncheckedIcon='circle-o'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here to Remove This Item'
  iconRight
  iconType='material'
  checkedIcon='clear'
  uncheckedIcon='add'
  checkedColor='red'
  checked={this.state.checked}
/>

Checkbox props

This component uses FontAwesome icons out of the box. You can also specify one of the following types of icons by specifying an iconType prop: Simple Line Icon, Zocial, Octicons, MaterialIcons, MaterialCommunityIcons, Ionicons, Foundation, EvilIcons, or Entypo

| prop | default | type | description | | ---- | ---- | ----| ---- | | iconType | fontawesome | string | icon family, can be one of the following: simple-line-icon, zocial, octicon, material, material-community, ionicon, foundation, evilicon, entypo (required only if specifying an icon that is not from font-awesome) | | component | TouchableOpacity | React Native Component | specify React Native component for main button (optional) | | checked | false | boolean | flag for checking the icon (required) | | iconRight | false | boolean | moves icon to right of text (optional) | | right | false | boolean | aligns checkbox to right (optional) | | center | false | boolean | aligns checkbox to center (optional) | | title | none | string | title of checkbox (required) | | containerStyle | none | object (style) | style of main container (optional) | | textStyle | none | object (style) | style of text (optional) | | onLongPress | none | function | onLongPress function for checkbox (optional) | | onPress | none | function | onPress function for checkbox (required) | | checkedIcon | check-square-o | string | default checked icon (Font Awesome Icon) (optional) | | uncheckedIcon | square-o | string | default checked icon (Font Awesome Icon) (optional) | | checkedColor | green | string | default checked color (optional) | | uncheckedColor | #bfbfbf | string | default unchecked color (optional) | | checkedTitle | none | string | specify a custom checked message (optional) | | fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |

Forms

import { FormLabel, FormInput } from 'react-native-elements'

<FormLabel>Name</FormLabel>
<FormInput onChangeText={someFunction}/>
<FormValidationMessage>Error message</FormValidationMessage>

FormValidationMessage example

FormInput props

This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:

| prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | none | object (style) | TextInput container styling (optional) | | inputStyle | none | object (style) | TextInput styling (optional) | | textInputRef | none | ref | get ref of TextInput | | containerRef | none | ref | get ref of TextInput container | | focus | none | function | call focus on the textinput(optional), eg this.refs.someInputRef.focus() |

FormLabel props

| prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | none | object (style) | additional label container style (optional) | | labelStyle | none | object (style) | additional label styling (optional) | | fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |

FormValidationMessage props

| prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | none | object (style) | additional label container style (optional) | | labelStyle | none | object (style) | additional label styling (optional) | | fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |

Using FormInput refs

<FormInput
  ref='forminput'
  textInputRef='email'
  ...
/>

You should be able to access the refs like this

this.refs.forminput.refs.email

Card

const users = [
 {
    name: 'brynn',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
 },
 ... // more users here
]

import { Text } from 'react-native'
import { Card, ListItem, Button } from 'react-native-elements'

// implemented without image with header
<Card
  title='CARD WITH DIVIDER'>
  {
    users.map((u, i) => {}
  }
</Card>

// implemented without image without header, using ListItem component
 <Card containerStyle={{padding: 0}} >
  {
    users.map((u, i) => {
      return (
        <ListItem
          key={i}
          roundAvatar
          title={u.name}
          avatar={{uri:u.avatar}} />

      )
    })
  }
</Card>


// implemented with Text and Button as children
<Card
  title='HELLO WORLD'
  image={require('../images/pic2.jpg')}>
  <Text style={{marginBottom: 10}}>
    The idea with React Native Elements is more about component structure than actual design.
  </Text>
  <Button
    icon={{name: 'code'}}
    backgroundColor='#03A9F4'
    fontFamily='Lato'
    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
    title='VIEW NOW' />
</Card>

Card props

| prop | default | type | description | | ---- | ---- | ----| ---- | | flexDirection | column | string | flex direction (row or column) (optional) | | containerStyle | none | object (style) | outer container style (optional) | | wrapperStyle | none | object (style) | inner container style (optional) | | title | none | string | optional card title (optional) | | titleStyle | none | object (style) | additional title styling (if title provided) (optional) | | dividerStyle | none | object (style) | additional divider styling (if title provided) (optional) | | fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family | | imageStyle | inherited styling | object(style) | specify image styling if image is provided | | image | none | image uri or require path | add an image as the heading with the image prop (optional) |

Pricing Component

import { PricingCard } from 'react-native-elements'

<PricingCard
  color='#4f9deb'
  title='Free'
  price='$0'
  info={['1 User', 'Basic Support', 'All Core Features']}
  button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
/>

PricingCard props

| prop | default | type | description | | ---- | ---- | ----| ---- | | title | none | string | title (required) | | price | none | string | price (required) | | color | none | string | color scheme for button & title (required) | | info | none | array of strings | pricing information (optional) | | button | none | object {title, icon, buttonStyle} | button information (required) | | onButtonPress | none | any | function to be run when button is pressed | | containerStyle | inherited styling | object (style) | outer component styling (optional) | | wrapperStyle | inherited styling | object (style) | inner wrapper component styling (optional) | | titleFont | System font (font weight 800) (iOS), Roboto-Black (android) | string | specify title font family | | pricingFont | System font (font weight 700) (iOS), Roboto-Bold (android) | string | specify pricing font family | | infoFont | System font bold (iOS), Roboto-Bold (android) | string | specify pricing information font family | | buttonFont | System font (iOS), Roboto (android) | string | specify button font family |

Grid Component

The Grid component provides two types of layouts, Row and Column. This provides you with an easy way to position your elements on screen without using flex directly.

This component was inspired from react-native-easy-grid by GeekyAnts. Check out NativeBase.io if you haven't already!

Row

import {Grid, Row} from 'react-native-elements';

<Grid>
  <Row></Row>
  <Row></Row>
</Grid>

Column

import {Grid, Col} from 'react-native-elements';

<Grid>
  <Col></Col>
  <Col></Col>
</Grid>

Creating nested layout

import {Grid, Col, Row} from 'react-native-elements';

<Grid>
  <Col></Col>
  <Col>
    <Row></Row>
    <Row></Row>
  </Col>
</Grid>

Using the size prop

A ratio can be passed to the Size Prop

<Grid>
  <Row size={3}></Row>
  <Row size={1}></Row>
</Grid>

<Grid>
  <Col size={75}></Col>
  <Col size={25}></Col>
</Grid>

GridComponent Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | style | none | object (style) | Outer grid styling (optional) | | onPress | none | function | onPress method (optional) | | activeOpacity | 1 | number | Opacity on pressing (optional) |

ColComponent Props

| props | default | type | description | | ---- | ---- | ---- | ---- | | style | none | object (style) | Styling for the outer column (optional) | | size | none | number | Size for column (optional) | | onPress | none | function | onPress method (optional) | | activeOpacity | 1 | number | Opacity on pressing (optional) |

RowComponent Props

| props | default | type | description | | ---- | ---- | ---- | ---- | | style | none | object (style) | Styling for the outer column (optional) | | size | none | number | Size for row (optional) | | onPress | none | function | onPress method (optional) | | activeOpacity | 1 | number | Opacity on pressing (optional) |

Slider Component

A pure JavaScript component for react-native. It is a drop-in replacement for Slider.

This component is a forked implementation of react-native-slider. Also note that due to the nature of the platform, and the existence of breaking changes between React Native releases, this implementation currently only supports v0.26.0+

import { Slider } from 'react-native-elements'

<View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
  <Slider
    value={this.state.value}
    onValueChange={(value) => this.setState({value})} />
  <Text>Value: {this.state.value}</Text>
</View>

Slider Props

prop | type | optional | default | description --------------------- | -------- | -------- | ------------------------- | ----------- value | number | Yes | 0 | Initial value of the slider disabled | bool | Yes | false | If true the user won't be able to move the slider minimumValue | number | Yes | 0 | Initial minimum value of the slider maximumValue | number | Yes | 1 | Initial maximum value of the slider step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue) minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button thumbTintColor | string | Yes | '#343434' | The color used for the thumb thumbTouchSize | object | Yes | {width: 40, height: 40} | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily. onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed) onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released) style | style | Yes | | The style applied to the slider container trackStyle | style | Yes | | The style applied to the track thumbStyle | style | Yes | | The style applied to the thumb debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green. animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties. animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the Animated library.

Tile Component

A component with full size image and with text either inside the image or under the image along with customizable caption

This component was inspired from Shoutem UI by Shoutem. Check out Shoutem if you haven't already!

Featured Tile

<Tile
   imageSrc={{require: ('./img/path')}}
   title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem"
   featured
   caption="Some Caption Text"
/>

Featured Tile with Icon

<Tile
  imageSrc={{require: ('./img/path')}}
  icon={{name: 'play-circle', type: 'font-awesome'}}
  featured
/>

Tile with Icon

<Tile
  imageSrc={{require: ('./img/path')}}
  title="Lorem ipsum dolor sit amet, consectetur"
  icon={{name: 'play-circle', type: 'font-awesome'}}  // optional
  contentContainerStyle={{height: 70}}
>
  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
    <Text>Caption</Text>
    <Text>Caption</Text>
  </View>
</Tile>

Tile Props

| prop | default | type | description | | ---- | ---- | ----| ---- | | icon | none | object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), iconStyle: object(style)} | Icon Component Props (optional) | | iconContainerStyle | none | object (style) | Styling for the outer icon container (optional) | | title | none | string | Text inside the tile (optional) | | titleStyle | none | object (style) | Styling for the title (optional) | | caption | none | string | Text inside the tilt when tile is featured | captionStyle | none | object (style) | Styling for the caption (optional) | | featured | false | boolean | Changes the look of the tile (optional) | | containerStyle | none | object (style) | Styling for the outer tile container (optional) | | imageSrc | none | object (image) | Source for the image (required) | | imageContainerStyle | none | object (style) | Styling for the image (optional) | | onPress | none | function (event) | Function to call when tile is pressed (optional) | | activeOpacity | 0.2 | number | Number passed to control opacity on press (optional) | | contentContainerStyle | none | object (style) | Styling for bottom container when not featured tile (optional) | | width | Device Width | number | Width for the tile (optional) | | height | Device Width * 0.8 | number | Height for the tile |