title: Absolute positioned Icon inside ScrollView moves along with other contents
body: <p>I want to fix an icon inside &lt;ScrollView at right bottom as shown below</p>
  <p><a href="https://i.stack.imgur.com/71M5h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/71M5h.png" alt="enter image description here" /></a></p>
  <p>But currently , the + icon is moving along with other contents. I want it to be fixed at that position even when other contents go down in the background. Current behaviour
  <a href="https://i.stack.imgur.com/pKVq6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pKVq6.png" alt="Current behaviour" /></a></p>
  <p>Tried solution :</p>
  <p>I used contentContainerStyle={{flexGrow :1}} in the ScrollView , still it doesnt work .
  It works when I add the icon outside ScrollView. But it doesn't give expected results which is shown below it cuts the scrolliew content right above the icon:</p>
  <p><a href="https://i.stack.imgur.com/NGHfO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGHfO.jpg" alt="enter image description here" /></a></p>
  <p>Can anyone suggest with good solution for this scenario?</p>
  <p>Code :</p>
  <pre><code>&lt;ScrollView&gt;
            {this.state.alertData &amp;&amp;
              this.state.alertData.map((item, index) =&gt; {
                return (
                  &lt;View&gt;
                    &lt;TouchableOpacity
                      style={styles.alertContainer}
                      onPress={() =&gt; this.onCardClick(index, true)}
                    &gt;
                      &lt;View
                        style={{
                          flexDirection: &quot;row&quot;,
                          justifyContent: &quot;space-between&quot;,
                        }}
                      &gt;
                        &lt;Text style={styles.title}&gt;{item.title}&lt;/Text&gt;
                        &lt;View
                          style={{
                            flexDirection: &quot;row&quot;,
                          }}
                        &gt;
                          &lt;Text style={styles.sideText}&gt;Il y a 2h&lt;/Text&gt;
                          {item.status &amp;&amp; (
                            &lt;Away style={{ marginLeft: 5, marginTop: 6 }} /&gt;
                          )}
                        &lt;/View&gt;
                      &lt;/View&gt;
                      &lt;View style={{ marginBottom: 10 }}&gt;
                        &lt;Text style={styles.primaryText}&gt;{item.primaryText}&lt;/Text&gt;
                        &lt;Text style={styles.secondaryText}&gt;
                          {item.secondaryText}
                        &lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View&gt;
                        &lt;Text style={styles.primaryText}&gt;Message&lt;/Text&gt;
                        &lt;Text style={styles.secondaryText}&gt;{item.message}&lt;/Text&gt;
                      &lt;/View&gt;
                      {this.state.selectedCard[index] &amp;&amp; (
                        &lt;Image
                          style={{ height: 250, width: 300 }}
                          // source={require(&quot;../../../assets/images/image6.jpeg&quot;)}
                          source={item.image}
                        /&gt;
                      )}
                    &lt;/TouchableOpacity&gt;
  
                    &lt;Close
                      style={{ top: 10, right: -5, position: &quot;absolute&quot; }}
                      onPress={() =&gt; this.toggleModal(index)}
                    /&gt;
                  &lt;/View&gt;
                );
              })}
  
            &lt;View
              style={{ alignItems: &quot;flex-end&quot;, marginTop: 20, marginBottom: 20 }}
            &gt;
              &lt;AddnewAlerts /&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
  </code></pre>