Can't animate the panel using animatedValue prop

[djwillcaine]

Issue Description

I've been trying to use the animatedValue prop to create an animation for the panel. I have a panel showing a small section at the bottom of the screen that expands upwards to show more detail when tapped/swiped up. I would like the panel to do a little peek up and back down again when the user first navigates to the screen though, to indicate that the panel is there and can be interacted with.

I've had a look through the demo app but I don't really see the animatedValue prop actually being used for anything. Have I misunderstood how it was intended to be used?

Steps to Reproduce / Code Snippets / Screenshots

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, TouchableWithoutFeedback, Animated } from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';

const Example = props => {
  const [minHeight, setMinHeight] = useState(null);
  const [maxHeight, setMaxHeight] = useState(null);
  const [animatedValue, setAnimatedValue] = useState(new Animated.Value(0));
  const [animationDone, setAnimationDone] = useState(false);

  const onFooterLayout = event => {
    setMinHeight(event.nativeEvent.layout.height);
  }

  const onContainerLayout = event => {
    setMaxHeight(event.nativeEvent.layout.height);
  };

  useEffect(() => {
    if (minHeight && !animationDone) {
      setAnimationDone(true);
      Animated.timing(animatedValue, {
        toValue: minHeight + 50,
        duration: 1000,
        useNativeDriver: true
      }).start();
    }
  });
  
  return (
    <SlidingUpPanel
      ref={c => this._panel = c}
      animatedValue={animatedValue}
      draggableRange={maxHeight ? {top: maxHeight, bottom: minHeight} : {top: 0, bottom: 0}}
      snappingPoints={maxHeight ? [minHeight, maxHeight] : [0, 0]}>

      <View onLayout={onContainerLayout}>

        <TouchableWithoutFeedback onPress={() => this._panel.show()}>
          <View onLayout={onFooterLayout}>
            <Text>This is always visible.</Text>
          </View>
        </TouchableWithoutFeedback>

        <View>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
          <Text>This is only visible when the panel is expanded.</Text>
        </View>

      </View>

    </SlidingUpPanel>
  );
};

export default Example;

---

Environment

• Version: 2.4.3
• React Native version: 0.63.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Samsung Galaxy S10, Android 10.0