CODEWITHSUNDEEP
androidreact-nativeuser-interfacescreen
Bhupesh Kumar
Bhupesh Kumar

Reputation: 256

How to make React native app responsive screen according to phone's screen size for both tablets or average android phone

I have a pin code screen in react native app and I want make it responsive/enlarge according to the phone or tablets size like I have a logo in screen or any other components are visible small in tablets but in normal simulators it is average I want to make it large according to tablet's size

Here are some screenshots

Phone's screen

Teblet's screen

I want to enlarge tablet's screen item as visible in an average phone

Upvotes: 0

Views: 2871

Answers (2)

Zernach
Zernach

Reputation: 41

You can use the screen's aspect ratio (height/width) to ensure the size of your buttons/icons/margins remain proportional on all screen sizes & device types (including tablets)

Use the following function and pass it a number to get a new number that considers the screen's aspect ratio:

export const responsiveSize = (number: number): number => {
  const currentScreen = Dimensions.get('window')
  return (currentScreen.height / currentScreen.width) * number
}

Upvotes: 0

Arjun bhati
Arjun bhati

Reputation: 306

Dimensions use for image and buttons click this link and read Documentation

Example

    Height: Dimensions.get('window').height / 2.5,
    Width: Dimensions.get('window').width / 2.5,

Upvotes: 1

Related Questions