ListItem touchable only when onPress props is present

[michel-reyes]

Current behavior

Event if the user does not pass onPress the listItem visual behavior is touchable, due to the wrapper: <TouchableOpactity>
i.e: compare: <DemoCommunityScreen> vs DemoDebugScreen

Solution overview

A way to fix this in the ListItem component is by conditionally render the TouchableOpacity, this is a functional code sample:

// PATH: app/components/ListItem.tsx

// check if obPress props is present
const isTouchable = TouchableOpacityProps.onPress !== undefined

const content = (
  <>
    <ListItemAction
      side="left"
      size={height}
      icon={leftIcon}
      iconColor={leftIconColor}
      Component={LeftComponent}
    />

    <Text {...TextProps} tx={tx} text={text} txOptions={txOptions} style={themed($textStyles)}>
      {children}
    </Text>

    <ListItemAction
      side="right"
      size={height}
      icon={rightIcon}
      iconColor={rightIconColor}
      Component={RightComponent}
    />
  </>
)

return (
  <View ref={ref} style={themed($containerStyles)}>
    {/* make the item touchable if required */}
    {isTouchable ? (
      <TouchableOpacity {...TouchableOpacityProps} style={$touchableStyles}>
        {content}
      </TouchableOpacity>
    ) : (
      {/* it could be raw View, styledView or React Fragment */}
      <View style={$touchableStyles}>{content}</View>
    )}
  </View>
)

[frankcalise]

Hey thanks for the report! This is true, but should we check onPressIn/onPressOut as well?