Usage with react-native-extended-stylesheet❓

[akshay kadam (a2k)]

I checked there exists something like ScaledSheet so how to use it with react-native-extended-stylesheet❓

[akshay kadam (a2k)]

One way is without using ScaledSheet but I wish there is something that gets passed down to ScaledSheet as a parameter so that it can replace RN StyleSheet.

Maybe something like Redux's connect -

connect(ScaledSheet)(EStyleSheet)

I am a big SASS fan so react-native-extended-stylesheet is a must for me. I use it in every RN project due to so many advantages like variables, theming, etc..

[Nir Hadassi]

Hey @deadcoder0904, thanks for your (1st!) issue.
Interesting question. I tried giving it some thought and came with a few conclusions.
First, I think it wouldn't be possible to set the return type at runtime since StyleSheets are usually static (that's also a big advantage of them).

An option I thought about is overloading the ScaledSheet.create method, that will accept a 2nd callback argument, something like ScaledSheet.create(styleObject, EStyleSheet.create), this way the styleObject will first go through the scaling and then through the EStyleSheet features.

Another option is to expose the scaleByAnnotation method from the ScaledSheet.js file, and use EStyleSheet like this:

const styles = EStyleSheet.create(scaleByAnnotation({
    container: {
        width: '100@s',
        height: '200@vs'
    }
}));

The problem is, on both methods you wouldn't be able to enjoy the features of both StyleSheets.
Both rely on predefined string, so for example you wouldn't be able to use EStyleSheets rem together with ScaledSheets @ms.
If I'd want ScaledSheet to fully work with EStyleSheet I'd have to adjust all the regexes to be aware of their features.

I think currently the best option would be using the scaling-utils directly on the EStyleSheet, something like this:

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const styles = EStyleSheet.create({
    text: {
        color: '$textColor',
        fontSize:  scale(1) + 'rem',
        width: '100% - ' + verticalScale(20)
    },
    '@media ios': {
        $fontSize: moderateScale(12),
    },
    '@media android': {
        $fontSize: moderateScale(16, 0.3),
    },
    $size: verticalScale(20),
    circle: {
        width: '$size',
        height: '$size',
        borderRadius: scale(10) + ' * $size'
    }
});

What do you think? Please share your thoughts, let me know what you think would be the best solution.

[akshay kadam (a2k)]

For now I think your solution of using scaling-utils would be the best.

What do you think @vitalets ❔ Any ideas or solutions ❓

[akshay kadam (a2k)]

Hey @nirsky, react-native-extended-stylesheet does scaling for tablets as well using CSS media-queries, REMs, scaling, etc.

So that makes this issue irrelevant bcz both solve the same problem.

Although if I use this library, then code will be clean & small. But I need Global variables & Themes & many other features so that's why I am using react-native-extended-stylesheet for current project.

Next project, I will use this one to see which is easier & better for all use cases.

Anyways I'll close the issue now it is irrelevant.