@uiw/react-native/lib/List/Item.js

UIW for React Native

import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import Text from '../Typography/Text';
export default class ListItem extends React.PureComponent {
  static defaultProps = {
    underlayColor: '#DADADA'
    // paddingLeft: 16,
  };

  render() {
    const {
      children,
      style,
      onPress,
      paddingLeft,
      underlayColor,
      extra,
      extraStyle,
      touchableStyle,
      size,
      ...otherProps
    } = this.props;
    let sizeStyle = {};
    if (size && styles[size]) {
      sizeStyle = styles[size];
    }
    const cell = <View style={[styles.border, sizeStyle, style]} {...otherProps}>
        <View style={{
        flex: 1,
        flexDirection: 'row'
      }}>
          {React.Children.toArray(children).map((child, idx) => {
          if (typeof children === 'string') {
            return <Text color="text" key={idx}>
                  {children}
                </Text>;
          }
          if (!React.isValidElement(child)) {
            return null;
          }
          return React.cloneElement(child, {
            key: idx
          });
        })}
        </View>
        {extra && <View style={{
        paddingRight: 10
      }}>
            {typeof extra === 'string' ? <Text color="primary_text" style={extraStyle}>
                {extra}
              </Text> : <View style={[{
          flexDirection: 'row',
          alignItems: 'center'
        }, extraStyle]}>{extra}</View>}
          </View>}
      </View>;
    if (onPress) {
      return <TouchableOpacity
      // underlayColor={underlayColor}
      style={[styles.warpper, {
        paddingLeft
      }, touchableStyle]} onPress={onPress} {...otherProps}>
          {cell}
        </TouchableOpacity>;
    }
    return <View style={[{
      paddingLeft
    }, styles.warpper]}>{cell}</View>;
  }
}
const styles = StyleSheet.create({
  warpper: {
    // backgroundColor: '#fff',
  },
  border: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#CDCDCD',
    flexDirection: 'row',
    alignItems: 'center'
  },
  default: {
    paddingVertical: 12
  },
  small: {
    paddingVertical: 10
  },
  large: {
    paddingVertical: 16
  }
});