Please see the attached images for reference I want output like an Android. I am using react-native 0.60.4, I want Groups and Opportunities circle in front. My current code is working fine on an Android device but not on the iOS device, Kindly help.
My Code is:
<View style={{ marginTop: 4,marginLeft: -30, zIndex: 0 }}><View style={{ flexDirection: "row", justifyContent: "center", }}><View onTouchStart={() => this.props.navigation.navigate("Profiles")} style={{ width: height / 3.8, height: height / 3.8, borderRadius: height / 2.3, backgroundColor: "rgba(147,144,198,1)", justifyContent: "center", opacity: 0.98 }}><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 50, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 38) }}> {Strings.lbl_profiles}</Text></View><View style={{ justifyContent: "flex-end" }}><View onTouchStart={ () => this.props.navigation.push("OpportunitiesForHome", { moduleStrings: this.state.appString, userid: this.state.user_id, isUserProfile: false, isFromHome: true }) } style={{ width: height / 5.8, height: height / 5.8, borderRadius: height / 3.3, backgroundColor: "rgba(71,76,125,1)", justifyContent: "center", marginLeft: -18, marginBottom: 35, opacity: 0.98, zIndex: 1 }}><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 50, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 47) }}> {Strings.lbl_opportunities}</Text></View></View></View><View style={{ flexDirection: "row", justifyContent: "center", }}><View style={{ marginTop: -55, width: height / 5.1, height: height / 5.1, borderRadius: height / 2.8, backgroundColor: "rgba(76,77,150,1)", justifyContent: "center", marginRight: -5, opacity: 0.98, zIndex: 1 }} onTouchStart={() => this.props.navigation.navigate("FindGroups")}><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 50, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 40) }}> {Strings.lbl_groups}</Text></View><View style={{ justifyContent: "flex-end" }}><View onTouchStart={() => this.props.navigation.navigate("Events") } style={{ marginTop: -80, width: height / 4.4, height: height / 4.4, borderRadius: height / 2.3, backgroundColor: "rgba(101,98,172,1)", justifyContent: "center", marginLeft: -5, opacity: 0.98, }}><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 50, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 40) }}> {Strings.lbl_events}</Text></View></View></View><View style={{ flexDirection: "row", justifyContent: "center" }}><View style={{ marginTop: -65, marginLeft: 145, width: height / 5.8, height: height / 5.8, borderRadius: height / 2.8, backgroundColor: "rgba(129,105,161,1)", justifyContent: "center", opacity: 0.98 }} onTouchStart={ () => this.props.navigation.push("Business") }><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 250, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 47) }}> {Strings.lbl_business}</Text></View><View style={{ marginTop: -68, marginLeft: 10, width: height / 7.2, height: height / 7.2, borderRadius: height / 2.8, backgroundColor: "rgba(150,150,202,1)", justifyContent: "center", opacity: 0.98 }} onTouchStart={ () => this.props.navigation.push("ForSale") }><Text style={{ ...CommonStyles.TellYourFriendButtonTextStyle(), borderRadius: 250, textAlign: "center", position: "absolute", alignSelf: "center", color: "white", fontSize: parseInt(height / 53) }}> {Strings.lbl_forsale}</Text></View></View></View>Screenshot on Android:
Screenshot on iOS: