change text size according to screen react native 1

change text size according to screen react native

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 actuatedNormalize(size) {
  const newSize = size * scale 
   if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
   } else {
     return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
   }
  }

Here is what the above code is Doing:
1. We are getting the screen width and height of the device.
2. We are using the screen width to calculate the scale.
3. We are using the scale to calculate the new size of the font.
4. We are rounding the new size to the nearest pixel.
5. We are subtracting 2 from the new size if the device is Android.

Now, we can use the actuatedNormalize function to set the font size of the Text component.

import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
import { actuatedNormalize } from ‘./actuatedNormalize’;

export default class App extends Component {
render() {
return (


Welcome to React Native!


);
}
}

Similar Posts