react-native-responsive-number
Helps you to make responsive view by adjusting size of the elements. You can use this package for all devices. Also, can controll letterspacing. Just put the photoshop value with font size!
Before Start
If you don`t want the 'font scaling' function of the smartphone, just add this code in your index.js.
;TextdefaultProps = TextdefaultProps || {};TextdefaultPropsallowFontScaling = false;
Components
- responsiveNumber(function): Returns a number based on the size of the 'iPhone X or XS'. Maybe you will use this more than any of the functions below. Mostly, i use this function for reactive fontsizes, width, height.
;; ;
- responsiveLetterSpacing(function): Converts the method of the Photoshop to the react-native unit letter spacing. Parameter type is all numbers, but you can use numberable strings (ex: '102') . If you want css unit, you don`t have to use this. Just put pixel unit(ex: -1.1). It is what react-native does. Must provide font size like the example.
;; // responsiveLetterSpacing(letterSpacing, fontsize)StyleSheet;
- letterSpacing(function): Converts the method of the Photoshop to the react-native unit letter spacing. Parameter type is all numbers, but you can use numberable strings (ex: '102') . If you want css unit, you don`t have to use this. Just put pixel unit(ex: -1.1). It is what react-native does. **Its different from responsiveLetterSpacing. It is not for responsive Ui. **
;; // letterSpacing(letterSpacing, fontsize)StyleSheet;
- widthByPercent(function): Returns a number calculated with the percent of the device width.
;; ;
- widthByRatio(function): Returns a number calculated with the ratio of the device width.
;; ;
- heightByPercent: Returns a number calculated with the ratio of the device height.
;; ;
- heightByRatio(function): Returns a number calculated with the ratio of the device height.
;; ;
- deviceHeight(number): Returns the screen pixel height of the device
;; ;
- deviceWidth(number): Returns the screen pixel height of the device.
;; ;
- screenRatio(function): Returns the screen ratio.
;; console; //iPhone X : 2.16