GeekyAnts / GeekyAnts/NativeBase

react-native-reanimated layout animation causes semitransparent icons to flicker on rerender

Open
#5,040 1 comment 0 reactions 1 assignee Claimed by @Viraj-10 View on GitHub
android bug v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Not sure if this is native-base or react-native-reanimated bug, every time I use layout animation (Entering, Exiting, …) no matter on what screen, it causes all native-base icons, with semitransparent color in app to flicker on rerender, in snack example I provided, I have 2 identical screens, except the second one uses layout animation. On each screen there are 3 icons:

1. First icon is native-base icon with usage of ‘as’ property, this icon has not semitransparent color, this will never flicker
2. Second icon, is vector icon from ‘react-native-vector-icons’ with semitransparent color, this icon is passed into ‘as’ property on native-base icon, this icon will never flicker
3. First icon is native-base icon with usage of ‘as’ property, this icon has semitransparent color, this icon will start to flicker on render (refresh button) whenever layout animation occurs in app
4. Taping Refresh button causes rerender
5. On first screen if you tap on refresh, no flicker occurs, when you switch to second tab, layout animation is triggered, causing renders to flicker third icon, when you navigate back to the first tab, third icon will be flickering as well.

I did not notice this behavior on iOS, and I am not even sure, if this is the right repo for this issue, and not react-native-reanimated issue, I think this bug have to do something with passing icon into ‘as’ property of native-base icon, as „pure“ vector icon doesn’t flicker and if icon is passed as child to native-base icon, it doesn’t flicker either.

### CodeSandbox/Snack link

https://snack.expo.dev/@krygelv/flickeringicon

### Steps to reproduce

1. tap on refresh (no flicker occurs)
2. navigate to second tab (this will trigger layout animation)
3. tap on refresh (flicker occures on third icon)
4. navigate to first tab, and tap on refresh (flicker occures on third icon)

### NativeBase Version

3.4.5

### Platform

- [X] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

https://user-images.githubusercontent.com/51510519/170483460-14c37437-d7e1-4b9e-a16a-df84f5da2034.mp4

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.