I am learning react native for a few weeks and I made a screen and it looks good on my android emulator but when I look at it on my android phone somethings are out of place like icons or borders. I think It is about diffrent sizes of screens. Any idea how to fix this?
https://i.stack.imgur.com/rzhYn.jpg https://i.stack.imgur.com/mhU2R.png
Yes, It could be. You can avoid this in multiple ways.
Use dimensions, and get width and height based on the phone https://reactnative.dev/docs/dimensions or https://www.npmjs.com/package/react-native-responsive-screen
For font size you can use this: https://www.npmjs.com/package/react-native-responsive-fontsize
You have to make sure a few things while developing a component or when you style it:
flex or percentage width.In your example, what I can see is the icon is going over the boundary of the box. To give a simple example, if you want to show a text on the left and say image on the right, use styles like this:
<View style={{display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
<Text>Hi</Text>
<Image/>
</View>