Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ListItem Button Press isn't showing any feedback on Android

See original GitHub issue

I have gone through these following points

Check latest documentation: https://docs.nativebase.io/`
Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
[] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
[] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

Node: 13.3.0 Yarn: 1.21.1 React Native: 0.61.2 React: 16.9.0 XCode: 11.2.1

Expected behaviour

Receive some type of feedback when List Item is pressed

Actual behaviour

There is 0 feedback. Tried adding in a Ripple effect with background={TouchableNativeFeedback.Ripple('blue', true)} and I can see the Ripple outside of the List Container but not directly from the List Item

Steps to reproduce

import React from 'react';
import {
  View,
  Icon,
  List,
  ListItem,
  Left,
  Right,
  Body,
  Text,
  Content,
  Container,
} from 'native-base';
import { TouchableOpacity } from 'react-native';
import { SwipeListView } from 'react-native-swipe-list-view';

const EntryListItem = () => (
  <ListItem
    button
    onPress={() => console.log('Native Base is the best!')}
    style={{ backgroundColor: 'white' }}
    noIndent>
    <Body>
      <Text>Here's some text</Text>
    </Body>
    <Right style={styles.listRightStyle}>
      <Icon
        style={styles.listIconStyle}
        active
        type="MaterialIcons"
        name="edit"
      />
    </Right>
  </ListItem>
);

const SwipeAwayListItem = () => {
  <TouchableOpacity
    onPress={() => console.log('You tried to delete, but it was me, Dio!')}
    style={{
      alignItems: 'center',
      backgroundColor: 'red',
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-end',
      paddingRight: 15,
    }}>
    <Text>Delete</Text>
  </TouchableOpacity>;
};

const ListContainer = ({}) => (
  <Container styles={{ flex: 1 }}>
    <Content>
      <React.Fragment>
        {/* <View>Container 1</View> */}
        {/* <View>Container 2</View> */}

        <List>
          <SwipeListView
            data={data}
            renderItem={({ item }) => <EntryListItem />}
            renderHiddenItem={() => <SwipeListView />}
            rightOpenValue={-75}
            disableRightSwipe
          />
        </List>
      </React.Fragment>
    </Content>
  </Container>
);

Is the bug present in both iOS and Android or in any one of them?

Just Android

Any other additional info which would help us debug the issue quicker.

I’ve tried:

changing the underlayColor to ‘black’.
Tried wrapping the entire ListItem in a TouchableOpacity which worked, but doesn’t play nicely with the inner components such as Body, Right.
Tried removing all of the wrappers such as the SwipeListView container, and just mapping out the ListItems => data.map(item => <EntryListItem />)
Removed other components like <Content> and the other components which you see in the code as Container ` & 2