React-native-paper: Strange behaviour of appbar back button on web

[RichardLindhout]

Current behaviour

The back button rotates on every re-render

Expected behaviour

Not rotating on every re-render

Code sample

import { Appbar } from 'react-native-paper'
 <Appbar.BackAction onPress={this._back} />

Screenshots (if applicable)

What have you tried

Looking in source code and I don't know why we are transforming things on default maybe remove this?
https://github.com/callstack/react-native-paper/blob/master/src/components/MaterialCommunityIcon.tsx#L94

Update with removing transform nothing changed still the same bug

Your Environment

| software | version
| --------------------- | -------
| ios/android/web | web
| react-native | 0.62.2
| react-native-paper | master
| react-native-vector-icons | master
| node | v14.3.0
| yarn | 1.22.4
| expo sdk | ejected from expo
| react-native-web | 0.13.1 (issue also on 0.11)

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-paper
• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[satya164]

I'd suggest to inspect it in devtools to see which CSS is applying rotation.

[RichardLindhout]

Maybe it's done in the new React-native-web, it shows 2 div with each different transforms

[RichardLindhout]

Look like it's rendering the crossfadeicon, but I don't see that based on source code

[RichardLindhout]

The AppbarActions has the animated prop on the IconButton which render the CrossFadeIcon. The backactions uses that too

[RichardLindhout]

I don't think we should use the cross fade icon I think that use case was for before with the drawer menu changing into a rotating menu. But the drawer now overlaps the menu icon in the official

[RichardLindhout]

Animated = true
https://github.com/callstack/react-native-paper/blob/master/src/components/Appbar/AppbarAction.tsx#L99

Icon button renders CrossFadeIconButton
https://github.com/callstack/react-native-paper/blob/master/src/components/IconButton.tsx#L106

https://github.com/callstack/react-native-paper/blob/master/src/components/CrossFadeIcon.tsx

What is the use-case of the cross fade icon?

[satya164]

I think we just need to use React.useMemo there to ensure that it doesn't animate if it didn't change

[RichardLindhout]

I think that could fix it. But it's interesting maybe we don't need the CrossFadeIcon at all in the appbar and just disable the animated property.

[SleeplessByte]

(FWIW, this animation is still _great_ for changing a regular Appbar action on the right side)