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

CodePudding user response：

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

CodePudding user response：

You have to make sure a few things while developing a component or when you style it:

• Try to avoid fixed width/height or placement. Let the content grow the height of the box.
• Either use 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>