In React Native, how do I put a view on top of another view, with part of it lying outside the bounds of the view behind?

Question

I'm trying to make a layout as per below with React Native.

How do I specify the position of B relative to A?

With iOS Interface Builder and autoconstraints, this can very explicitly be done and is a breeze. It's not so obvious how one might achieve this with React Native.

Answer 1

Add the following style to the "floating" view:

position: 'absolute' 

You may also need to add a top and left value for positioning.

Answer 2

The above solutions were not working for me. I solved it by creating a View with the same background colour as the parent and added negative margin to move the image upwards.

<ScrollView style={{ backgroundColor: 'blue' }}>   <View     style={{       width: '95%',       paddingLeft: '5%',       marginTop: 80,       height: 800,     }}>     <View style={{ backgroundColor: 'white' }}>        <Thumbnail square large source={{uri: uri}} style={{ marginTop: -30 }}/>       <Text>Some Text</Text>     </View>   </View> </ScrollView> 

and I got the following result.