Nativebase: ListItem Button Press isn't showing any feedback on Android

Created on 16 Dec 2019 · 12Comments · Source: GeekyAnts/NativeBase

I have gone through these following points

[x] Check latest documentation: https://docs.nativebase.io/`
[x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
[x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
[x] 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

Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

S N A C C : https://snack.expo.io/HyUs_mS0r

Source

AndresTIY

All 12 comments

I am having the same issue. also onLongPresss color isnt changing.

samipshah100 on 27 Dec 2019

@AndresTIY did you manage to find a solution for this?

samipshah100 on 28 Dec 2019

❤1

Not yet! I didn't want to spend too much time on this issue and needed to move on. Was hoping I'd get a response with a fix but nothing yet. It's weird as well because I have another list component where the touchable feedback works just fine on android.

Have you figured anything out?

AndresTIY on 29 Dec 2019

Are you able to change the color of the other touhcablefeedback?

Can you share teh code of the other touhcableFeedback which works on
android, maybe you did something differently?

No I couldnt make it work so i am thinking today of moving to multi
selectable flatlist as shown here:
https://facebook.github.io/react-native/docs/flatlist#extradata

unless we can find a solution from your other piece of code that works on
android

On Sun, 29 Dec 2019 at 07:55, Andres Cifuentes notifications@github.com
wrote:

Not yet! I didn't want to spend too much time on this issue and needed to
move on. Was hoping I'd get a response with a fix but nothing yet. It's
weird as well because I have another list component where the touchable
feedback works just fine on android.

Have you figured anything out?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/3028?email_source=notifications&email_token=AMJ3FQAVULZSJA5C6VABGDLQ3ADB7A5CNFSM4J3MA5W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHYWHAQ#issuecomment-569467778,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMJ3FQGLCLXYVENXYJIHM5TQ3ADB7ANCNFSM4J3MA5WQ
.

--
Best,
Samip Shah

samipshah100 on 29 Dec 2019

Just threw together a quick example. Haven't tried changing the color of the touchablefeedback, but this example shows it working as expected on Android:

SNACK

I'll play around with it a bit more when I get back from my vacation

AndresTIY on 29 Dec 2019

Hi @AndresTIY Since underlayColor wasnt working I did a workaround by combining ListView with Flatlist multi select example( https://facebook.github.io/react-native/docs/flatlist )

Here's it for your reference .

state = {      selected: new Map() }

 onSelect = id => {
    const { selected } = this.state
    const newSelected = new Map(selected)
    newSelected.set(id, !selected.get(id))

    this.setState({ selected: newSelected })
  }

renderItem = (data) => {
    //TODO: to change listItem to touchablehightlight

    const selected = !!this.state.selected.get(data.item.id)
    console.log(this.state.selected)

    return (
      <ListItem button
        onLongPress={() => this.onSelect(data.item.id)}
        onPress={() => { this.onItemPress(data) }}
        style={[styles.rowFront,
        { backgroundColor: selected ? 'grey' : 'white' }, //**this lets you specify the colors for selection**
        ]}
      >
        <Left style={{ flex: 2 }}>
          <Icon name="md-contact" style={styles.icon} />
        </Left>
        <Body style={styles.body}>
          <Text style={styles.senderName}>{data.item.name}</Text>
          <Text>{data.item.subject}</Text>
          <Text note>{data.item.body}</Text>
        </Body>
        <View style={{ flex: 3, justifyContent: 'flex-start', }}>
          <Right>
            <Text note style={{ alignSelf: 'flex-start' }}>3:43 pm</Text>
          </Right>
        </View>
      </ListItem>

    )
  }

render() {
    return (<Container style={styles.emailListComponent}>
      <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        renderHiddenItem={this.renderHiddenItem}
        leftOpenValue={75}
        rightOpenValue={-75}
        extraData={this.state.selected}
      />
    </Container>
    )
  }

samipshah100 on 30 Dec 2019

@AndresTIY @samipshah100 It seems like ListItem is using react-native's TouchableNativeFeedback. Setting the prop useForeground to true appears to fix the issue of not getting visual feedback on Android whilst keeping everything else on your code the same.

It worked when tried on your snack link above as well. I created a PR to add this prop by default because I feel like it'd be always a necessity for it to show visual feedback out the box in android.

misterchlee7 on 1 Feb 2020

🎉1

Hi, It has been fixed. please update to latest Native-base v2.13.14 . Let us know if the issue still persists.

hanykumar on 16 Sep 2020

the problem still persist i think its not working and i have the latest

moedeveloper on 28 Nov 2020

👍1

It works well for me, you have to add button AND an onPress function in your ListItem.

But I think it not very intuitive and it should show a feedback just with button.

kejlerj on 6 Dec 2020

👍1

We still have this issue in "react-native": "^0.63.4"
& useForeground didn't worked for us.

glintpursuit on 9 Dec 2020

It works well for me, you have to add button AND an onPress function in your ListItem.

But I think it not very intuitive and it should show a feedback just with button.

I had even looked for ListItem in Native Base docs, but I wasn't able to find this behavior, or it's missing.

I could make it work perfectly after reading your post, thanks.