import {
  RNEButton,
  RNECard,
  RNEFormInput,
  RNEFormLabel,
  RNEList,
  RNEListItem,
  RNEPricingCard,
  RNESocialIcon,
  RNEText,
  RNEDivider
} from 'react-native-elements'

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

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

<RNEButton
  title='BUTTON' />

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

<RNEButton
  small
  iconRight
  icon={{name: 'code'}}
  title='SMALL WITH RIGHT ICON' />

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

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

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

import { RNEList, RNEListItem } from 'react-native-elements'

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

<RNEList>
  {
    list.map((item, i) => (
      <RNEListItem
        key={i}
        title={item.title}
        icon={{name: item.icon}}
      />
    ))
  }
</RNEList>

import { RNEList, RNEListItem } 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'
  }
]

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

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

import { RNESideMenu, RNEListItem } from 'react-native-elements'

constructor () {
  super()
  this.state = { toggled: false }
}

toggleSideMenu () {
  this.setState({
    toggled: true
  })
}

render () {
  // RNESideMenu takes a React Native element as a prop for the actual Side Menu
  const MenuComponent = (
    <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
      <RNEList containerStyle={{marginBottom: 20}}>
      {
        list.map((item, i) => (
          <RNEListItem
            roundAvatar
            onPress={() => console.log('something')}
            avatar={item.avatar_url}
            key={i}
            title={item.name}
            subtitle={item.subtitle} />
        ))
      }
      </RNEList>
    </View>
  )
  return (
    <RNESideMenu
      MenuComponent={MenuComponent}
      toggled={this.state.toggled}>
      <App />
    </RNESideMenu>
  )
}

import { RNEFormLabel, RNEFormInput } from 'react-native-elements'

<RNEFormLabel containerStyle={styles.labelContainerStyle}>Name</RNEFormLabel>
<RNEFormInput onChangeText={someFunction}/>

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

<RNECard
  title='CARD WITH DIVIDER'>
  {
    users.map((u, i) => {}
  }
</RNECard>

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

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