Different Resolution Problem in Different Devices in React Native - react-native

Question

I am New to React Native and i am trying to build a app so for the testing purpose i am using Pixel 4 in Android Emulator so i designed my app as per the Pixel 4 resolution but when i checked my app in another device like Nexus 5 half of the content was not able to fit in the screen properly. So, how can i design the code which will set resolution automatically for different devices ?
I am attaching the images of problem as well:
On Pixel 4 (this one is perfect)
On Nexus 5
Here is what i tried
`import { View, Text, Image, StyleSheet, StatusBar } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button } from "react-native-paper";
import { useNavigation } from "#react-navigation/native";
`const SplashScreen = () => {
const navigation = useNavigation();
return (
<SafeAreaView
style={{
height: "auto",
}}
>
<StatusBar
translucent={true}
backgroundColor={"transparent"}
barStyle="dark-content"
/>
<View style={styles.container}>
<View className="w-[90%] flex items-center justify-center">
<Text
className="text-slate-500 text-2xl z-10"
style={{ fontFamily: "regular" }}
>
Taste of
</Text>
<Text
className="text-slate-500 text-2xl mt-3 z-10"
style={{ fontFamily: "regular" }}
>
Every Household
</Text>
</View>
<View>
<Image
source={require("../assets/logo.png")}
className="h-[380px] w-[380px] object-cover mt-5 ml-2"
/>
<View className="flex items-center justify-center -mt-5">
<Text
style={{
fontFamily: "rog",
fontSize: 23,
color: "#1D2044",
marginBottom: 10,
zIndex: 10,
}}
>
by
</Text>
<Text
style={{
fontFamily: "rog",
fontSize: 33,
color: "#1D2044",
zIndex: 10,
}}
>
imexture
</Text>
</View>
</View>
<View className="w-[90%] mt-24 z-10">
<Button
style={styles.radioButton}
onPress={() => navigation.navigate("Login")}
>
<Text
className="text-white text-xl tracking-widest"
style={{ fontFamily: "regular" }}
>
Let's Go
</Text>
</Button>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
height: "100%",
},
radioButton: {
backgroundColor: "#1D2044",
borderRadius: 10,
borderColor: "#1D2044",
padding: 8,
},
});
export default SplashScreen;`
`
and also i tried React-Native Dimensions but still the problem remains same

Answer 1

If you want to scroll to rest of content use ScrollView component. Just wrap content inside ScrollView. Here more info: https://reactnative.dev/docs/scrollview
If you want to make layout responsive for all devices (even tablets or whatever) try to start with getting familiar with flexbox layout for react native. Here you have documentation and examples https://reactnative.dev/docs/flexbox
You try to bring a lot of web css to react native. Things like className, zIndex, fontFamily: "rog" won't work.