Layout animations performing bad on Android

Description

I’ve created a transition which extends the width property of a search bar to smoothly push buttons next to the search bar away. The goal is to make a unified search bar which gets used across horizontal tabs, where the user can use swipe gestures to navigate between.

I tried to only use transform translations instead of the width, but that would’ve not been so easily possible because the Search Bar actually resizes and gets wider. I’d have to recalculate borderRadius proportional to the scale if I’m going to animate scaleX etc.

So animating width looks fine on iOS, even on lower end devices (iPhone 6).

Here’s a demo:

iOS

Android

Of course you can’t really see it in a 25 FPS GIF, but on a real device it looks pretty stuttery on Android, even on newer flagship models.

Steps To Reproduce

1. Create animation that adjusts a layout property (e.g. width) in the flexbox system which moves something out of the way (e.g. the buttons to the right)
2. Run that “animation”/transition on drag, so interpolated from translateX in my case
3. Compare iOS vs Android performance

Expected behavior

I expect the width transition to run somewhat smoothly

Actual behavior

It runs at very low FPS and has weird stuttering effects which looks like it’s jumping around.

Snack or minimal code example

Animated Style

  const searchBarStyle = useAnimatedStyle(() => {
    const index = translateX.value / -SCREEN_WIDTH;
    const width = interpolate(
      index,
      [0, 1, 2],
      [
        // those are just sample values, assuming that one button has 20px width
        180, // 1 button
        200, // 0 buttons
        160, // 2 buttons
      ]
    );

    return { width };
  }, []);

JSX View

      <Reanimated.View style={[styles.searchBar, searchBarStyle]}>
        <HeaderSearchBarContainer style={styles.fill} />
      </Reanimated.View>


      {visibleButtons === "chats" && (
        <>
          <InboxButton
            style={styles.button}
          />
          <NewChatButton
            style={styles.button}
          />
        </>
      )}
      {visibleButtons === "camera" && (
        <AddEventButton
          style={styles.button}
        />
      )}

Note: I am actually unmounting the buttons (see visibleButtons state) depending on the Swiper’s position. That’s done with a useAnimatedReaction and only triggers state updates once per page switching, so that can’t be the source of the problem.

Package versions

• React: 16.13.1
• React Native: 0.63.3
• React Native Reanimated: 2.0.0-rc.0
• NodeJS: v14.15.1

[karol-bisztyga]

Doesn’t seem like it is, but I’ll check once it’s resolved and there will be a repro.

[likern]

@gorhom @karol-bisztyga Thank you.

This is s bug in v3 bottomsheet.