Nativebase: ListItem / Transparent button touchable effects

Created on 18 Nov 2017  路  6Comments  路  Source: GeekyAnts/NativeBase

Hi!

I would like to know if the following is expected:

  • ListItem touchable effects is hard to see
  • Transparent button without effects on android

react-native, react and native-base version

"react-native": "0.50.3"
"native-base": "^2.3.3"

Expected behaviour

ListItem touchable effects like native. Transparent button touchable effects in android.

Actual behaviour

ListItem touchable effects is hard to see. Transparent button does not have touchable effects in android.

Steps to reproduce (code snippet or screenshot)

https://gitlab.com/vh.pegoraro/native_base_test

Screenshot of emulator/device

https://www.dropbox.com/s/dlzc51lr3b59aka/Native%20Base%20Test.mov?dl=0

Is the bug present in both ios and android or in any one of them?

ListItem is present in both. Transparent button only in android.

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

No.

bug performance

Most helpful comment

I was able to fix this by making the ListItem background color transparent. Possibly related to https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/variables/platform.js#L210 added in https://github.com/GeekyAnts/NativeBase/commit/e67095fb970a7200a2f167840c63daacdd7b3a04#diff-e2d9b13af5e71dd243814626dcc96107

All 6 comments

@vhpegoraro no, these are not expected results. Marking this as bug.

Same here.

Also very weird touchable effect on ios, same as shown in @vhpegoraro 's video.
I started to see this problem on ios when I updated from 2.3.1 to 2.3.3. Not sure if 2.3.2 is still okay.

I managed to fix the problem on the transparent buttons by changing the variable androidRippleColor in the theme variables file to a darker one as it was set to white with an opacity. This doesn't seem to have had any effect on the list items though.

I was able to fix this by making the ListItem background color transparent. Possibly related to https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/variables/platform.js#L210 added in https://github.com/GeekyAnts/NativeBase/commit/e67095fb970a7200a2f167840c63daacdd7b3a04#diff-e2d9b13af5e71dd243814626dcc96107

Thank you guys !!! Changing the variable androidRippleColor and ListItem background as @dylandupreez and @digitaltoad comments solved the issues !!!

Fixed with 2.3.7

Was this page helpful?
0 / 5 - 0 ratings