Repository navigation
[Android] dynamic tint changing issue #31926
Description
Description
I would like to have an ability to change the tintColor of the ImageView based on state.
<Image
style={[
{ width: 120, height: 120 },
visible ? {} : { tintColor: '#f00' },
]}
source={image1}
/>Current behavior for above code is that the image disappears instead of going back to its original colors.
TintIssue.mp4
React Native version:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
Memory: 1.79 GB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.3.1 - /var/folders/y1/_1ccvy6x0pv1b0gqq3qr35w40000gn/T/yarn--1627646796621-0.024986895215110883/node
Yarn: 1.22.4 - /var/folders/y1/_1ccvy6x0pv1b0gqq3qr35w40000gn/T/yarn--1627646796621-0.024986895215110883/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK:
API Levels: 23, 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.2
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: 22.0.7026061
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7486908
Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_251 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
Using below snack:
https://snack.expo.dev/@pagerview/android-tint-issue
- Click on
Press Herebutton 2 times - Check if first image is still visible on the screen
Expected Results
Image should be visible, when tint is removed.
Possible workaround
Change key prop each time, when prop changed (force rerender)
const [key, setKey] = React.useState(uuidv4());
React.useEffect(() => {
setKey(uuidv4());
}, [visible]);
<Image
key={key}
style={[
{ width: 120, height: 120 },
visible ? {} : { tintColor: '#f00' },
]}
source={image1}
/>
Activity
efstathiosntonas commentedon Aug 2, 2021
duplicate: #29412
troZee commentedon Aug 2, 2021
I am closing it, bc it is duplicated. Lets talk about it in the main thread