react-native-elements icon indicating copy to clipboard operation
react-native-elements copied to clipboard

activeOpacity does not work on mobile

Open ZRunner opened this issue 1 year ago • 0 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Explain what you did

I tried to use the Avatar component from the@rneui/base lib. Everything seems to work fine, but I would like to get an opacity effect when the user presses their Avatar, and it looks like this attribute does not work.

Expected behavior

The Avatar component should be slightly less opaque when pressed on a mobile.

Describe the bug

Currently the activeOpacity seems to be ignored when pressed, as no opacity effect appear on the Avatar component. It looks exactly like activeOpacity was never provided to the component, or set to 1.0.

Steps To Reproduce

Here is my code, used with React Native (0.66.2) on both iOS (15.5) and Android (API 31):

<Avatar
  title={"Z"}
  source={{uri: props.uri}}
  onPress={() => {}}
  size={30}
  rounded
  containerStyle={{backgroundColor: 'grey'}}
  activeOpacity={0.5}
/>

Screenshots

No response

Your Environment

`npx @rneui/envinfo` Does not have any output. It keeps loading and nothing is printed on the console. But here are some manual info:
System:
  OS: macOS 12.4
  CPU: Apple M1 Pro
Binaries:
  Node: 16.5.0
  npm: 8.12.1
Utilities:
  Git: 2.32.1 (Apple Git-133)
IDEs:
  VSCode: 1.68.0
  XCode: 13.4.1 (13F100)
Libs:
  react: 17.0.2
  react-native: 0.66.2
  @rneui/base: 4.0.0-rc.4
  @rneui/themed: 4.0.0-rc.4
  @react-navigation/native: 6.0.6
  And a few others
Targets:
  iOS (15.5)
  Android (API 31):

ZRunner avatar Jun 10 '22 09:06 ZRunner

You can add activeOpacity using pressableProps.

<Avatar
  size={64}
  rounded
  Component={TouchableOpacity}
  pressableProps={{activeOpacity: 0.5}}
  icon={{ name: 'pencil', type: 'font-awesome' }}
  containerStyle={{ backgroundColor: '#6733b9' }}  />

The activeOpacity prop is mentioned in the documentation but does not do anything so it should be removed.

dhruvtailor7 avatar Aug 19 '22 08:08 dhruvtailor7