CODEWITHSUNDEEP
react-native
Sandeep Mishra
Sandeep Mishra

Reputation: 684

How to overlap in react-native

Hi want to create UI in my react-native app like this

enter image description here

but I am getting like this

enter image description here

here is my code

<View style={{flex: 1,flexDirection:'row'}}>
            <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
                <View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
                    <Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
                </View>
                <View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
                    <Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
                </View>
            </View>
            <View style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
                <Item style={{backgroundColor:AppColors.colorPrimaryDark,
                    borderRadius:10,height:100, width:100, borderRadius:100/2}}></Item>
            </View>
            <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
                <View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
                    <Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
                </View>
                <View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
                    <Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
                </View>
            </View>
        </View>

Upvotes: 27

Views: 46257

Answers (1)

Lakshitha Ruwan
Lakshitha Ruwan

Reputation: 969

enter image description here

You have have to use position:'absolute' and put the circle element as the last element of the elements list so it comes to top (no need to use zIndex). also the container div must have styles for child elements to be centered. There won't be an issue since you can position that container div where ever you want.

Following code works as you expected. (I replaced 'Item' with 'View' and different colors. You can change those things back)

<View style={{flex: 1,flexDirection:'row', backgroundColor:'green', justifyContent:'center', alignItems:'center'}}>
                <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
                    <View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
                        <View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
                    </View>
                    <View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
                        <View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
                    </View>
                </View>

                <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
                    <View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
                        <View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
                    </View>
                    <View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
                        <View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
                    </View>
                </View>

                <View style={{justifyContent:'center',alignItems:'center',alignSelf:'center', position:'absolute'}}>
                    <View style={{backgroundColor:'blue',
                        borderRadius:10,height:100, width:100, borderRadius:100/2}}></View>
       </View>
</View>

Upvotes: 53

Related Questions