nativewind-size-matters

Nativewind utility belt can be used to scale the size of your application UI on devices of different sizes.

How to use

Install

yarn add nativewind-size-matters

npm install nativewind-size-matters

Modify metro.config.js

 const { getDefaultConfig } = require('expo/metro-config');
 const { withNativeWind } = require('nativewind/metro');
+const { transformerPath } = require('nativewind-size-matters/transformer');

 const config = getDefaultConfig(__dirname);

-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = withNativeWind(
+  { ...config, transformerPath },
+  { input: './global.css' }
+);

Set the size of your design

import { setDebug, initialUIScaleSize } from "nativewind-size-matters";

setDebug(__DEV__);

initialUIScaleSize(390, 884);

You should ensure that initialUIScaleSize is executed before import './global.css'

The easiest way is to look at the exmaple

Use px suffix

<View className="w-[100px] h-[100px]"></View>

Enjoy it!