react-native-scaleit/dist/useResponsive.js

A zero-dependency responsive scaling hook for React Native and Expo. Built-in support for tablets, TVs, and any screen size.

import { useMemo } from 'react';
import { Dimensions, PixelRatio, Platform } from 'react-native';
import { getDeviceType, getScalingFactor } from './core/scaleLogic';
const { width, height } = Dimensions.get('window');
const deviceType = getDeviceType(width, height);
const scalingFactor = getScalingFactor(deviceType);
export const useResponsive = () => {
    const scale = (size) => ((width / 375) * size) * scalingFactor;
    const verticalScale = (size) => ((height / 812) * size) * scalingFactor;
    const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
    const fontScale = (size) => PixelRatio.roundToNearestPixel(moderateScale(size));
    const platformSelect = (ios, android) => Platform.OS === 'ios' ? ios : android;
    return useMemo(() => ({
        scale,
        verticalScale,
        moderateScale,
        fontScale,
        screen: {
            width,
            height,
        },
        platformSelect,
        deviceType,
    }), []);
};