react-native/local-cli/templates/HelloNavigation/components/ListItem.js

'use strict';

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableNativeFeedback,
  View,
} from 'react-native';

/**
 * Renders the right type of Touchable for the list item, based on platform.
 */
const Touchable = ({onPress, children}) => {
  const child = React.Children.only(children);
  if (Platform.OS === 'android') {
    return (
      <TouchableNativeFeedback onPress={onPress}>
        {child}
      </TouchableNativeFeedback>
    );
  } else {
    return (
      <TouchableHighlight onPress={onPress} underlayColor="#ddd">
        {child}
      </TouchableHighlight>
    );
  }
};

const ListItem = ({label, onPress}) => (
  <Touchable onPress={onPress}>
    <View style={styles.item}>
      <Text style={styles.label}>{label}</Text>
    </View>
  </Touchable>
);

const styles = StyleSheet.create({
  item: {
    height: 48,
    justifyContent: 'center',
    paddingLeft: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ddd',
  },
  label: {
    fontSize: 16,
  }
});

export default ListItem;