React Native - Style is not consistent across multiple devices - html

Question

I have learned react native and started developing a basic payment app . I am using flex to arrange elements inside the screen. Flex layout is consistent across all devices, but if I apply style to some components inside flux , it is not consistent across devices.
For example I have added a drop down component (Expiry Month) inside a view which is inside flex and added margin top as 25 px . If I open the app in Iphone 8 plus, it is displaying as expected, but if I open it in Iphone 8 it is touching the component above it (Even I tried changing the unit to percentage instead of pixels but still the same behavior) . I am not sure why the style is not responsive across multiple devices , can someone please guide me on how to make the styling responsive.
Please take a look at the below screenshots and code snippet . Thank you !!!
Iphone 8 Plus
Iphone 8
Code Snippet of the element
<View
style={{
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
items={CardExpiryMonth.getMonth()}
style={{
...pickerSelectStyles1,
placeholder: { color: "grey", fontSize: 15, fontFamily: myFont },
iconContainer: {
top: 35,
},
}}
placeholder={{
label: "Exp Month",
color: "green",
}}
placeholderTextColor="red"
useNativeAndroidPickerStyle={false}
textInputProps={{ underlineColor: "yellow" }}
Icon={() => {
return <Ionicons name="md-arrow-down" size={24} color="gray" />;
}}
/>
</View>
const pickerSelectStyles1 = StyleSheet.create({
inputIOS: {
fontSize: 16,
height: 50,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 4,
color: "black",
paddingRight: 30, // to ensure the text is never behind the icon
width: 130,
top: 25,
left: 8 }

Answer 1

I think the easiest way to do is give margin to your parent view. So the code would be.
<View
style={{
marginTop: 25, // For only iOS (Platform.OS === 'ios') ? 25 : 0,
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
// your code
/>
</View>
If you want to do changes in RNPickerSelect's style SO as you can check given example here you are using it wrong you are putting inputIOS into styles that become something like below code.
<RNPickerSelect
style={{ inputIOS: {...your style} }} // this is wrong
/>
inputIOS properties should be direct properties of style.
Also find one more thing that you used top: 25, for giving margin top top property use in case of absolute position. So, Please confirm RNPickerSelect using absolute position otherwise use marginTop: 25, instead.
Let me know If you have any more query.