How to overlap in react-native

Question

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

but I am getting like this

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>

Answer 1

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>