Problem handle animated

Bug

https://user-images.githubusercontent.com/20476002/102690717-965fd800-4207-11eb-9e24-771718f54be2.mov

Hi @gorhom , I based on your handle example I only changed the color as you can see from the code, but I am having problems as you can see from the video.

Link: here

Environment info

Library	Version
@gorhom/bottom-sheet	2.0.0
react-native	0.63.3
react-native-reanimated	1.13.2
react-native-gesture-handler	1.9.0

Reproducible sample code

      <BottomSheetModal
        ref={bottomSheetLangModalRef}
        snapPoints={["50%", "100%"]}
        handleComponent={Handle}
        >
        <LanguageModal
          darkMode={darkMode}
          lang={lang}
          onChange={handleLangChange}
          onLayout={(e) => handleOnLayout('lang', e)}
        />
      </BottomSheetModal>

Handle:

import React, { useMemo } from 'react';
import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
import Animated, { interpolate, Extrapolate } from 'react-native-reanimated';
import { transformOrigin, toRad } from 'react-native-redash';

interface HandleProps extends BottomSheetHandleProps {
  style?: StyleProp<ViewStyle>;
}

import { useTheme } from '@/Theme';

const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {
  const { Colors } = useTheme();

  //#region animations
  const borderTopRadius = useMemo(
    () =>
      interpolate(animatedIndex, {
        inputRange: [1, 2],
        outputRange: [15, 0],
        extrapolate: Extrapolate.CLAMP,
      }),
    [animatedIndex]
  );
  const indicatorTransformOriginY = useMemo(
    () =>
      interpolate(animatedIndex, {
        inputRange: [0, 1, 2],
        outputRange: [-1, 0, 1],
        extrapolate: Extrapolate.CLAMP,
      }),
    [animatedIndex]
  );
  const leftIndicatorRotate = useMemo(
    () =>
      interpolate(animatedIndex, {
        inputRange: [0, 1, 2],
        outputRange: [toRad(-30), 0, toRad(30)],
        extrapolate: Extrapolate.CLAMP,
      }),
    [animatedIndex]
  );
  const rightIndicatorRotate = interpolate(animatedIndex, {
    inputRange: [0, 1, 2],
    outputRange: [toRad(30), 0, toRad(-30)],
    extrapolate: Extrapolate.CLAMP,
  });
  //#endregion

  //#region styles
  const containerStyle = useMemo(
    () => [
      styles.header,
      style,
      {
        backgroundColor: Colors.backgroundSecondary,
        borderTopLeftRadius: borderTopRadius,
        borderTopRightRadius: borderTopRadius,
      },
    ],
    [borderTopRadius, style, Colors]
  );
  const leftIndicatorStyle = useMemo(
    () => ({
      ...styles.indicator,
      ...styles.leftIndicator,
      backgroundColor: Colors.onSurface,
      transform: transformOrigin(
        { x: 0, y: indicatorTransformOriginY },
        {
          rotate: leftIndicatorRotate,
          translateX: -10,
        }
      ),
    }),
    [indicatorTransformOriginY, leftIndicatorRotate, Colors]
  );
  const rightIndicatorStyle = useMemo(
    () => ({
      ...styles.indicator,
      ...styles.rightIndicator,
      backgroundColor: Colors.onSurface,
      transform: transformOrigin(
        { x: 0, y: indicatorTransformOriginY },
        {
          rotate: rightIndicatorRotate,
          translateX: 10,
        }
      ),
    }),
    [indicatorTransformOriginY, rightIndicatorRotate, Colors]
  );
  //#endregion

  // render
  return (
    <Animated.View style={containerStyle} renderToHardwareTextureAndroid={true}>
      <Animated.View style={leftIndicatorStyle} />
      <Animated.View style={rightIndicatorStyle} />
    </Animated.View>
  );
};

export default Handle;

const styles = StyleSheet.create({
  header: {
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    //backgroundColor: 'white',
    paddingVertical: 14,
    shadowOffset: {
      width: 0,
      height: -20,
    },
    shadowOpacity: 0.1,
    shadowRadius: 10,
    elevation: 16,
  },
  indicator: {
    position: 'absolute',
    width: 20,
    height: 4,
    //backgroundColor: '#999',
  },
  leftIndicator: {
    borderTopStartRadius: 2,
    borderBottomStartRadius: 2,
  },
  rightIndicator: {
    borderTopEndRadius: 2,
    borderBottomEndRadius: 2,
  },
});

[gorhom]

@chybisov yeah it is, especially when setting easing method to bouncing or back, the sheet will be off the bottom of the screen, and to prevent that i added "bottom": -100, 😅

[gorhom]

@chybisov happy new year 🎉