title: React-Native Animating Border Radius, Width and Sticky to Navigation Bar
body: <p>Need some help with animating the border radius of a 'share/favourite bar' as the user scrolls down the page. From a border radius of '25' to a border radius of '0'. </p>
  
  <p><a href="https://i.stack.imgur.com/LibmI.png" rel="nofollow noreferrer">How the share/favourite bar appears on screen before any scrolling is done. (notice the border radius and current width)</a></p>
  
  <p>Along with animating the border radius, the width has to stretch to the edge of the screen when the user has scrolled down far enough AND sticky to the nav bar. </p>
  
  <p><a href="https://i.stack.imgur.com/um43T.png" rel="nofollow noreferrer">After being scrolled</a></p>
  
  <p>Currently, I have tried implementing transforms such as translateX &amp;/or translateY, scaleX but they do not nearly have the same effect that I am attempting to achieve here.</p>
  
  <p>This is my code currently,</p>
  
  <pre><code>state = {
      scrollY: new Animated.Value(0),
  };
  
  render() {
  
      const { navigation } = this.props;
      const articleContent = navigation.getParam('itemContent', 'NO-CONTENT');
      const styledContent = articleContent.concat(css);
      const articleImage = navigation.getParam('itemImage', 'NO-IMAGE');
      const articleTitle = navigation.getParam('itemTitle','NO-NAME');
  
      return(
          &lt;SafeAreaView style={styles.articleRowContainer}&gt;
  
              &lt;StatusBar barStyle="light-content" /&gt;
  
              &lt;Animated.ScrollView
                  scrollEventThrottle={16}
                  onScroll={Animated.event(
                      [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
                      { useNativeDriver: true }
                  )}&gt;     
  
                  &lt;ImageOverlay source={{uri: articleImage}}
                  style={styles.articleImageStyling}
                  overlayAlpha={0}
                  contentPosition="bottom" /&gt;
  
                  &lt;Animated.View style={{
                      position: 'absolute',
                      top: 275,
                      left: 50,
                      right: 50,
                      height: 50,                     
                      borderRadius: 25,
                      backgroundColor: '#c09d6b',
                      //transform: [{scale: animationStyle }],
                      }}&gt;
  
                      &lt;Image source={require('./../../assets/images/1x/share_variant.png')} 
                      style={{
                          position: 'absolute',
                          top: 15,
                          right: 0,
                          bottom: 0,
                          left: 20,
                      }} /&gt;
  
                      &lt;Text
                          style={{
                              position: 'absolute',
                              top: 15,
                              right: 0,
                              bottom: 0,
                              left: 50,
                              fontFamily: 'quicksand-medium',
                              fontSize: 16,
                          }}
                      &gt;
                          SHARE
                      &lt;/Text&gt;
  
                      &lt;Image source={require('./../../assets/images/1x/favourite_border_black.png')} 
                      style={{
                          position: 'absolute',
                          top: 15,
                          right: 0,
                          bottom: 0,
                          left: 185,
                      }} /&gt;
  
                      &lt;Text style={{
                          position: 'absolute',
                          top: 15,
                          right: 0,
                          bottom: 0,
                          left: 215,
                          fontFamily: 'quicksand-medium',
                          fontSize: 16,
                      }}
                      &gt;
                          FAVOURITE
                      &lt;/Text&gt;
  
                  &lt;/Animated.View&gt;
  
  
  
                  &lt;View style={styles.articleTitleContainer}&gt;
  
                      &lt;Text
                          style={styles.articleTitle}
                      &gt;
                          {articleTitle}
                      &lt;/Text&gt;
  
                  &lt;/View&gt;
                  {/* Figure out how to add fonts to webpage */}
                  &lt;View style={styles.webViewContainer}&gt;                      
                      &lt;HTML html={styledContent} imagesMaxWidth={Dimensions.get('window').width}/&gt;
                  &lt;/View&gt;
              &lt;/Animated.ScrollView&gt;              
          &lt;/SafeAreaView&gt;
  )
  }
  </code></pre>
  
  <p>Thank You</p>