Overlay view on top of list view?

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>
        );
    },
});