CODEWITHSUNDEEP
user-interfacereact-nativeplatform
Shashika Virajh
Shashika Virajh

Reputation: 9487

react native input height based on mobile height

In my react native application, when I run it on a 4 inch screen, the InputText is much bigger than a 5 inch screen. What is the reason behind this? How can I avoid it?

Upvotes: 1

Views: 1838

Answers (3)

Manzoor Samad
Manzoor Samad

Reputation: 929

If your are looking for more precise level implementation..

I think you should implement some scaling mechanism to provide responsive components

import { Dimensions, PixelRatio, Platform } from 'react-native'
const { width, height } = Dimensions.get('window')

// Sizes based on Google Nexus 5 on genymotion
const guidelineBaseWidth = 360
const guidelineBaseHeight = 592

const scale = size => width / guidelineBaseWidth * size
const verticalScale = size => height / guidelineBaseHeight * size
const moderateScale = (size, factor = 0.5) => {
  if (Platform.OS === 'ios') {
    factor = PixelRatio.get()
  }

  return size + (scale(size) - size) * factor
}

now you can call the function

moderateScale()

whenever you want horizontal scaling

you can call the function

verticalScale()

whenever you want vertical scaling

eg:

{
...
width: moderateScale(200)
height : verticalScale(100)
}

this way you can ensure the responsiveness of your react application

Happy Coding !

Upvotes: 3

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

Since your app is always accessible by default and the UI adapts itself to the changing screen size, therefore, the fontSize change.

You can have a look at the allowFontScaling prop of the Text and decide what boolean do you want to keep.

By default it is true as mentioned here

getDefaultProps: function(): Object {
    return {
      allowFontScaling: true,
    };
  },

In order to disable the font scaling, you can set a global setting as

Text.defaultProps.allowFontScaling=false

in your highest level container.

Upvotes: 1

Nah
Nah

Reputation: 1768

Yes there is huge variety of screen sizes in Android. So we have to get phone dimension sometimes and assign calculated height/width, where required.

In ReactNative we can get the device window size by using:

var {height, width} = Dimensions.get('window');

https://facebook.github.io/react-native/docs/dimensions.html

Moreover, if you are using flex property, you can use it as well to adjust your UI elements height.

Upvotes: 3

Related Questions