Is there something like Relativelayout for React Native? - layout

Question

In my case, i want a fullscreen viewpager with a button on the top of it. It's easy in Android.
Here is the sample code
<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 >
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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" />
</RelativeLayout>
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 position: absolute. The drawback of the solution is that alignItems 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.
Here is my code of RN
render() {
var {height, width} = Dimensions.get('window');
console.log("rntest width " + width);
var mywidth = width;
return(
<View
style={styles.viewPager}>
<IndicatorViewPager
style={styles.viewPager}
initialPage={0}
onPageScroll={onPageScroll}
onPageSelected={onPageSelected}>
<View
style={styles.viewPager}>
<Image
style={styles.viewPager}
source={require('./img/1.jpg')}
resizeMode='cover'/>
</View>
<View
style={styles.viewPager}>
<Image
style={styles.viewPager}
source={require('./img/2.jpg')}
resizeMode='cover'/>
</View>
<View
style={styles.viewPager}>
<Image
style={styles.viewPager}
source={require('./img/3.jpg')}
resizeMode='cover'/>
</View>
</IndicatorViewPager>
<TouchableHighlight onPress={onPressButton} style={{width: mywidth, height: 103,
position:'absolute', left: 0, bottom: 0, alignItems: 'center'}}>
<Image
style={{width: 103, height: 103}}
source={require('./img/voice_run.png')}
/>
</TouchableHighlight>
}
</View>
);

Answer 1

position: absolute is not trick. It is normal solution. Think about absolute views as about another layers. So alignItems defined in previous layer will not affect current layer childs.
You do not need to use Dimensions. You can simply add right: 0 to TouchableHighlight if you need full width button.
Flexbox is not ideal but it is simple and powerful enough. I don't think something else will be introduced soon.