@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,
    },
});