React Native Responsive Font Size

React native responsive units

No, this is not automatically responsive. If we set padding:20, then the padding of that component stays on 20 no matter what phone we use. The same holds for font sizes, even though they are scaled depending on what pixel density we are dealing with.

A responsive design must be implemented by hand which could be done by using Dimensions as follows.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

We can now use a different padding depending on the width of our device.

padding: width > 320 ? 20 : 15

When it comes to general layouting, then flexbox takes care of responsiveness, e.g. imagine that we have three elements on the screen with flexDirection: 'row' and we set flex:1 for all of them, then the available space will be divided equally between them no matter what our screen width is. The same applies for height.

It might be advised to create a separate Fonts file which holds font sizes and similar constants in a common place, so we only need to change them once.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

export Fonts = {

    h1: width > 320 ? 18 : 15,
    h2: width > 320 ? 16 : 14,

   ...
}

The above takes care of responsive font sizes and we can use it in all other screens, e.g.

I am a header

Font size responsiveness in React Native

enter link description hereThe font size is automatically adjusted according to the size of the screen.
Try applying this method.

yarn add react-native-responsive-fontsize
npm install react-native-responsive-fontsize --save

Responsive font size for high resolutions not working in MUI 5

I have faced same issue. if you check the https://mui.com/customization/typography/#responsive-font-sizes there is chart which shows how responsiveFontSizes() displays. basically at lower screen resolutions higher fontsize shrinks faster compared to lower fontsize. so I skipped responsiveFontSizes() all together.

I wrote my custom typograhy tags with rem units w.r.t 1024px media breakpoint. the added breakpoint in index.css to increase the html font-size

Option1: lower to higher screen resolution

App.js

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import './index.css';

const theme = createTheme({
  typography: {
    h1: {
      fontWeight: 600,
      fontSize: '2.25rem',
      lineHeight: 2.75,
    },
    h2: {
      fontWeight: 600,
      fontSize: '1.625rem',
      lineHeight: 2.125, 
    },
    ...
  },
});

export default function MyApp() {
  return (
    
      Heading 1
      Heading 2
    
  );
}

index.css

@media only screen and (min-width: 1024px) {
    html {
    font-size: 100%;
    }
  };
  @media only screen and (min-width: 1280px) {
    html {
    font-size: 125%;
    }
  };
  @media only screen and (min-width: 1536px) {
    html {
    font-size: 150%;
    }
  };
  @media only screen and (min-width: 1920px) {
    html {
    font-size: 187.5%;
    }
  };

Options2: with responsiveFontSizes (higher to lower scrensizes) :
for this you have to set typography fontsize based on the highest resolution. check https://mui.com/customization/theming/#responsivefontsizes-theme-options-theme for other options and further tweaking.

import * as React from 'react';
import { createTheme, ThemeProvider, responsiveFontSizes } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const theme = createTheme({
  typography: {
    h1: { fontSize: '5rem' },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 425,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
      '3xl': 1920,
      '4xl': 2560,
      '5xl': 3200,
    },
  },
});

export default function MyApp() {
  return (
    
      
        Heading 1
      
      
        Heading 6
      
      
        Body 1
      
    
  );
}

Responsive UI in React Native

For responsive UI you can use react-native-responsive-screen and have the style designed considering the percentage of width and height

For responsive fontsize you can use react-native-responsive-fontsize and have a separate component as fonts.js and use it throughout the app.

fonts.js Component can be as below

import { Platform } from "react-native";
import { RFPercentage } from "react-native-responsive-fontsize";

export default fonts={
fontSmall: Platform.OS==='android'?  RFPercentage(1.8): RFPercentage(1.5),
fontMedium:  RFPercentage(1.8),
fontEntry:RFPercentage(2.0),
fontHeader:RFPercentage(2.1),
fontTV:RFPercentage(2.2),
fontNormal:RFPercentage(2.5),
fontLargeExtra:RFPercentage(2.7),
fontLarge:RFPercentage(3.0),
fontXLarge:RFPercentage(3.5),
fontXXLarge:RFPercentage(4.0),
fontXXLarge:RFPercentage(4.5),
};

The fonts component and the resposive UI in your components can be used as below:

import fonts from './fonts';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
viewStyle: {
width: wp('20%'),
marginTop: hp(‘4%’),
height: hp('4.5%'),
fontSize: fonts.fontSmall,
},

});

React native size, does it scale automatically depending on the size of device?

You can use some libs to help with this, like: react-native-responsive-fontsize

Just config the width/height of your component with RFValue as:

import { RFValue } from "react-native-responsive-fontsize"

export function Welcome(){
return (
    
       Hello    
    
)}

const styles = StyleSheet.create({
      welcome: {
        fontSize: RFValue(24) 
        textAlign: "center",
        margin: RFValue(10),
      },
});

You don't need to use this on every component or measure/size

How to keep text on Same position while animating it's Font Size? React Native

There are a couple of options.

1. Easy: Put your text in a container with justifyContent: 'center', alignItems: 'center'

2. More annoying: add negative marginTop and marginLeft to your animated text properties, but multiply that amount by the change in fontSize, multiplied by PixelRatio/fontScale.

Hopefully the first option works for you; if not, let me know if you need more info on the second.

---

Related Topics