Add screen size to callback function of createStyleSheet

[ngocle2497]

I think this will useful when someone want to create box with 30% screen width, ...
ex:

const stylesheet = createStyleSheet((theme, screenSize) => ({
    box: {
       width: (screenSize.width -32) / 3,
       height: (screenSize.width -32) / 3,
       justifyContent: 'center',
       alignItems: 'center',
       flexDirection: {
           xs: 'row',
           sm: 'column',
           ':w[800]': 'row'
       },
       backgroundColor: theme.colors.background
    },
}))

[jpudysz]

Hello @masonle2x2 , thank you for the proposal and your quick PR.

Although I understand what you're trying to achieve, I am against this change for the following reasons:

• On mobile, the window width and window height are static (unless you change the screen orientation).
• They are easily accessible via the DimensionsAPI from React Native.
• I see no benefit in injecting screenSize versus accessing it from React Native.

Here is a sample of my code from a real-world project:

import { Dimensions } from 'react-native'

const WINDOW_WIDTH = Dimensions.get('window').width
const WINDOW_HEIGHT = Dimensions.get('window').height

export enum Measurements {
   WindowWidth = WINDOW_WIDTH as number,
   WindowHeight = WINDOW_HEIGHT as number
}

const stylesheet = createStyleSheet(theme => ({
     box: {
       width: (Measurements.WindowWidth - 32) / 3,
       height: (Measurements.WindowHeight - 32) / 3,
       backgroundColor: theme.colors.background
    }
})

IIf you are building an app that allows horizontal layout, then it makes sense. However, I would like to postpone it for now for version 2.0. You will be able to access dimensions like this:

const stylesheet = createStyleSheet(theme => ({
     box: {
       width: (UnistylesRuntime.screenWidth - 32) / 3,
       height: (UnistylesRuntime.screenHeight - 32) / 3,
       backgroundColor: theme.colors.background
    }
})

It will be auto-updated on layout change by C++.

[ngocle2497]

Yes, my case will be happening when screen rotated. So, if v2 included change screen size, it so cool. Thanks

[jpudysz]

Makes sense then! 💪