Getting scaling effect when moving bottom sheet up and down

Ask your Question

Hello,

I’ve switched to using your bottom sheet from the react-native-scroll-bottom-sheet. I’m wondering if you know how to get the same effect as displayed here: https://www.npmjs.com/package/react-native-scroll-bottom-sheet - where the card scales down as you move the bottom sheet up. In react-native-scroll-bottom-sheet it was using animatedPosition in combination with features from react reanimated v2, but it seems to have a different functionality with your bottom sheet. Trying to use this now:

import { Extrapolate, interpolateNode, useSharedValue } from 'react-native-reanimated';
........
   
  const animatedPosition = useSharedValue<number>(0);
   const animatedIndex = useSharedValue<number>(0);
   const cardScale = interpolateNode(animatedPosition.value, {
      inputRange: [0, 0.6, 1],
      outputRange: [1, 0.9, 0.7],
      extrapolate: Extrapolate.CLAMP,
   });

where cardScale ends up here - this is the image I’m trying to scale:

const CardView: FunctionComponent<CardViewProps> = ({ source, cardScale }) => {
   return (
      <View style={styles.container}>
         <Animated.Image
            source={source}
            style={[styles.imageStyle, { transform: [{ scale: cardScale }] }]}
         />
      </View>
   );
};

and the BottomSheet looks like so:

 <BottomSheet
     handleComponent={() => <Handle />}
     ref={sheetRef}
     index={0}
     waitFor
     simultaneousHandlers
     snapPoints={snapPoints}
     animatedPosition={animatedPosition}
     animatedIndex={animatedIndex}
     backgroundComponent={() => <View style={styles.contentContainer} />}>
     <BottomSheetScrollView
        scrollEnabled={false}
        contentContainerStyle={styles.contentContainer}>
        {overlay}
     </BottomSheetScrollView>
  </BottomSheet>

I’m wondering what I’m missing here. If the screen re-renders, the card suddenly scales down, but nothing happens as you move the bottom sheet up and down.

[mgcrea]

@helgifeiti any chance you could share a working code snippet? Looks like the docs CustomBackground guide is currently broken for v3 and I’m looking for a way to fix it (not getting any animatedIndex update).

[helgifeiti]

Hey @gorhom, just wanted to let you know I managed to get this working by wrapping the animatedIndex inside a useDerivedValue function like a saw you were doing, and using interpolate instead of interpolateNode, along with moving it into a useAnimatedStyle applied directly to the component I was trying to scale, like I saw you did in your example. So thanks for all your help!