Overlay view on top of list view? - react-native

Question

I have an app with a full screen list view. I'd like to add a new view hierarchy on top (it would partially block the list view and float above). Sort of like Tweetbot, it will serve as a drop down message box that layers over the list view.
I can't figure out the right render code to achieve this. I was able to set position to absolute on both ListView and the floating view to layer them, but can't figure out how to expand the ListView to full screen (flex: 1) and have the floating box on top.

Answer 1

So I think I figured this out after composing a simple example for this post. The following works to float one view over another:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
} = React;
var styles = StyleSheet.create({
fullScreen: {
flex:1,
backgroundColor: 'red',
},
floatView: {
position: 'absolute',
width: 100,
height: 100,
top: 200,
left: 40,
backgroundColor: 'green',
},
parent: {
flex: 1,
}
});
var Example = React.createClass({
render: function() {
return (
<View style={styles.parent}>
<View style={styles.fullScreen}/>
<View style={styles.floatView}/>{/* WORKS FOR REGULAR VIEW */}
</View>
);
},
});
module.exports = Example;
What I was trying to do was float another custom class, so I replaced the render code w/ the following:
var Example = React.createClass({
render: function() {
return (
<View style={styles.parent}>
<View style={styles.fullScreen}/>
<DropDown style={styles.floatView}/>{/* DOES NOT WORK FOR CUSTOM VIEW */}
</View>
);
},
});
That did not work. By the way, my "DropDown" just returns a View with some Text in it. But doing the following does work:
var Example = React.createClass({
render: function() {
return (
<View style={styles.parent}>
<View style={styles.fullScreen}/>
<View style={styles.floatView}>{/* WORKS FOR CUSTOM VIEW */}
<DropDown />
</View>
</View>
);
},
});