snapToOffsets / snapToInterval if keyboard moves scrollview (KeyboardAwareScrollView)

[kgni]

Hi!

Not really sure where to put a question like this. If this is the wrong place, please let me know and I will repost my questions somewhere else :)

I have the following layout, where I have a header and a stickyHeader.

Header:

Sticky Header (scrolled)

When scrolling the header will disappear and I also have snapToOffsets set for when you are scrolling manually (not the keyboard scrolling), to ensure that I don't have any states in between the header being shown and hidden - E.G both the sticky header title and the normal header title would be shown at the same time.

What I'm having trouble with, is when I have an input that only causes the keyboard to scroll a tiny bit, instead of snapping to the interval to prevent multiple "states" appearing at the same time:

Essentially what I want to do, is to ensure that the keyboard as a minimum is scrolling the scrollview to the snapToOffset / snapToInterval position

Does anyone have an idea of how I can implement this?

Thanks in advance!

Here is my code for reference:

import CONSTANTS from '@constants';
import { usePadding, useScreenSize } from '@hooks';
import { useRouter } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { forwardRef, useCallback, useEffect, useState } from 'react';
import {
  LayoutChangeEvent,
  LayoutRectangle,
  ScrollViewProps,
  View,
} from 'react-native';
import {
  KeyboardAvoidingView,
  KeyboardAwareScrollView, useReanimatedKeyboardAnimation
} from 'react-native-keyboard-controller';
import Animated, {
  AnimatedRef,
  interpolate, useAnimatedRef,
  useAnimatedStyle,
  useScrollViewOffset
} from 'react-native-reanimated';

import { PressableIcon } from '@ui';

import { COLORS } from '@app/ui/styles';
import { cn } from '@app/utils';

import { Text } from '../../Text/Text';
import ScrollViewBackgroundLayer from '../ScrollViewBackgroundLayer';

interface SliverLayoutProps extends ScrollViewProps {
  header?: JSX.Element;
  stickyHeader?: JSX.Element;
  setStickyHeaderHeightParent?: (height: number) => void; // this is an optional prop that can be used to get the sticky header height in the parent - bad design?
  body: JSX.Element;
  bodyStickyHeader?: JSX.Element;
  footer?: JSX.Element;
  stickyFooter?: JSX.Element;
  withBackButton?: boolean;
  scrolledTitle?: string;
  scrolledSubtitle?: string;
  stickyFooterClassName?: string;
  onPressBackButton?: () => void;
}

const SliverLayout = forwardRef<Animated.ScrollView, SliverLayoutProps>(
  (
    {
      header,
      stickyHeader,
      setStickyHeaderHeightParent, // this is an optional prop that can be used to get the sticky header height in the parent - bad design?
      body,
      bodyStickyHeader,
      footer,
      stickyFooter,
      stickyFooterClassName,
      withBackButton = true,
      scrolledTitle,
      scrolledSubtitle,
      onPressBackButton,

      ...props
    }: SliverLayoutProps,
    ref,
  ) => {
    let animatedRef = useAnimatedRef<Animated.ScrollView>();

    if (ref) {
      animatedRef = ref as AnimatedRef<Animated.ScrollView>;
    }
    const scrollOffset = useScrollViewOffset(animatedRef);

    const { paddingTop, paddingBottom } = usePadding();
    const { screenHeight, bottom } = useScreenSize();
    const router = useRouter();

    const [stickyHeaderHeight, setStickyHeaderHeight] = useState(0);
    const [headerHeight, setHeaderHeight] = useState(0);

    const [bodyStickyHeaderHeight, setBodyStickyHeaderHeight] = useState(0);

    const [stickyFooterHeight, setStickyFooterHeight] = useState(0);

    const { progress } = useReanimatedKeyboardAnimation();

    const [bodyLayout, setBodyLayout] = useState<LayoutRectangle | null>(null);
    const [stickyFooterLayout, setStickyFooterLayout] =
      useState<LayoutRectangle | null>(null);

    const [headerLayout, setHeaderLayout] = useState<LayoutRectangle | null>(
      null,
    );

    const handleStickyHeaderLayout = useCallback((event: LayoutChangeEvent) => {
      const { height } = event.nativeEvent.layout;
      setStickyHeaderHeight(height);
      setStickyHeaderHeightParent?.(height);
    }, []);

    const handleHeaderLayout = useCallback((event: LayoutChangeEvent) => {
      const { height } = event.nativeEvent.layout;
      setHeaderHeight(height);
      setHeaderLayout(event.nativeEvent.layout);
    }, []);

    const handleStickyFooterLayout = useCallback((event: LayoutChangeEvent) => {
      const { height } = event.nativeEvent.layout;
      setStickyFooterLayout(event.nativeEvent.layout);
      setStickyFooterHeight(height);
    }, []);

    const headerAnimatedStyle = useAnimatedStyle(() => {
      return {
        opacity: interpolate(scrollOffset.value, [0, headerHeight], [1, 0]),
        transform: [
          {
            translateY: interpolate(
              scrollOffset?.value ?? 0,
              [0, 0, headerHeight],
              [scrollOffset.value, 0, headerHeight],
              'clamp',
            ),
          },
        ],
      };
    });

    const fadeInHeader = useAnimatedStyle(() => {
      return {
        opacity: interpolate(
          scrollOffset.value,
          [0, headerHeight / 2, headerHeight],
          [0, 0, 1],
        ),
      };
    });

    const footerAnimatedStyle = useAnimatedStyle(() => {
      return {
        paddingBottom: interpolate(
          progress.value,
          [0, 1],
          [paddingBottom, bottom],
          'clamp',
        ),
      };
    });

    const [minBodyHeight, setMinBodyHeight] = useState(0);

    useEffect(() => {
      console.log('running');
      setMinBodyHeight(
        screenHeight - stickyFooterHeight - headerHeight - stickyHeaderHeight,
      );

      if (!bodyLayout?.height) {
        return;
      }

      // If the body height is greater than the minBodyHeight, we need to adjust the minBodyHeight, so that the body can scroll at least to the headerHeight:

      if (minBodyHeight < bodyLayout?.height) {
        setMinBodyHeight(screenHeight - stickyFooterHeight);
      }
    }, [screenHeight, stickyFooterHeight, headerHeight, bodyLayout?.height]);

    return (
      <>
        <ScrollViewBackgroundLayer
          topBounceColor={COLORS.background.dark}
          bottomBounceColor={COLORS.background.light}
        />
        <Animated.View
          onLayout={handleStickyHeaderLayout}
          style={{
            paddingBottom: CONSTANTS.padding.layoutBottom,
            paddingTop,
          }}>
          <View>
            {withBackButton && (
              <View className='flex-row '>
                <PressableIcon
                  containerStyle={{
                    paddingLeft: CONSTANTS.padding.horizontal,
                  }}
                  icon='chevron-left'
                  className='text-white'
                  onPress={onPressBackButton || (() => router.back())}
                />
                <Animated.View
                  style={!header && !stickyHeader ? undefined : fadeInHeader}
                  className='absolute left-1/2 -translate-x-1/2'>
                  <Text className='text-white' fontWeight='600'>
                    {scrolledTitle}
                  </Text>
                </Animated.View>
              </View>
            )}
            <Animated.View className='px-horizontal'>
              {stickyHeader}
            </Animated.View>
          </View>
        </Animated.View>
        <KeyboardAwareScrollView
          ref={animatedRef}
          // TODO: we need the "bounces" to be true only if the content is scrollable and it should only apply to the top
          scrollEventThrottle={16}
          bottomOffset={24}
          snapToOffsets={[headerHeight]}
          decelerationRate='fast'
          nestedScrollEnabled
          showsVerticalScrollIndicator={false}
          stickyHeaderIndices={bodyStickyHeader ? [1] : undefined}
          snapToEnd={false}
          endFillColor={COLORS.error}
          disableIntervalMomentum
          className='rounded-t-3xl'
          {...props}>
          {header && (
            <Animated.View
              onLayout={handleHeaderLayout}
              style={headerAnimatedStyle}
              className='px-horizontal pb-6'>
              {header}
            </Animated.View>
          )}

          {/* TODO: add refresh indicator */}

          {bodyStickyHeader && (
            <Animated.View
              onLayout={(event) => {
                const { height } = event.nativeEvent.layout;
                setBodyStickyHeaderHeight(height);
              }}
              className='rounded-t-3xl bg-background-light px-6 pt-6'>
              {bodyStickyHeader}
            </Animated.View>
          )}
          <Animated.View
            style={{
              flex: 1,
              minHeight: minBodyHeight,
              paddingBottom: stickyFooter
                ? bottom + stickyFooterHeight
                : paddingBottom,
            }}
            className={cn(
              'bg-background-light',
              bodyStickyHeader ? '' : 'rounded-t-3xl',
            )}>
            <View
              onLayout={(event) => {
                setBodyLayout(event.nativeEvent.layout);
              }}
              className='px-6 pt-6'>
              {body}
            </View>
            <View className='flex-1 justify-end '>
              {footer && (
                <Animated.View style={footerAnimatedStyle}>
                  <KeyboardAvoidingView>{footer}</KeyboardAvoidingView>
                </Animated.View>
              )}
            </View>
          </Animated.View>
        </KeyboardAwareScrollView>
        {stickyFooter && (
          <View
            onLayout={handleStickyFooterLayout}
            className={cn(
              'absolute bottom-0 z-50 w-full border-t-2 border-t-background-dark bg-white p-6',
              // stickyFooterClassName,
            )}
            style={{
              paddingBottom: bottom + CONSTANTS.padding.stickyFooterBottom,
            }}>
            <View>{stickyFooter}</View>
          </View>
        )}

        <StatusBar style='light' />
      </>
    );
  },
);

export default SliverLayout;

[kgni]

Short example of everything:

CleanShot.2024-05-17.at.21.46.04.mp4

[kirillzyusko]

Hi @kgni

I created an issue from this discussion - #450
Let's keep a conversation there 👀