-
-
Notifications
You must be signed in to change notification settings - Fork 32
/
autoGuidelinePlugin.ts
42 lines (33 loc) · 1.22 KB
/
autoGuidelinePlugin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import type { UnistylesPlugin } from 'react-native-unistyles'
import { PixelRatio } from 'react-native'
const REFERENCE_WIDTH = 300
const REFERENCE_HEIGHT = 800
export const autoGuidelinePlugin: UnistylesPlugin = {
name: 'autoGuideline',
onParsedStyle: (styleKey, style, runtime) => {
const pairs = Object
.entries(style)
.map(([key, value]) => {
if (styleKey.includes('unscaled')) {
return [key, value]
}
const isNumber = typeof value === 'number'
if (!isNumber || key === 'flex') {
return [key, value]
}
if (key === 'height') {
const percentage = value / REFERENCE_HEIGHT
return [
key,
PixelRatio.roundToNearestPixel(runtime.screen.height * percentage)
]
}
const percentage = value / REFERENCE_WIDTH
return [
key,
PixelRatio.roundToNearestPixel(runtime.screen.width * percentage)
]
})
return Object.fromEntries(pairs)
}
}