React Native Scaler: Perfecting App Aesthetics Across Multiple Devices

React-Native-Scaler

react-native-scaler is a library that provides a set of scaling functions to help you make your React Native app responsive. It exports an initScalers function that returns four scaling functions: scaleWidth, scaleHeight, moderateScaleWidth, and moderateScaleHeight.

Installation

npm install react-native-scaler
Enter fullscreen mode
Exit fullscreen mode

OR

yarn add react-native-scaler
Enter fullscreen mode
Exit fullscreen mode

react-native-scaler

Initialization

Import the initScalers function from the react-native-scaler library and initialize it with the base width and height of your design layout.

import { initScalers } from 'react-native-scaler'; const { scaleWidth, scaleHeight, moderateScaleWidth, moderateScaleHeight } = initScalers(350, 680);
Enter fullscreen mode
Exit fullscreen mode

The numbers 350 and 680 represent the base width and height (in dp) of your design layout. You can adjust these values according to your needs.

You can also initialize without passing any arguments, in which case the default base width and height will be used.

const { scaleWidth, scaleHeight, moderateScaleWidth, moderateScaleHeight } = initScalers();
Enter fullscreen mode
Exit fullscreen mode

Additionally, you can use the shorthand notation for the scaling functions:

const { sw, sh, mw, mh } = initScalers();
Enter fullscreen mode
Exit fullscreen mode

Usage

After initialization, you can use the scaling functions in your components to scale dimensions according to the device’s screen size.

const styles = StyleSheet.create({ container: { width: sw(50), //same as scaleWidth(50) height: sh(100), //same as scaleHeight(100) },
});
Enter fullscreen mode
Exit fullscreen mode

You can also use the moderateScaleWidth and moderateScaleHeight functions with an optional factor. For example:

const styles = StyleSheet.create({ container: { width: mw(50, 0.3), height: mh(100, 0.7), },
});
Enter fullscreen mode
Exit fullscreen mode

Functions

The initScalers function returns four scaling functions:

  • scaleWidth (sw): Scales a value based on the device’s screen width.
  • scaleHeight (sh): Scales a value based on the device’s screen height.
  • moderateScaleWidth (mw): Provides moderate scaling based on the device’s screen width. It takes two parameters: size and an optional factor.
  • moderateScaleHeight (mh): Provides moderate scaling based on the device’s screen height. It takes two parameters: size and an optional factor.

Each of these functions takes a number as an argument and returns a scaled number.

ScaledSheet

The ScaledSheet is a special feature of react-native-scaler that allows you to automatically apply the scale functions in your stylesheets. It takes the same styles object as a regular StyleSheet, but with an optional annotation that applies the scale functions for you.

const { ScaledSheet, scaleWidth } = initScalers(); const styles = ScaledSheet.create({ container: { width: '50@sw', //same as scaleWidth(50) height: '100@sh', //same as scaleHeight(100) },
});
Enter fullscreen mode
Exit fullscreen mode

In the above example, 50@sw applies the scaleWidth function to the size 50, and 100@sh applies the scaleHeight function to the size 100.

You can also use @mw and @mh to apply moderateScaleWidth and moderateScaleHeight respectively, with a resize factor of 0.5. If you want to specify a different resize factor, you can do so by appending it after @mw or @mh, like [email protected].

Here is an example of using ScaledSheet with moderateScaleWidth and moderateScaleHeight with a resize factor:

const styles = ScaledSheet.create({ container: { padding: '[email protected]', // = moderateScaleWidth(10, 0.3) width: '50@mw', // = moderateScaleWidth(50) padding: '2@mw', // moderateScaleWidth(2) },
});
Enter fullscreen mode
Exit fullscreen mode

Best Practices

It’s recommended to initialize the scaler in a specific file or hook, so it can be reused across different components, instead of initializing it in every page. Here’s an example of how you can do this:

// scaler.js
import { initScalers } from 'react-native-scaler'; export const { sw, sh, mw, mh, ScaledSheet } = initScalers();
Enter fullscreen mode
Exit fullscreen mode

Then, in your component file, you can import the scaling functions and ScaledSheet from scaler.js:

// MyComponent.js
import { sw, sh, mw, mh, ScaledSheet } from './scaler'; const styles = ScaledSheet.create({ container: { width: '50@sw', height: '100@sh', },
});
Enter fullscreen mode
Exit fullscreen mode

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
What is web hosting ?.