Need help with layout animation on Android and Web

[giollord]

Hi!
I'm trying to make language switch component, but can not make animations to run smoothly - I have "jumping" transitions in Android and some weird stretching in web.
Here is link to the code, see components/LanguageButton.js :
https://snack.expo.dev/@giollord/calm-green-candies?platform=web

With theme.iconPosition="right" and with any value of theme.position it works well on Android:

Gif

But with theme.iconPosition="left" and with any value of theme.position it does not look good - icons are jumping to the left (desired look - when icon only moves vertically):

Gif

But any theme.iconPosition and theme.position combination stretch image in Web:

Gif

Could please somebody help me to understand how to make animation smooth on Android and Web?

[MatiPl01]

Hey @giollord!

The only solution for now is to write a custom animation. Unfortunately, layout transitions don't work as they should on web and we are planning to fix this behavior in the near future.

Even though views on web will be animated with JavaScript in this case, the animation should be smooth as it doesn't look complex. Please try writing your custom animation (use useAnimatedStyle, useSharedValue, etc.).

Let me know if you still have questions or need help in writing animation using reanimated hooks.

[giollord]

Thank you for reply, @MatiPl01 !
So as far as I understand, if I set <Animated.*** layout={...}>, then at the moment it is not expected to work properly in Web?
I have looked a bit into custom animations, but can't understand at the moment how to handle layout changes with them. So, as simple example: I have image, text and their container has flex-direction="row", so image would appear to the right from text:

const [showText, setShowText] = useState(true);
...
<View style={{ flexDirection: "row" }}>
  (showText && <Text>Some text<Text>)
  <Animated.Image source={...} />
</View>

When showText state is changed and text component gets removed from layout, then image now will be be moved to position of text. How can I make simple linear animation of image sliding in it's place similar to layout={LinearTransition} behavior, using 'useAnimatedStyle', 'useSharedValue', perhaps 'measure' etc?

[MatiPl01]

So as far as I understand, if I set <Animated.*** layout={...}>, then at the moment it is not expected to work properly in Web?

Yes, but only if the dimensions of the view on which you set layout={...} change. Position would be animated properly. I think that in your example you set layout on the image and text container, thus it transforms its X scale when the text appears. Maybe you can try adding layout prop to these components separately.

How can I make simple linear animation of image sliding in it's place similar to layout={LinearTransition} behavior, using 'useAnimatedStyle', 'useSharedValue', perhaps 'measure' etc?

I think that the easiest way would be to wrap the text component in the Animated.View and animate its width and opacity to 0 when you want the text to disappear. You are right, that you would have to somehow measure the text, either by using the onLayout hook and storing its width somewhere, likely in a SharedValue or by using the measure function and measuring the view just before starting the animation (in reaction to the press event).

I know that it would be much easier with layout animations, but they are a bit problematic on web now. You can also just wait until we fix the issue if you can and keep using layout animations as they work much better on mobile.