React native components are not the same from device to another - node.js

Question

so i've been doing react native for a while and after running my app on different devices all the components are not exactly what they are
this is an example :
import React from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#F5F5F8'
},
tinyLogo: {
width: 308,
height: 282,
resizeMode: 'contain',
alignSelf:'center',
top: 80
},
logo: {
width: 66,
height: 58,
},
text: {
textAlign: 'center',
color: "#2E3E5C",
fontSize: 22,
fontFamily: 'arial',
fontWeight: 'bold',
width: "100%",
marginTop:70
},
btnContainer: {
backgroundColor: "#CB5C17",
height: 60,
width:327,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
marginTop: 99
},
headline: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 100
}
});
const OnBoarding = ({ navigation }) => {
return (
<View style={ styles.container }>
<Image style={styles.tinyLogo}
source={require('../assets/TacosLogo.png')} />
<View style={styles.headline}>
<Text style={styles.text} >HOT AND FRENCH TACOS</Text>
<Text style={{ textAlign: 'center', color: "#9FA5C0", fontSize: 17, fontFamily: 'arial', fontWeight: 'bold', marginTop: 16, letterSpacing: 1 }} >The best taste</Text>
<TouchableOpacity activeOpacity={0.8} style={styles.btnContainer} onPress={() =>
navigation.navigate('Login')
}>
<Text style={{ color: 'white', fontSize: 15, fontWeight: 'bold', letterSpacing: 0.7, fontFamily: 'arial'}} >Commencer</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default OnBoarding;
this is what it looks like on my android device Xiaomi Redmi 9 (6.53') 2340 x 1080 pixels
and this is what it looks like on other android device Huawei y6 (6.09') 1560 x 720 pixels
they dont look the same at all , even the dimensions
is there any solution for this ?

Answer 1

Try avoid spacing using hardcoded values like,
marginTop: 100,
marginTop: 99,
marginBottom: 70,
because you want your app to run on different device sizes.
Try Depending more on flexbox space-between and other alignment properties, rather than hardcoding the values.
Read more about it from here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or wrap the content in ScrollView component depending on the use case you have.
There is also some libraries that may help you by getting responsive values rather than hardcoded ones.
like: https://github.com/NewBieBR/react-native-normalize
https://github.com/marudy/react-native-responsive-screen#readme