Auto Guideline/Dimensions Support

[ridvanaltun]

As you know, when developing applications for phones, we use guideline functions to ensure that the design looks the same on every phone. Instead of calling and using these functions in the code every time, we can automate them for specific styles in the library.

As an example, I will demonstrate the guideline functions I have used in my own developed projects:

import {
  heightPercentageToDP,
  widthPercentageToDP,
} from 'react-native-responsive-screen';

const REFERENCE_WIDTH = 390;
const REFERENCE_HEIGHT = 844;

export const hp = (val: number | string) => {
  if (typeof val === 'number') {
    return heightPercentageToDP((val / REFERENCE_HEIGHT) * 100 + '%');
  }

  return heightPercentageToDP(val);
};

export const wp = (val: number | string) => {
  if (typeof val === 'number') {
    return widthPercentageToDP((val / REFERENCE_WIDTH) * 100 + '%');
  }

  return widthPercentageToDP(val);
};

The usage is generally as follows:

import {StyleSheet} from 'react-native';

import {wp} from './utils';

// ..

const styles = StyleSheet.create({
  container: {
    margin: wp(24),
  }
});

I believe that with this library, we can rid ourselves of the hassle of using the guideline function every time.

There is made version of this idea here: https://github.com/luminos-software/react-native-auto-stylesheet

What do you think? @jpudysz

[jpudysz]

Hello @ridvanaltun 👋

To be honest, I have never used such functionality in any of my apps. Nevertheless, it does seem logical. I checked the linked repository, and in the README, there are many conditions. By default, it should scale your numeric values, but if you don’t want this, you must prevent it in various ways.

How do you view this functionality? Should we scale every number? How can we disable scaling for certain values?

I think the correct approach would be to introduce a plugin pipeline, so you can control the scaling or modify your styles as desired.

[ridvanaltun]

Hello @jpudysz 👋,

Thank you for your response. I appreciate your suggestion to introduce a plugin pipeline to the library. I think it's an excellent idea and can provide developers with the flexibility they need to customize the scaling behavior to fit their specific use cases.

[jpudysz]

Implemented!
Check out my tweet: https://x.com/jpudysz/status/1725479088545022307?s=20

[ridvanaltun]

Wow, I will check it out until next week, thanks!