Hi guys I have a question about screen design in React Native.
I am building an App with Expo. It runs on my AS Emulator - Nexus 5x. When I take my real device - Samsung S9 the pages look different for example text on the left and right is cut away because the screen seems to be to small. However both devices have the same width kinda 72mm and 69mm but S9 is curved. How do you guys keep your apps responsive?
I already did some componentWillMount checks where I make the fields height larger if the screen is to high. Should I do the same for the width? Or should I maybe use react-native-responsive-screen package for example? If there are some more experienced RN-Devs please give me a quick tip on how you actually manage this.
Edit :: Is this code below actually a good practice? Its my StyleSheet and I tried to work with absolute position - wich looks nice on the Emulator but I guess it's not good practice.. Should I rewrite the styles?
const styles = StyleSheet.create({ container: { justifyContent: "center", alignItems: "center" }, headerText: { fontSize: 30, color: "black" }, DateContainer: { marginTop: 10, marginBottom: 10 }, DateText: { position: "absolute", fontSize: 16, color: "black", top: 14, left: -100 }, phaseButton: { position: "absolute", top: -42, right: -95, height: 30, backgroundColor: "#a51717", borderRadius: 45 }, checkbox: { position: "absolute", top: -5, right: -180, height: 30 }, ZeitText: { position: "absolute", fontSize: 16, color: "black", top: 12, left: -199.5 }, ZeitInput: { position: "absolute", left: -150, top: 8, width: 100, height: 35, borderWidth: 1, textAlign: "center" }, checkText: { position: "absolute", top: 12, right: -115, height: 30, color: "black" }, button1: { position: "absolute", left: -120, top: 8, height: 30, marginHorizontal: 20, backgroundColor: "#a51717" }, button2: { position: "absolute", left: -60, top: 8, height: 30, backgroundColor: "#a51717" }});
~Ty Faded.