Animated image does not have transparent background

Question

In my react-native application, I want to render a spinning logo as the right header for a screen.

<Stack.Screen
      name="About"
      component={About}
      options={{headerRight: () => <SpinnerIcon />}}
    />

And the spinner component returns an Animated.Image

<Animated.Image
        source={require('../img/reactLogoTwo.png')}
        style={[{width: 50, height: 50}, {transform: [{rotate}]}]}
      />

The image I have saved in img folder has a transparent background (downloaded from here) but the animated image rendered with a white background.

Notes: adding backgroundColor: 'transparent' does not work.

simply do `backgroundColor: 'transparent'` in image style – Harrison Nov 03 '20 at 13:34 — Harrison, Nov 03 '20 at 13:34
@Harrison Edited the question, that does not work – Amir-Mousavi Nov 03 '20 at 13:36 — Amir-Mousavi, Nov 03 '20 at 13:36

score 1 · Answer 1 · answered Nov 03 '20 at 13:51

According to it, there's no conflict between transparent PNG's and Animated.Image. Are you using react-native-animated library?

Secondarily, setting style backgroundColor: 'transparent' might help, but I don't see what could cause that peculiar behavior.

1 Answers1