How to use the progress value

[BenceV]

Hi,

I am using this library to handle our keyboard management. We are using reanimated a lot, and so we are primarily relying on the useReanimatedKeyboardAnimation hook. The values in it work as expected and in general are reliable. However, we have this requirement where an image should be scaled down to fit the available screen space when the user opens the keyboard on a specific screen. Kind of a like screen in a way:

I found the primary concept simple enough, scale the image with animation, by calculating the available space. However, unless I use timing hook from reanimated, the behaviour is not really animated when the keyboard is hiding.

Now the thing is, I am very new to reanimated, and keyboard handling in general, so it is very much possible that I am using things wrong here. At any rate, I am having issue understanding what is going wrong. Can someone give me some advice?

import { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';

import sizeConstants from '~/constants/sizeConstants.json';

import { Crashlytics } from '~/api/queries';
import { MediaItem } from '~/shared/media';
import { BaseScreenModalWrapper } from '~/shared/modals';
import { LikeMediaModalInputArea } from '../components/LikeMediaModalInputArea';
import { LikeMediaModalSendingArea } from '../components/LikeMediaModalSendingArea';
import { LikeStateTypes } from '../utils/types';

import { useChatActionProvider } from '~/contexts/chatContext/hooks';
import { messageContentTypes } from '~/contexts/chatContext/utils/message';

import { useHeaderHeight } from '@react-navigation/elements';
import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { readyChatTextMessageForSending } from '~/shared/chat/readyChatTextMessageForSending';
import { useScreenDimensions } from '~/shared/customHooks/useScreenDimensions';
import { useGetUserIdsByTypes } from '~/store/userSlice/hooks';

const CONTENT_GAP = 12;
const OFFSET = 0;

const idTypes = ['profileId'];

export function LikeMediaModalScreen({ navigation, route }) {
  const { conversationId, mediaItem } = route.params;
  const { profileId } = useGetUserIdsByTypes(idTypes);
  const [likeState, setLikeState] = useState(LikeStateTypes.EDITING);
  const { sendMessage } = useChatActionProvider({ conversationId, authParticipantId: profileId });

  const screenDimensions = useScreenDimensions();
  const headerHeight = useHeaderHeight();
  const insets = useSafeAreaInsets();

  const keyboard = useReanimatedKeyboardAnimation();
  const bottomContentHeight = useSharedValue(0);

  const defaultContentSize = {
    width: screenDimensions.width - sizeConstants.DEFAULT_CONTENT.HORIZONTAL_MARGIN * 2,
    height: screenDimensions.width - sizeConstants.DEFAULT_CONTENT.HORIZONTAL_MARGIN * 2,
  };

  useEffect(() => {
    setLikeState(LikeStateTypes.EDITING);
  }, [mediaItem]);

  const onSend = async (message) => {
    setLikeState(LikeStateTypes.PENDING);
    const cleanChatTextMessage = readyChatTextMessageForSending(message);
    try {
      await sendMessage({ text: cleanChatTextMessage, media: mediaItem }, messageContentTypes.PROFILE_LIKE);
      setLikeState(LikeStateTypes.SUCCESSFUL);
    } catch (e) {
      Crashlytics.recordError(e);
      setLikeState(LikeStateTypes.ERROR);
    }
  };

  const onLikeSent = () => {
    navigation.goBack();
  };

  const onEdit = () => {
    setLikeState(LikeStateTypes.EDITING);
  };

  useEffect(() => {
    let timer;
    if (likeState === LikeStateTypes.SUCCESSFUL) {
      timer = setTimeout(() => navigation.goBack(), 5000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [likeState]);

  const onBottomContentLayout = (e) => {
    bottomContentHeight.value = e.nativeEvent.layout.height;
  };

  const availableMediaContainerSpace = useDerivedValue(() => {
    const baseMediaWrapperContentHeight = screenDimensions.width;
    const spaceNeededForAllContent = baseMediaWrapperContentHeight + bottomContentHeight.value + CONTENT_GAP + OFFSET;
    const availableContentSpace = screenDimensions.height + keyboard.height.value * keyboard.progress.value - insets.bottom - insets.top - headerHeight;
    const differenceBetweenNeededAndAvailableSpace = availableContentSpace - spaceNeededForAllContent;

    if (differenceBetweenNeededAndAvailableSpace > 0) {
      return baseMediaWrapperContentHeight;
    } else {
      return baseMediaWrapperContentHeight + differenceBetweenNeededAndAvailableSpace;
    }
  });

  const mediaContainerStyle = useAnimatedStyle(() => {
    return { width: screenDimensions.width, height: availableMediaContainerSpace.value };
  });

  const mediaWrapper = useAnimatedStyle(() => {
    const mediaItemSize = availableMediaContainerSpace.value - sizeConstants.DEFAULT_CONTENT.HORIZONTAL_MARGIN * 2;
    const scale = mediaItemSize / defaultContentSize.height;
    console.log({ scale, s: 'sdasd' });
    return {
      transform: [{ scale }],
    };
  });

  const isUserFinishedWithEditing = likeState == LikeStateTypes.PENDING || likeState == LikeStateTypes.SUCCESSFUL;
  return (
    <BaseScreenModalWrapper>
      <Animated.View style={[styles.container]}>
        <Animated.View style={[styles.mediaContainer, mediaContainerStyle]}>
          <Animated.ScrollView
            style={[styles.mediaDisplayContainer]}
            contentContainerStyle={[styles.mediaDisplayContentContainer]}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
          >
            <Animated.View style={mediaWrapper}>
              <MediaItem
                key={mediaItem?.id}
                id={mediaItem?.id}
                media={mediaItem}
                containerStyle={{
                  borderRadius: 20,
                  height: defaultContentSize.height,
                  width: defaultContentSize.width,
                }}
              />
            </Animated.View>
          </Animated.ScrollView>
        </Animated.View>
        <Animated.View onLayout={onBottomContentLayout} style={[{ marginHorizontal: sizeConstants.DEFAULT_CONTENT.HORIZONTAL_MARGIN }]}>
          {isUserFinishedWithEditing ? null : <LikeMediaModalInputArea onSendLikePress={onSend} onEdit={onEdit} state={likeState} />}
          {isUserFinishedWithEditing ? <LikeMediaModalSendingArea onLikeSentPress={onLikeSent} state={likeState} width={defaultContentSize.width} /> : null}
        </Animated.View>
      </Animated.View>
    </BaseScreenModalWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    flexDirection: 'column',
    gap: CONTENT_GAP,
  },
  mediaContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  mediaDisplayContainer: {
    flex: 1,
  },
  mediaDisplayContentContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

[kirillzyusko]

Hello @BenceV

After a quick look this code keyboard.height.value * keyboard.progress.value seems to be incorrect as both properties will be changed simultaneously: for example if full keyboard height is 200, then on 50% of the animations will be 100 and 0.5, so 50 if you multiply them. In your case I think you should just use keyboard.height to have a synchronized movement. progress value is good to be used when you need to make an interpolation.

Can you show the type of the animation that you want to achieve (maybe give a reference to existing apps) and attach a video here? Also if you can post a small reproduction code, then I'll be happy to help you 😊