Is it possible to wrap pixel value with adaptive function?

[5468sun]

css

.footer{
height: 100px;
}

output

.footer{
height:pxtoDp(100)
}

and the pxtoDp function run at runtime.

[kristerkari]

Hi @5468sun!

There is no support for custom functions on runtime, but you can always propose such feature to be added.

What you can do now instead is use CSS for other styles and set the height with javascript:

<View className={styles.myClass} style={{ height: pxtoDp(100) }} />

[5468sun]

@kristerkari beside viewport unit, is there any way to do screen size adaption?
Im considering to use transform style to scale root container globally. I`m not sure this is a good solution. how do you do screen size adaption in your project?

here is the code. what do you think?

import {PixelRatio,Dimensions}} from 'react-native';
const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);
const px2dp = px=>PixelRatio.roundToNearestPixel(px);

let designSize = {width:750,height:1336};

let pxRatio = PixelRatio.get();
let {win_width,win_height} = Dimensions.get("window");

let width = dp2px(win_width);
let height = dp2px(win_height);

let design_scale = designSize.width/width;
height = height*design_scale

let scale = 1/pxRatio/design_scale;

const com = props=>(
                <View sytle={styles.container}>
                    <View style={{width:100,height:200,backgroundColor:"red"}}/>
                </View>)

const styles={
  container: {
        width:width,
        height:height,
        transform:[{translateX:-width*.5},
                    {translateY:-height*.5},
                    {scale:scale},
                    {translateX:width*.5},
                    {translateY:height*.5}]
    },
}

[kristerkari]

beside viewport unit, is there any way to do screen size adaption?

Good question, the goal for the this project is to bring a set of browser CSS features to React Native. That means that if you want to use only CSS, then viewport units and media queries are the available options to scale your UI.

Looking at the code you have, it seems like it would be a good idea to create a library from that and use Javascript to do the scaling.

I'm open for new features to be added to React Native CSS modules, but they should always have a matching Web feature.

how do you do screen size adaption in your project?

Usually a combination of viewport units and media queries is enough, sometimes I need to do something with Javascript too.

[5468sun]

Hi , @kristerkari
Im thinking writing a postCSS plugin to inject px2dp funciton in the CSS object. is it the right way to do？Or should i write a babel plugin，say react-native-classname-to-px2dp-style。

[kristerkari]

Im thinking writing a postCSS plugin to inject px2dp funciton in the CSS object. is it the right way to do？

That would not really work as PostCSS does not run at runtime, it's executed when the Metro packager is creating a bundle of your app.

Or should i write a babel plugin，say react-native-classname-to-px2dp-style。

You could do that, it could work the same way as https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style, but call your px2dp function instead.

It might be a good idea in the future to create an API which would allow the user to run their own library or functions during runtime.

[5468sun]

Im completely new to babel plugin. Now im comparing react-native-classname-to-style and react-native-classname-to-dynamic-style to see where is the dynamic funciton. Hopefully i can figure it out.
Thank you for your help.

[kristerkari]

Now im comparing react-native-classname-to-style and react-native-classname-to-dynamic-style to see where is the dynamic funciton. Hopefully i can figure it out.

It's these two things, another generates the require call, and the other one generates the .process() function call:
https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style/blob/master/index.js#L46-L61

[5468sun]

function viewportUnitsTransform(obj, matchObject) {
  const hasViewportUnits = "__viewportUnits" in obj;

  if (!hasViewportUnits) {
    return obj;
  }
  return transform(omitMemoized(obj, "__viewportUnits"), matchObject);
}

where do this '__viewportUnits' come from?

[5468sun]

never mind, i find it in css-to-react-native-transform.

[5468sun]

@kristerkari after days of researching, I finally add px2dp dynamic sizing function to style.
I write a css-px2dp-units-transform module base on your css-viewport-units-transform to define dynamic sizing function.
I also add some code in module css-to-react-native, css-to-react-native-transform and react-native-dynamic-style-processor. now, css-px2dp-units-transform is working.

But now this module only support design width 750. I dont know how to pass design width as param or like you said add an API to let user run there own sizing function.

here is the code.
css-px2dp-units-transform
css-to-react-native
css-to-react-native-transform
react-native-dynamic-style-processor