Ошибка в анимации теней React Native на panresponder

Question

Я хочу применить анимацию в тени, например, когда пользователь пытается прокрутить вниз в это время, тень должна быть темной, когда пользователь пытается прокрутить вверх в это время, тень должна показывать свет на эффекте переписчика. Ниже мой код

  minAnimatedView: {
shadowColor: "rgba(81, 84, 92, 0.2)",
shadowOffset: {
  width: 0,
  height: 1
},
shadowRadius: 8,
shadowOpacity: 1,
elevation:12
},

fullAnimatedView: {
shadowColor: "rgba(81, 84, 92, 0.57)",
shadowOffset: {
  width: 0,
  height: 2
},
shadowRadius: 14,
shadowOpacity: 1,
elevation:12
},

 teeBookAnimatedView: {
 borderRadius: 4,
 backgroundColor: colors.white,
 marginLeft: 15,
 marginRight: 15,
 marginTop: 10,
 paddingBottom: 3,
 },

 imageBGView: {
 width: "100%",
 height: 124,
 overflow: "hidden",
 borderTopRightRadius: 5,
 borderTopLeftRadius: 5,
 backgroundColor: colors.white,
},

iamgeView: {
width: "100%",
height: 124,

},

panelDraggedShadow: {
 height: 50,
 alignItems: "center",
 justifyContent: "flex-end",
 position: 'absolute',
 borderWidth: null
 },

teeTimeCourseBorderView: {
borderColor: colors.whiteGrayWithAlpha,
width: globals.screenWidth * 0.10,
borderWidth: 2,
borderRadius: 5,
bottom: 7
},

Представление пользовательского интерфейса

 return (
        <Animated.View style={[(!this.state.isFullView) ? styles.minAnimatedView : styles.fullAnimatedView, styles.animatedView, {
            height: this.state.animatedHeight,
            minHeight: 200,
            maxHeight: (globals.iPhoneX) ? globals.screenHeight - 300 : globals.screenHeight - 200,
        }]} >
            <ScrollView
                keyboardShouldPersistTaps="handled"
                style={[styles.mainView,]}
                bounces={false}
                showsVerticalScrollIndicator={false}
                nestedScrollEnabled={true}
            >
                <View>
                        <View style={styles.imageBGView}>
                            <Image
                              style={styles.imageView}
                              source={images.noImagePlaceholder.noImage}
                            />
                        </View>
                    </View>
            </ScrollView>
            {this.renderDraggedView()}
        </Animated.View>
    )

renderPanelDraggeView() {
    return (
        <View
            {..._this._panResponder.panHandlers}
            style={[styles.panelDraggedShadow, { bottom: 0, width: '100%', alignSelf: 'center', backgroundColor: colors.transparent }]}
        >
            <TouchableOpacity style={styles.panelTouchView} />
        </View>
    );
}

Код PanResponder:

this._panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
        onPanResponderGrant: (evt, gestureState) => {
        },
        onPanResponderMove: (evt, gestureState) => {
            this.setState({ isKeyboardScrollEnable: false, isPanelMove: true })
            this.state.animatedHeight.setValue(gestureState.moveY)
        },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
            if (gestureState.dy > 0) {
                this.setState({ isKeyboardScrollEnable: true })
                LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
                Animated.timing(this.state.animatedHeight, {
                    toValue: globals.screenHeight - 100,
                    timing: 500
                }).start(() => {
                    this.setState({
                        isFullView: true
                    })
                })
            } else if (gestureState.dy < 0) {
                this.setState({ isKeyboardScrollEnable: true })
                LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

                Animated.timing(this.state.animatedHeight, {
                    toValue: this.state.viewHeight,
                    timing: 500
                }).start(() => {
                    this.setState({
                        isFullView: false
                    })
                })
            }
        },
        onPanResponderTerminate: (evt, gestureState) => {
        },
        onShouldBlockNativeResponder: (evt, gestureState) => {
            return true;
        },
    });

Я хочу показать увеличение тени моего вида, когда пользователь прокручивает вниз и когда пользователь должен прокрутить тень вверх светлый. Как я могу добиться этого, все ваши предложения заметны.