title: Is there something like Relativelayout for React Native?
body: <p>In my case, i want a fullscreen viewpager with a button on the top of it. It's easy in Android. </p>
  
  <p>Here is the sample code </p>
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="wrap_content"
      android:layout_height="match_parent &gt;
  
      &lt;android.support.v4.view.ViewPager
          android:layout_width="match_parent"
          android:layout_height="match_parent" /&gt;
      &lt;ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_centerHorizontal="true"
          android:layout_marginBottom="15dp"
          android:src="@drawable/button_help" /&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>but in rn , it seems that flexbox acts like Linearlayout in Android that siblings of parent cannot overlap each other. I don't think it make sense in mobile dev since multiple layers is common in mobile dev. I got a trick to solve the issue by using <em>position: absolute</em>. The drawback of the solution is that <em>alignItems</em> take no effect if using absolute position so you need to do another trick to make button center in horizon. Is there any better way? Anything like RelativeLayout would be supported in RN? I think Relativelayout is the very efficient way to do the layout of app dev.</p>
  
  <p>Here is my code of RN</p>
  
  <pre><code>render() {
          var {height, width} = Dimensions.get('window');
          console.log("rntest width " + width);
          var mywidth = width;
          return(
          &lt;View
            style={styles.viewPager}&gt;
              &lt;IndicatorViewPager
              style={styles.viewPager}
              initialPage={0}
              onPageScroll={onPageScroll}
              onPageSelected={onPageSelected}&gt;
                &lt;View
                  style={styles.viewPager}&gt;
                  &lt;Image
                    style={styles.viewPager}
                    source={require('./img/1.jpg')}
                    resizeMode='cover'/&gt;
                &lt;/View&gt;
                &lt;View
                  style={styles.viewPager}&gt;
                  &lt;Image
                    style={styles.viewPager}
                    source={require('./img/2.jpg')}
                    resizeMode='cover'/&gt;
                &lt;/View&gt;
                &lt;View
                  style={styles.viewPager}&gt;
                  &lt;Image
                    style={styles.viewPager}
                    source={require('./img/3.jpg')}
                    resizeMode='cover'/&gt;
                &lt;/View&gt;
              &lt;/IndicatorViewPager&gt;
              &lt;TouchableHighlight onPress={onPressButton} style={{width: mywidth, height: 103,  
                position:'absolute', left: 0, bottom: 0, alignItems: 'center'}}&gt;
                &lt;Image
                style={{width: 103, height: 103}}
                source={require('./img/voice_run.png')}
               /&gt;
              &lt;/TouchableHighlight&gt;
           }
          &lt;/View&gt;
          );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/c2z8d.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/c2z8d.jpg" alt="enter image description here"></a></p>