title: How to animate expanding / collapsing a text preview in react native with Animated.View
body: <p>I'm creating a text component that I want to be 2 lines by default, and if the user taps on it, it will expand to the full length, and if the user taps on it again, it will collapse back to 2 lines.</p>
  
  <p>So far I have something like this in my return function:</p>
  
  <pre><code>&lt;TouchableWithoutFeedback
      onPress={() =&gt; {
        toggleExpansion();
      }}
  &gt;
    &lt;Animated.View style={[{ height: animationHeight }]}&gt;
      &lt;Text
        style={styles.textStyle}
        onLayout={event =&gt; setHeight(event.nativeEvent.layout.height)}
        numberOfLines={numberOfLines}
      &gt;
        {longText}
      &lt;/Text&gt;
    &lt;/Animated.View&gt;
  &lt;/TouchableWithoutFeedback&gt;
  </code></pre>
  
  <p>My state variables and toggleExpansion function look like this:</p>
  
  <pre><code>const [expanded, setExpanded] = useState(false);
  const [height, setHeight] = useState(0);
  const [numberOfLines, setNumberOfLines] = useState();
  
  const toggleExpansion = () =&gt; {
    setExpanded(!expanded);
    if (expanded) {
      setNumberOfLines(undefined);
    } else {
      setNumberOfLines(2);
    }
  };
  </code></pre>
  
  <p>So far this works to expand and collapse but I'm not sure how to set the Animated.timing function to animate it. I tried something like this:</p>
  
  <pre><code>const animationHeight = useRef(new Animated.Value(0)).current;
  
  useEffect(() =&gt; {
    Animated.timing(animationHeight, {
      duration: 1000,
      toValue: height,
      easing: Easing.linear
    }).start();
  }, [height]);
  </code></pre>
  
  <p>but it didn't quite work. It doesn't display the text at all, and when I try initializing the new Animated.Value to a bigger number than the 2 line height (like 50), the height always gets truncated to 16 no matter how many times I expand and collapse. What's the best way to animate expanding and collapsing the text?</p>