React Native Responsive Font Size

Question

I would like to ask how react native handle or do the responsive font  For example in iphone 4s i Have fontSize  14  while in iphone 6 I have fontSize  18

User · Answer

I managed to overcome this by doing the following.

Pick the font size you like for the current view you have (Make sure it looks good for the current device you are using in the simulator).
import { Dimensions } from 'react-native' and define the width outside of the component like so: let width = Dimensions.get('window').width;
Now console.log(width) and write it down. If your good looking font size is 15 and your width is 360 for example, then take 360 and divide by 15 ( = 24). This is going to be the important value that is going to adjust to different sizes.

Use this number in your styles object like so: textFontSize: { fontSize = width / 24 },...

Now you have a responsive fontSize.

User · Answer

adjustsFontSizeToFit and numberOfLines works for me  They adjust long email into 1 line    lt View gt     lt Text     numberOfLines  1      adjustsFontSizeToFit     style   textAlign  center  fontSize 30      gt       this props email     lt  Text gt   lt  View gt

User · Answer

We use a simple  straight-forward  scaling utils functions we wrote   import   Dimensions   from  react-native   const   width  height     Dimensions get  window       Guideline sizes are based on standard  5  screen mobile device const guidelineBaseWidth   350  const guidelineBaseHeight   680   const scale   size   gt  width   guidelineBaseWidth   size  const verticalScale   size   gt  height   guidelineBaseHeight   size  const moderateScale    size  factor   0 5    gt  size     scale size  - size     factor   export  scale  verticalScale  moderateScale     Saves you some time doing many ifs  You can read more about it on my blog post   Edit  I thought it might be helpful to extract these functions to their own npm package  I also included ScaledSheet in the package  which is an automatically scaled version of StyleSheet  You can find it here  react-native-size-matters

User · Answer

I recently ran into this problem and ended up using react-native-extended-stylesheet  You can set you rem value and additional size conditions based on screen size  As per the docs      component const styles   EStyleSheet create     text        fontSize   1 5rem       marginHorizontal   2rem             app entry let  height  width    Dimensions get  window    EStyleSheet build      rem  width  gt  340   18   16

User · Answer

I simply use the ratio of the screen size  which works fine for me   const   width  height     Dimensions get  window        Use iPhone6 as base size which is 375 x 667 const baseWidth   375  const baseHeight   667   const scaleWidth   width   baseWidth  const scaleHeight   height   baseHeight  const scale   Math min scaleWidth  scaleHeight    export const scaledSize        size    gt  Math ceil  size   scale      Test  const size         small  scaledSize 25       oneThird  scaledSize 125       fullScreen  scaledSize 375       console log size       iPhone 5s  small  22  oneThird  107  fullScreen  320     iPhone 6s  small  25  oneThird  125  fullScreen  375     iPhone 6s Plus  small  28  oneThird  138  fullScreen  414

User · Answer

Why not using PixelRatio getPixelSizeForLayoutSize    size in dp       it s just the same as pd units in Android

User · Answer

A slightly different approach worked for me  - const normalize    size  number   number   gt      const scale   screenWidth   320    const newSize   size   scale    let calculatedSize   Math round PixelRatio roundToNearestPixel newSize      if  PixelRatio get    lt  3      return calculatedSize - 0 5   return calculatedSize     Do refer Pixel Ratio as this allows you to better set up the function based on the device density

User · Answer

Need to use this way I have used this one and it s working fine   react-native-responsive-screen npm install react-native-responsive-screen --save  Just like I have a device 1080x1920  The vertical number we calculate from height   hp   height 200 200 1920 100   10 41  - height hp  10 41      The Horizontal number we calculate from width   wp   width 200 200 1080 100   18 51  - Width wp  18 51      It s working for all device

User · Answer

Because responsive units aren t available in react-native at the moment  I would say your best bet would be to detect the screen size and then use that to infer the device type and set the fontSize conditionally   You could write a module like    function fontSizer  screenWidth      if screenWidth  gt  400       return 18     else if screenWidth  gt  250       return 14     else        return 12          You ll just need to look up what the default width and height are for each device   If width and height are flipped when the device changes orientation you might be able to use aspect ratio instead or just figure out the lesser of the two dimensions to figure out width   This module or this one can help you find device dimensions or device type

User · Answer

We can use flex layout and use adjustsFontSizeToFit  true  for responsive font sizes And the text would adjust according to the size of the container         lt Text     adjustsFontSizeToFit     style  styles valueField  gt  value       lt  Text gt    But in styles you need to put a fontsize as well only then will adjustsFontSizeToFit work       valueField        flex  3      fontSize  48      marginBottom  5      color    00A398

User · Answer

You can use PixelRatio  for example   var React   require  react-native     var  StyleSheet  PixelRatio    React   var FONT BACK LABEL     18   if  PixelRatio get    lt   2      FONT BACK LABEL   14     var styles   StyleSheet create     label        fontSize  FONT BACK LABEL           Edit   Another example   import   Dimensions  Platform  PixelRatio   from  react-native    const     width  SCREEN WIDTH    height  SCREEN HEIGHT      Dimensions get  window        based on iphone 5s s scale const scale   SCREEN WIDTH   320   export function normalize size      const newSize   size   scale    if  Platform OS      ios         return Math round PixelRatio roundToNearestPixel newSize       else       return Math round PixelRatio roundToNearestPixel newSize   - 2         Usage   fontSize  normalize 24    you can go one step further by allowing sizes to be used on every  lt Text   gt  components by pre-defined sized   Example   const styles       mini        fontSize  normalize 12          small        fontSize  normalize 15          medium        fontSize  normalize 17          large        fontSize  normalize 20          xlarge        fontSize  normalize 24

User · Answer

Take a look at the library I wrote  https   github com tachyons-css react-native-style-tachyons  It allows you to specify a root-fontSize  rem  upon start  which you can make dependent of your PixelRatio or other device-characteristics   Then you get styles relative to your rem  not only fontSize  but paddings etc  as well    lt Text style   s f5  s pa2  s tc   gt       Something  lt  Text gt    Expanation    f5is always your base-fontsize pa2 gives you padding relative to your base-fontsize

User · Answer

import   Dimensions   from  react-native    const   width  fontScale     Dimensions get  quot window quot     const styles   StyleSheet create       fontSize  idleFontSize   fontScale       fontScale get scale as per your device

User · Answer

You can use something like this   var  height  width    Dimensions get  window    var textFontSize   width   0 03   inputText        color   TEXT COLOR PRIMARY      width   80        fontSize  textFontSize     Hope this helps without installing any third party libraries

[ios] React Native Responsive Font Size

Examples related to ios

Examples related to reactjs

Examples related to react-native