'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",
},
});
So on my iPhone it looks like that -

But on Android it not looks good at all - 
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 |
|---|

