Question 34641 in React native Question posted in
The official React Native documentation can be found here.

What to do about diffrent screen sizes – React native

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search