'React Native UI Challenge positioning elements

Today i want to do something like the picture below. I want to arrange the matches so that they form these numbers. But I'm not sure if the way I did it will be responsive on different phones? I don't think so ..

My code so far is

import { StatusBar } from "expo-status-bar";
import { Image, StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" hidden={true} />
      <Image
        style={{
          height: 80,
          width: 80,
          position: "absolute",
          top: "61%",
          left: "10%",
          transform: [{ rotate: "90deg" }],
        }}
        source={require("./assets/match.png")}
      />
      <Image
        style={{
          height: 80,
          width: 80,
          position: "absolute",
          top: "56.8%",
          left: "19.8%",
          transform: [{ rotate: "180deg" }],
        }}
        source={require("./assets/match.png")}
      />
      <Image
        style={{
          height: 80,
          width: 80,
          position: "absolute",
          top: "52%",
          left: "10%",
          transform: [{ rotate: "90deg" }],
        }}
        source={require("./assets/match.png")}
      />
      <Image
        style={{
          height: 80,
          width: 80,
          position: "absolute",
          top: "44%",
          left: "10%",
          transform: [{ rotate: "90deg" }],
        }}
        source={require("./assets/match.png")}
      />
      <Image
        style={{
          height: 80,
          width: 80,
          position: "absolute",
          top: "48%",
          left: "0%",
        }}
        source={require("./assets/match.png")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

image

So on my iPhone it looks like that - enter image description here

But on Android it not looks good at all - enter image description here

So I want to ask is there a way I can position the matches correctly or i should create image in photo editor and use it in app?

Sorry for my bad English!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source