Alt use of AppBarLayout - Possible to mimic play sotre behavior on "scroll up"/"scroll to top"

I was trying to use AppBarLayout like this:

          <AppBarLayoutAndroid
            layoutWidthAndroid="matchParent"
            layoutHeightAndroid="wrapContent"
          >
            {/* Elements directily in <AppBarLayoutAndroid> can have an     */}
            {/* additional scrollFlagsAndroid prop. This must be an array   */}
            {/* of strings, specifying the scroll flags of this element.    */}
            {/* see https://goo.gl/RiAyDX for reference.                    */}
            <View scrollFlagsAndroid={['scroll']}>
              <Text style={{ fontSize: 18 }}>Hi, I will be collapsed when scrolling down, and show again when scrolled to top.</Text>
            </View>
            <View scrollFlagsAndroid={['scroll', 'enterAlways']}>
              <Text style={{ fontSize: 18 }}>Hi, I will be collapsed when scrolling down, and show again when scrolling up.</Text>
            </View>
            <View scrollFlagsAndroid={[]}>
              <Text style={{ fontSize: 18 }}>Hi, I will not be collapsed.</Text>
            </View>
          </AppBarLayoutAndroid>

From this discontinued repo - https://github.com/zetavg/react-native-android-design-support#coordinatorlayout

I was hoping to mimic the playstore behavior:

HD screen recording: https://gfycat.com/ShockingQuickGalapagosdove

GIF screen recording:

[cesardeazevedo]

Hi, you need to enable the following scrollFlags:

SCROLL_FLAG_SCROLL | SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED | SCROLL_FLAG_ENTER_ALWAYS

Here’s a practical example.

<CollapsingToolbarLayout
  title='Collapsing Toolbar'
  scrollFlags={
      AppBarLayout.SCROLL_FLAG_SCROLL
    | AppBarLayout.SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
    | AppBarLayout.SCROLL_FLAG_ENTER_ALWAYS
    }>
</CollapsingToolbarLayout>

Let me know if you got it.

[cesardeazevedo]

Thanks for sharing it.

I just saw they move to a JS solution, sadly 😞

This is one those things that would play nicely inside a native navigation solution, such as airbnb native-navigation, but that’s not something easy to do.

But anyway, i still have my doubts about how that could works, but i will give a try, thanks for sharing it.