title: how to animate a text flow on top the sectionView
body: <p>use: React Native:0.57.1    section list, view,text,animate </p>
  
  <p>I want to animate a text in front of the section View when click on one item of section view.
  it suppose to flow a text on top of screen from where I click on the list item to the bottom of screen.</p>
  
  <p>the issue now is that the text looks like animated under the list .</p>
  
  <p>anyone can help is appreciate.</p>
  
  <p>code :</p>
  
  <pre><code>import { Text, Button } from "react-native";
  import React, { Component } from "react";
  import { Animated, Dimensions, Easing, Image, SectionList, StyleSheet, TouchableOpacity, View } from "react-native";
  // import console = require("console");
  // import RegularPicker from "../picker/hkjcPicker";
  // import SearchBar from 'react-native-material-design-searchbar';
  // import CalendarStrip from 'react-native-calendar-strip';
  // import styles from "./styles";
  const matchData = require("./matchlist.json");
  
  const matches = matchData.dat;
  
  class CustomButton extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        selected: this.props.selected,
        bg: true,
        itemCount: 0,
        bounceValue: new Animated.Value(1.0),
        scaleValue: new Animated.Value(1),
        x: new Animated.Value(0),
        y: new Animated.Value(0),
        rotateZ: new Animated.Value(0),
        isDisplayed: false,
        px: 0,
        // selected: false,
        // { selected ,onPressValue} :this.props,  
        py: 0
      };
    }
  
  
  
    // componentDidMount() {
    //   const { selected } = this.props;
    //   this.setState({
    //     selected,   
    //   }); 
    // }
  
    scaleAnimation() {
      Animated.sequence([
        Animated.timing(this.state.bounceValue, {
          toValue: 0.6,
          duration: 100
        }),
        Animated.spring(this.state.bounceValue, {
          toValue: 1.0,
          friction: 3,
          tension: 40
        }),
      ]).start();
    }
  
  
  
    onClickAddShoppingCart(x, y) { 
  
      this.setState(
        {
          isDisplayed: true,
          selected: !this.state.selected
        },
        //alert(event.native)
        () =&gt; {
          // NativeModules.UIManager.measure(e.target, (x, y, width, height, pageX, pageY) =&gt; {
          //   startX = pageX;
          //   startY = pageY;
          // });
  
  
  
          // let pageX=this.props.onLayout1;
          let startX = 20; // 
          let startY = 50; //  
          let endX = 2; //    
          let endY = 800;  //  
  
  
          // let endX = screenWidth / 2 - 32; // 
          // let endY = screenHeight - 160;  / 
  
          this.state.x.setValue(startX);
          this.state.y.setValue(startY);
          this.state.rotateZ.setValue(0);
          this.state.scaleValue.setValue(1);
  
          let duration = 3000;
          let endRotateZ = 720;
  
          Animated.parallel([
            Animated.timing(this.state.x, {
              toValue: endX,
              duration: duration,
              easing: Easing.linear
            }),
            Animated.timing(this.state.y, {
              toValue: endY,
              duration: duration,
              easing: Easing.cubic
            }),
            // Animated.timing(this.state.rotateZ, {
            //   toValue: endRotateZ,
            //   duration: duration,
            //   easing: Easing.linear
            // }),
            // Animated.timing(this.state.scaleValue, {
            //   toValue: 0.3,
            //   duration: duration,  
            //   easing: Easing.cubic  
            // }),
          ]).start(() =&gt; {
            this.setState(
              {
  
                isDisplayed: false,
                itemCount: ++this.state.itemCount,
                bg: !this.state.bg,
              }, () =&gt; {
                this.scaleAnimation();
              }
            );
          });
        }
      );
    }
  
    render() {
      const { title } = this.props;
      const { selected } = this.state;
      //  console.warn("pxy: ",pxy[0]);             
      return (
        &lt;View style={{ justifyContent: "center", backgroundColor: "#ffd505" }}&gt;
          &lt;Text style={{ zIndex: -6, fontSize: 12.5, alignSelf: "center", textAlign: "center", textAlignVertical: "center" }} onPress={(event) =&gt; this.onClickAddShoppingCart(event.nativeEvent.pageX, event.nativeEvent.pageY)}&gt;
            {title} &lt;/Text&gt;
            {/* Animated window */}
          {
            this.state.isDisplayed ?
              &lt;Animated.View style={{
                position: "absolute",
                left: this.state.x,
                top: this.state.y,
                transform: [
                  {
                    rotateZ: this.state.rotateZ.interpolate({
                      inputRange: [0, 360],
                      outputRange: ["0deg", "360deg"]
                    })
                  },
                  { scale: this.state.scaleValue }
                ],
                zIndex: -1,
              }}&gt;
                &lt;View style={{ zIndex: 99, backgroundColor: "red", height: 43, width: 45, justifyContent: "center", alignItems: "center" }}&gt;
                  &lt;Text style={{ zIndex: 990, height: 40, fontSize: 12.5, textAlignVertical: "center" }}&gt;{this.state.rate_num}&lt;/Text&gt;
                &lt;/View&gt;
              &lt;/Animated.View&gt; : null
          }
        &lt;/View&gt;
  
  
      );
    }
  }
  
  export default class MatchList extends Component {
  
    matchHeader(matches) {
      return (
        &lt;View&gt;
          &lt;Text&gt;{matches.section.title}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
    matchRow(matches) {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.titleLine} &gt;
            &lt;Text style={styles.titleFront}&gt;{matches.item.div}&lt;/Text&gt;
            &lt;Text style={styles.dataItem}&gt;{matches.item.rate1_title}&lt;/Text&gt;
            &lt;Text style={styles.dataItem}&gt;{matches.item.rate2_title}&lt;/Text&gt;
            &lt;Text style={styles.dataItem}&gt;{matches.item.rate3_title}&lt;/Text&gt;
            &lt;Text style={styles.dataItem}&gt;&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.rowWhole}&gt;
            &lt;TouchableOpacity activeOpacity={0.5} style={styles.rowFrontTouch}&gt;
              &lt;View style={styles.rowFront}&gt;
                &lt;Text&gt;{matches.item.team1}&lt;/Text&gt;
                &lt;Text&gt;{matches.item.team2}&lt;/Text&gt;
                &lt;Text&gt;{matches.item.timing + " " + matches.item.pool}&lt;/Text&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.rowMid}&gt;
                &lt;Text style={{ marginTop: 2, borderBottomColor: "#2b2b2b", borderBottomWidth: 1, backgroundColor: "#ffd505" }}&gt;{matches.item.score1}&lt;/Text&gt;
                &lt;Text style={{ marginBottom: 2, backgroundColor: "#ffd505" }}&gt;{matches.item.score2}&lt;/Text&gt;
                &lt;Text&gt;       &lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity&gt;
              &lt;CustomButton title={matches.item.rate1_num} selected={false} /&gt;
  
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity&gt;
              &lt;CustomButton title={matches.item.rate2_num} selected={false} /&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity&gt;
              &lt;CustomButton title={matches.item.rate3_num} selected={false} /&gt;
            &lt;/TouchableOpacity&gt; 
            &lt;TouchableOpacity activeOpacity={0.5} style={styles.rowImg}&gt;
              {/* &lt;Image source={require('../../../assets/xm.png')} /&gt; */}
              &lt;Text style={{ color: "green" }}&gt;Cat&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
  
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
    listHeader() {
      return (
        &lt;TouchableOpacity activeOpacity={0.5} style={{ alignItems: "center", }}&gt;
          &lt;Text style={{ color: "green" }}&gt;FootballMatch&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
    render() {
      return (
        &lt;View style={{ zIndex:-11 }}&gt;
          &lt;SectionList sections={matches}                            
          contentContainerStyle={{  zIndex:-11  }}
            keyExtractor={(item, index) =&gt; index}
            renderSectionHeader={this.matchHeader}   
            renderItem={this.matchRow}                
            // ListHeaderComponent={this.listHeader}    
            stickySectionHeadersEnabled={true}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
  
  
  const itemSize = 80;
  const screenWidth = Dimensions.get("window").width;
  const screenHeight = Dimensions.get("window").height;
  var bg = "#FF9800";
  
  
  const styles = StyleSheet.create({
    // container: {
    //   flex: 1,
    //   backgroundColor: '#f0f0f0'
    // },
    cellContainer: {
      backgroundColor: "white",
      padding: 10,
      flexDirection: "row",
      alignItems: "center"
    },
    foodView: {
      backgroundColor: "white",
      borderRadius: 10,
      borderWidth: 1,
      borderColor: "#dcdcdc",
      alignItems: "center",
      justifyContent: "center",
      width: itemSize,
      height: itemSize,
    },
    infoView: {
      flex: 1,
      marginLeft: 10,
      marginRight: 10,
    },
    title: {
      fontSize: 16,
      color: "#333",
    },
    price: {
      fontSize: 24,
      fontWeight: "bold",
      color: "#f52328",
      marginTop: 20
    },
    shoppingCart: {
      backgroundColor: "white",
      width: 64,
      height: 64,
      borderRadius: 35,
      shadowRadius: 8,
      shadowColor: "#aaaaaa",
      shadowOpacity: 0.6,
      shadowOffset: { width: 0, height: 3 },
      zIndex: 100,
      position: "absolute",
      left: screenWidth / 2 - 32,
      bottom: 20,
      elevation: 6,
    },
    shoppingButton: {
      width: 64,
      height: 64,
      alignItems: "center",
      justifyContent: "center",
    },
    numView: {
      backgroundColor: "#ff9800",
      height: 20,
      minWidth: 20,
      maxWidth: 38,
      paddingLeft: 5,
      paddingRight: 5,
      borderRadius: 10,
      alignItems: "center",
      justifyContent: "center",
      elevation: 4,
      shadowRadius: 4,
      shadowColor: "#aaaaaa",
      shadowOpacity: 0.6,
      shadowOffset: { width: 0, height: 3 },
    },
    itemCount: {
      fontSize: 13,
      color: "white",
      textAlign: "center",
    },
    addCartButton: {
      alignItems: "center",
      justifyContent: "center",
      width: 96,
      height: 32,
      borderRadius: 16,
      // backgroundColor: bg,
      elevation: 4,
      shadowRadius: 4,
      shadowColor: "#aaaaaa",
      shadowOpacity: 0.6,
      shadowOffset: { width: 3, height: 3 },
    },
    addCartText: {
      fontSize: 14,
      color: "white"
    },
  
    container: {
      flex: 1,
      zIndex: -8
    },
    sectionHeader: {
      paddingTop: 2,
      paddingLeft: 10,
      paddingRight: 10,
      paddingBottom: 2,
      fontSize: 14,
      color: "white",
      fontWeight: "bold",
      backgroundColor: "#3f3f3f",
    },
    item: {
      paddingLeft: 10,
      height: 24,
      fontSize: 16,
    },
    rowWhole: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      alignContent: "center",
    },
    rowTeam: {
      flex: 9,
      flexDirection: "row",
    },
    rowFront: {
      flex: 9,
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "flex-start",
      alignContent: "center",
    },
    rowFrontTouch: {
      flex: 4.5,
      flexDirection: "row",
    },
    rowMid: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center"
      // backgroundColor:"green"
    },
  
    rowRate: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center",
      // backgroundColor: "#d6f7e7" ,  
      marginRight: 3
      // resizeMode:"stretch"
    },
  
    rowImg: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center",
      // backgroundColor: "#d6f7e7" ,  marginRight:3
      // resizeMode:"stretch"
    },
    rowLast: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "flex-start",
      alignContent: "center",
    },
    titleLine: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      alignContent: "center",
      backgroundColor: "#3f3f3f",
    },
    titleFront: { flex: 4, color: "white" },
    rowTiming: {
      flex: 1,
      flexDirection: "row",
      marginRight: 5,
    },
    dataItem: { flex: 1, textAlign: "center", color: "white" }
  });
  </code></pre>