Menu
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.
673
position position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
To add a transparent overlay in React Native, we can use the ImageBackground component. to add an ImageBackground with the source set to an object with the uri of the background image. And we add the backgroundImage style that sets opacity to 0.3 to add a transparent overlay over the image.
Add the following style to the "floating" view:
position: 'absolute' You may also need to add a top and left value for positioning.
129
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
