react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -589
- package/lib/commonjs/createUnistyles.js +6 -13
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/hooks/useDimensions.js +1 -10
- package/lib/commonjs/hooks/useDimensions.js.map +1 -1
- package/lib/commonjs/utils/index.js +43 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/module/createUnistyles.js +7 -14
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/hooks/useDimensions.js +1 -10
- package/lib/module/hooks/useDimensions.js.map +1 -1
- package/lib/module/utils/index.js +2 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +2 -5
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDimensions.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +7 -1
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +2 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/package.json +13 -10
- package/src/__tests__/createUnistyles.spec.tsx +192 -0
- package/src/createUnistyles.ts +8 -16
- package/src/hooks/useDimensions.ts +1 -8
- package/src/types/mediaQueries.ts +8 -67
- package/src/utils/index.ts +9 -1
- package/lib/commonjs/utils/breakpoints.spec.js +0 -154
- package/lib/commonjs/utils/breakpoints.spec.js.map +0 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +0 -220
- package/lib/commonjs/utils/mediaQueries.spec.js.map +0 -1
- package/lib/commonjs/utils/styles.spec.js +0 -174
- package/lib/commonjs/utils/styles.spec.js.map +0 -1
- package/lib/module/utils/breakpoints.spec.js +0 -152
- package/lib/module/utils/breakpoints.spec.js.map +0 -1
- package/lib/module/utils/mediaQueries.spec.js +0 -218
- package/lib/module/utils/mediaQueries.spec.js.map +0 -1
- package/lib/module/utils/styles.spec.js +0 -172
- package/lib/module/utils/styles.spec.js.map +0 -1
- package/lib/typescript/src/utils/breakpoints.spec.d.ts +0 -2
- package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts +0 -2
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/styles.spec.d.ts +0 -2
- package/lib/typescript/src/utils/styles.spec.d.ts.map +0 -1
package/README.md
CHANGED
@@ -6,6 +6,11 @@
|
|
6
6
|
<img alt="react-native-unistyles" src="assets/uni-light.svg">
|
7
7
|
</picture>
|
8
8
|
|
9
|
+

|
10
|
+
[](https://www.npmjs.com/package/react-native-unistyles)
|
11
|
+

|
12
|
+
[](https://opensource.org/licenses/MIT)
|
13
|
+
|
9
14
|
## Features
|
10
15
|
- ⚡ Blazing fast, adds around ~3ms on top of StyleSheet*
|
11
16
|
- 🎳 Share up to 100% of your styles across platforms in monorepo
|
@@ -18,602 +23,20 @@
|
|
18
23
|
|
19
24
|
*-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
|
20
25
|
|
21
|
-
##
|
22
|
-
|
23
|
-
This project is currently in its beta phase. While it hasn't reached version 1.0.0 yet, it's been tested and proven in a large-scale application, performing flawlessly across hundreds screens and components.
|
24
|
-
|
25
|
-
I'm looking for testers to check the typings, scalability and overall usability for your monorepo projects.
|
26
|
-
|
27
|
-
Suggestions, ideas, and potential improvements are always welcome!
|
28
|
-
|
29
|
-
## Setup
|
30
|
-
|
31
|
-
**1. Install library**
|
26
|
+
## Installation
|
32
27
|
|
33
28
|
```cmd
|
34
|
-
yarn add react-native-unistyles
|
35
|
-
```
|
36
|
-
|
37
|
-
**2. Define your theme**
|
38
|
-
|
39
|
-
You don't have to follow a specific format. Just make an object and add any keys/values you like.
|
40
|
-
|
41
|
-
```ts
|
42
|
-
// theme.ts
|
43
|
-
export const theme = {
|
44
|
-
colors: {
|
45
|
-
blood: '#eb4d4b',
|
46
|
-
barbie: '#e056fd',
|
47
|
-
pumpkin: '#f0932b',
|
48
|
-
background: '#ffffff'
|
49
|
-
},
|
50
|
-
margins: {
|
51
|
-
sm: 2,
|
52
|
-
md: 4,
|
53
|
-
lg: 8,
|
54
|
-
xl: 12
|
55
|
-
}
|
56
|
-
}
|
57
|
-
```
|
58
|
-
|
59
|
-
or something more advanced with nested objects / functions:
|
60
|
-
|
61
|
-
```ts
|
62
|
-
// theme.ts
|
63
|
-
export const theme = {
|
64
|
-
colors: {
|
65
|
-
blood: '#eb4d4b',
|
66
|
-
barbie: '#e056fd',
|
67
|
-
pumpkin: '#f0932b',
|
68
|
-
background: '#ffffff'
|
69
|
-
},
|
70
|
-
components: {
|
71
|
-
typography: {
|
72
|
-
bold: {
|
73
|
-
fontWeight: 'bold'
|
74
|
-
},
|
75
|
-
thin: {
|
76
|
-
fontWeight: '300'
|
77
|
-
}
|
78
|
-
}
|
79
|
-
},
|
80
|
-
margins: {
|
81
|
-
sm: 2,
|
82
|
-
md: 4,
|
83
|
-
lg: 8,
|
84
|
-
xl: 12
|
85
|
-
},
|
86
|
-
utils: {
|
87
|
-
hexToRGBA: (hex: string, opacity: number) => {
|
88
|
-
const rgb = hex
|
89
|
-
.replace('#', '')
|
90
|
-
.split(/(?=(?:..)*$)/)
|
91
|
-
.map(x => parseInt(x, 16))
|
92
|
-
return `rgba(${rgb.at(0)}, ${rgb.at(1)}, ${rgb.at(2)}, ${opacity})`
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
96
|
-
```
|
97
|
-
**3. Create breakpoints**
|
98
|
-
|
99
|
-
There are no predefined breakpoints. You can name them anything. Just make an object with string keys and number values.
|
100
|
-
|
101
|
-
```ts
|
102
|
-
// breakpoints.ts
|
103
|
-
export const breakpoints = {
|
104
|
-
xs: 0,
|
105
|
-
sm: 576,
|
106
|
-
md: 768,
|
107
|
-
lg: 992,
|
108
|
-
xl: 1200,
|
109
|
-
superLarge: 2000,
|
110
|
-
tvLike: 4000
|
111
|
-
}
|
112
|
-
```
|
113
|
-
|
114
|
-
**4. Wrap your app with UnistylesTheme to inject theme**
|
115
|
-
|
116
|
-
```tsx
|
117
|
-
import React from 'react'
|
118
|
-
import { UnistylesTheme } from 'react-native-unistyles'
|
119
|
-
import { theme } from './theme'
|
120
|
-
|
121
|
-
export const App: React.FunctionComponent = () => (
|
122
|
-
<UnistylesTheme theme={theme}>
|
123
|
-
// Your App
|
124
|
-
</UnistylesTheme>
|
125
|
-
)
|
29
|
+
yarn add react-native-unistyles@rc
|
126
30
|
```
|
127
31
|
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
// import library factory
|
134
|
-
import { createUnistyles } from 'react-native-unistyles'
|
135
|
-
// import your breakpoints, add whatever keys and numeric values you want
|
136
|
-
import { breakpoints } from './breakpoints'
|
137
|
-
// import your app's theme TypeScript type, or simply use 'typeof theme'
|
138
|
-
import { theme } from './theme'
|
139
|
-
|
140
|
-
export const {
|
141
|
-
createStyleSheet,
|
142
|
-
useStyles,
|
143
|
-
} = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
|
144
|
-
```
|
145
|
-
|
146
|
-
## Basic Usage
|
147
|
-
|
148
|
-
After the initial setup, you only need to focus on two functions responsible for your styles:
|
149
|
-
- `createStyleSheet` which replaces `StyleSheet.create`
|
150
|
-
- `useStyles` which parses your styles and ensures TypeScript compatibility with media queries and breakpoints
|
151
|
-
|
152
|
-
```tsx
|
153
|
-
import React from 'react'
|
154
|
-
import { View, Text } from 'react-native'
|
155
|
-
// access createStyleSheet and useStyles exported from factory
|
156
|
-
import { createStyleSheet, useStyles } from 'lib/styles'
|
157
|
-
|
158
|
-
export const ExampleUnistyles = () => {
|
159
|
-
const { styles } = useStyles(stylesheet)
|
160
|
-
|
161
|
-
return (
|
162
|
-
<View style={styles.container}>
|
163
|
-
<Text style={styles.text}>
|
164
|
-
Unistyles example
|
165
|
-
</Text>
|
166
|
-
</View>
|
167
|
-
)
|
168
|
-
}
|
169
|
-
|
170
|
-
const stylesheet = createStyleSheet(theme => ({
|
171
|
-
container: {
|
172
|
-
flex: 1,
|
173
|
-
justifyContent: 'center',
|
174
|
-
alignItems: 'center',
|
175
|
-
backgroundColor: theme.colors.background
|
176
|
-
},
|
177
|
-
text: {
|
178
|
-
color: theme.colors.typography
|
179
|
-
}
|
180
|
-
}))
|
181
|
-
```
|
182
|
-
|
183
|
-
## createStyleSheet
|
184
|
-
|
185
|
-
`createStyleSheet` is interchangeable with `StyleSheet.create`. You can use objects, and it will function identically to its React Native counterpart.
|
186
|
-
|
187
|
-
```ts
|
188
|
-
const stylesheet = createStyleSheet({
|
189
|
-
container: {
|
190
|
-
flex: 1,
|
191
|
-
justifyContent: 'center',
|
192
|
-
alignItems: 'center',
|
193
|
-
},
|
194
|
-
})
|
195
|
-
```
|
196
|
-
The difference is that you can now use breakpoints and media queries:
|
197
|
-
|
198
|
-
```ts
|
199
|
-
const stylesheet = createStyleSheet({
|
200
|
-
container: {
|
201
|
-
flex: 1,
|
202
|
-
justifyContent: 'center',
|
203
|
-
alignItems: 'center',
|
204
|
-
flexDirection: {
|
205
|
-
xs: 'row',
|
206
|
-
sm: 'column',
|
207
|
-
':w[800]': 'row'
|
208
|
-
}
|
209
|
-
},
|
210
|
-
})
|
211
|
-
```
|
212
|
-
|
213
|
-
`createStyleSheet` also accepts a function, to which the library will inject your theme:
|
214
|
-
|
215
|
-
```ts
|
216
|
-
const stylesheet = createStyleSheet(theme => ({
|
217
|
-
container: {
|
218
|
-
flex: 1,
|
219
|
-
justifyContent: 'center',
|
220
|
-
alignItems: 'center',
|
221
|
-
flexDirection: {
|
222
|
-
xs: 'row',
|
223
|
-
sm: 'column',
|
224
|
-
':w[800]': 'row'
|
225
|
-
},
|
226
|
-
backgroundColor: theme.colors.background
|
227
|
-
},
|
228
|
-
}))
|
229
|
-
```
|
230
|
-
|
231
|
-
Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!
|
232
|
-
|
233
|
-
## useStyles
|
234
|
-
|
235
|
-
`useStyle` ties everything together and handles the heavy lifting. Without `useStyles`, you can't utilize features like:
|
236
|
-
- breakpoints
|
237
|
-
- media queries
|
238
|
-
- themes
|
239
|
-
|
240
|
-
_useStyles_ allows you to skip the `stylesheet` if you only want to access the `theme`:
|
241
|
-
|
242
|
-
```tsx
|
243
|
-
const { theme } = useStyles()
|
244
|
-
```
|
245
|
-
|
246
|
-
For more advanced usage, pass your `stylesheet` generated with `createStyleSheet`:
|
247
|
-
|
248
|
-
```tsx
|
249
|
-
// you can still access theme
|
250
|
-
const { styles, theme } = useStyles(stylesheet)
|
251
|
-
```
|
252
|
-
|
253
|
-
## Breakpoints
|
254
|
-
|
255
|
-
Any style can change based on breakpoints. To do this, change a value to an object:
|
256
|
-
|
257
|
-
```ts
|
258
|
-
const stylesheet = createStyleSheet(theme => ({
|
259
|
-
container: {
|
260
|
-
flex: 1,
|
261
|
-
justifyContent: 'center',
|
262
|
-
alignItems: 'center',
|
263
|
-
backgroundColor: {
|
264
|
-
// your breakpoints
|
265
|
-
xs: theme.colors.background,
|
266
|
-
sm: theme.colors.barbie
|
267
|
-
}
|
268
|
-
},
|
269
|
-
text: {
|
270
|
-
color: theme.colors.typography
|
271
|
-
}
|
272
|
-
}))
|
273
|
-
```
|
274
|
-
|
275
|
-
You can even use it with nested objects like `transform` or `shadowOffset`:
|
276
|
-
|
277
|
-
```ts
|
278
|
-
const stylesheet = createStyleSheet(theme => ({
|
279
|
-
container: {
|
280
|
-
flex: 1,
|
281
|
-
justifyContent: 'center',
|
282
|
-
alignItems: 'center',
|
283
|
-
backgroundColor: {
|
284
|
-
xs: theme.colors.background,
|
285
|
-
sm: theme.colors.barbie
|
286
|
-
},
|
287
|
-
transform: [
|
288
|
-
{
|
289
|
-
translateX: 100
|
290
|
-
},
|
291
|
-
{
|
292
|
-
scale: {
|
293
|
-
xs: 1.5,
|
294
|
-
':w[500]': 1
|
295
|
-
}
|
296
|
-
}
|
297
|
-
]
|
298
|
-
}
|
299
|
-
}))
|
300
|
-
```
|
301
|
-
|
302
|
-
Library will choose the correct value (based on screen width) in the runtime.
|
303
|
-
|
304
|
-
## Media queries
|
305
|
-
|
306
|
-
For more advanced usage and pixel perfect designs you can also use a custom media queries. Library supports 4 types of media queries (w-width, h-height):
|
307
|
-
|
308
|
-
```ts
|
309
|
-
:w[200, 500] - with upper and lower bounds, it translates to width from 200-500px
|
310
|
-
:w[, 800] - with upper bound only, it's equal to width from 0-800px
|
311
|
-
:h[400] - lower bound only, it means height from 400px
|
312
|
-
:h[200, 300]:w[500] - combined queries for both width and height
|
313
|
-
```
|
314
|
-
|
315
|
-
Media queries can be mixed with breakpoints, but have a bigger priority:
|
316
|
-
|
317
|
-
```tsx
|
318
|
-
const stylesheet = createStyleSheet(theme => ({
|
319
|
-
container: {
|
320
|
-
justifyContent: 'center',
|
321
|
-
alignItems: 'center',
|
322
|
-
flexDirection: {
|
323
|
-
xs: 'column',
|
324
|
-
sm: 'row',
|
325
|
-
},
|
326
|
-
backgroundColor: {
|
327
|
-
md: theme.colors.background,
|
328
|
-
// even though md might overlap with >600px, lib will use 'barbie'
|
329
|
-
':w[600]': theme.colors.barbie
|
330
|
-
}
|
331
|
-
},
|
332
|
-
text: {
|
333
|
-
color: theme.colors.typography
|
334
|
-
}
|
335
|
-
}))
|
336
|
-
```
|
337
|
-
|
338
|
-
## Dynamic functions
|
339
|
-
|
340
|
-
Every style can be transformed to dynamic function to take additional parameters from JSX:
|
341
|
-
|
342
|
-
```tsx
|
343
|
-
export const ExampleUnistyles = () => {
|
344
|
-
const { styles } = useStyles(stylesheet)
|
345
|
-
|
346
|
-
return (
|
347
|
-
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
348
|
-
{posts.map((post, index) => (
|
349
|
-
<View
|
350
|
-
key={post.key}
|
351
|
-
// call it as regular function
|
352
|
-
style={styles.post(index)}
|
353
|
-
>
|
354
|
-
<Text>
|
355
|
-
{post.title}
|
356
|
-
</Text>
|
357
|
-
</View>
|
358
|
-
))}
|
359
|
-
</ScrollView>
|
360
|
-
)
|
361
|
-
}
|
362
|
-
|
363
|
-
const stylesheet = createStyleSheet({
|
364
|
-
scrollContainer: {
|
365
|
-
flex: 1,
|
366
|
-
justifyContent: 'center',
|
367
|
-
alignItems: 'center',
|
368
|
-
},
|
369
|
-
// dynamic function
|
370
|
-
post: (index: number) => ({
|
371
|
-
backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
|
372
|
-
})
|
373
|
-
})
|
374
|
-
```
|
375
|
-
If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
|
376
|
-
|
377
|
-
```ts
|
378
|
-
const stylesheet = createStyleSheet(theme => ({
|
379
|
-
scrollContainer: {
|
380
|
-
flex: 1,
|
381
|
-
justifyContent: 'center',
|
382
|
-
alignItems: 'center',
|
383
|
-
},
|
384
|
-
post: (index: number) => ({
|
385
|
-
// breakpoints and media queries works with dynamic function
|
386
|
-
backgroundColor: {
|
387
|
-
xs: index % 2 === 0
|
388
|
-
? theme.colors.gold
|
389
|
-
: theme.colors.silver,
|
390
|
-
sm: theme.colors.red
|
391
|
-
}
|
392
|
-
})
|
393
|
-
}))
|
394
|
-
```
|
395
|
-
|
396
|
-
## Dynamic themes
|
397
|
-
|
398
|
-
You can incorporate as many themes as you desire in your application. While there's flexibility in how you structure your theme, it's essential to maintain consistency with the TypeScript type:
|
399
|
-
|
400
|
-
To promote reusability and maintainability, it's a good practice to share as many values between themes as possible:
|
401
|
-
|
402
|
-
```ts
|
403
|
-
// move shared colors to object
|
404
|
-
const sharedColors = {
|
405
|
-
barbie: '#ff9ff3',
|
406
|
-
oak: '#1dd1a1',
|
407
|
-
sky: '#48dbfb',
|
408
|
-
fog: '#c8d6e5',
|
409
|
-
aloes: '#00d2d3'
|
410
|
-
}
|
411
|
-
|
412
|
-
export const lightTheme = {
|
413
|
-
colors: {
|
414
|
-
// reuse or override them
|
415
|
-
...sharedColors,
|
416
|
-
backgroundColor: '#ffffff',
|
417
|
-
typography: '#000000'
|
418
|
-
}
|
419
|
-
// other keys in common with darkTheme
|
420
|
-
}
|
421
|
-
|
422
|
-
export const darkTheme = {
|
423
|
-
colors: {
|
424
|
-
// reuse or override them
|
425
|
-
...sharedColors,
|
426
|
-
backgroundColor: '#000000',
|
427
|
-
typography: '#ffffff'
|
428
|
-
}
|
429
|
-
// other keys in common with lightTheme
|
430
|
-
}
|
431
|
-
|
432
|
-
// export type that will be used to describe your theme
|
433
|
-
export type AppTheme = typeof lightTheme | typeof darkTheme
|
434
|
-
```
|
435
|
-
|
436
|
-
With the themes set up, modify your `createUnistyles` to consume your `AppTheme` type:
|
437
|
-
|
438
|
-
```ts
|
439
|
-
export const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, AppTheme>(breakpoints)
|
440
|
-
```
|
441
|
-
|
442
|
-
The final step is to switch your theme based on certain states, persisted values, databases, etc.:
|
443
|
-
|
444
|
-
```tsx
|
445
|
-
export const App: React.FunctionComponent = () => {
|
446
|
-
// obtain here your dark or light theme. It can be storage, state, mmkv, or whateber you use
|
447
|
-
// const [yourAppTheme] = useState(lightTheme)
|
448
|
-
// const [yourAppTheme] = useYourStorage()
|
449
|
-
// const [yourAppTheme] = useMMKVObject<AppTheme>(Theme)
|
450
|
-
|
451
|
-
// switching theme will re-render your stylesheets automatically
|
452
|
-
return (
|
453
|
-
<UnistylesTheme theme={yourAppTheme}>
|
454
|
-
<Examples.Extreme />
|
455
|
-
</UnistylesTheme>
|
456
|
-
)
|
457
|
-
}
|
458
|
-
```
|
459
|
-
|
460
|
-
## Variants
|
461
|
-
|
462
|
-
`react-native-unistyles` isn't a UI/component library, so you're in charge of designing variants. With no restrictions and using your creativity, you can easily create variants for your components.
|
463
|
-
|
464
|
-
Let's examine variants for the `Text` component. Imagine you want to create several variants for your `Typography` components:
|
465
|
-
- Heading
|
466
|
-
- Regular
|
467
|
-
- Thin
|
468
|
-
|
469
|
-
To achieve this, add variants to your theme:
|
470
|
-
|
471
|
-
```ts
|
472
|
-
export const lightTheme = {
|
473
|
-
colors: {
|
474
|
-
...sharedColors,
|
475
|
-
backgroundColor: '#ffffff',
|
476
|
-
typography: '#000000'
|
477
|
-
},
|
478
|
-
components: {
|
479
|
-
typography: {
|
480
|
-
base: {
|
481
|
-
fontFamily: 'Roboto',
|
482
|
-
fontSize: 12,
|
483
|
-
},
|
484
|
-
heading: {
|
485
|
-
fontFamily: 'Roboto-Medium',
|
486
|
-
fontSize: 24,
|
487
|
-
},
|
488
|
-
regular: {
|
489
|
-
fontFamily: 'Roboto',
|
490
|
-
fontSize: 12,
|
491
|
-
},
|
492
|
-
thin: {
|
493
|
-
fontFamily: 'Roboto-Thin',
|
494
|
-
fontSize: 12,
|
495
|
-
},
|
496
|
-
bold: {
|
497
|
-
fontWeight: 'bold'
|
498
|
-
}
|
499
|
-
}
|
500
|
-
}
|
501
|
-
}
|
502
|
-
```
|
503
|
-
Next, create a base component:
|
504
|
-
|
505
|
-
```tsx
|
506
|
-
import React from 'react'
|
507
|
-
import type { PropsWithChildren } from 'react'
|
508
|
-
import { Text, TextStyle } from 'react-native'
|
509
|
-
import { createStyleSheet, useStyles } from 'lib/styles'
|
510
|
-
|
511
|
-
interface BaseTextProps extends PropsWithChildren {
|
512
|
-
bold: boolean,
|
513
|
-
style: TextStyle
|
514
|
-
}
|
515
|
-
|
516
|
-
export const BaseText: React.FunctionComponent<BaseTextProps> = ({
|
517
|
-
children,
|
518
|
-
bold = false,
|
519
|
-
style = {}
|
520
|
-
}) => {
|
521
|
-
const {styles} = useStyles(stylesheet)
|
522
|
-
|
523
|
-
return (
|
524
|
-
<Text
|
525
|
-
style={{
|
526
|
-
...styles.baseText,
|
527
|
-
...bold
|
528
|
-
? styles.baseText
|
529
|
-
: {},
|
530
|
-
// pass other styles via props
|
531
|
-
...style
|
532
|
-
}}
|
533
|
-
>
|
534
|
-
{children}
|
535
|
-
</Text>
|
536
|
-
)
|
537
|
-
}
|
538
|
-
|
539
|
-
const stylesheet = createStyleSheet(theme => ({
|
540
|
-
baseText: {
|
541
|
-
...theme.components.typography.base
|
542
|
-
},
|
543
|
-
bold: {
|
544
|
-
...theme.components.typography.bold
|
545
|
-
}
|
546
|
-
}))
|
547
|
-
```
|
548
|
-
|
549
|
-
Now, let's create another variant, e.g., Heading:
|
550
|
-
|
551
|
-
```tsx
|
552
|
-
import React from 'react'
|
553
|
-
import type { PropsWithChildren } from 'react'
|
554
|
-
import { Text, TextStyle } from 'react-native'
|
555
|
-
import { createStyleSheet, useStyles } from 'lib/styles'
|
556
|
-
import { BaseText } from 'lib/components'
|
557
|
-
|
558
|
-
interface BaseTextProps extends PropsWithChildren {
|
559
|
-
bold: boolean,
|
560
|
-
text: string
|
561
|
-
}
|
562
|
-
|
563
|
-
export const Heading: React.FunctionComponent<BaseTextProps> = ({
|
564
|
-
text,
|
565
|
-
bold = false
|
566
|
-
}) => {
|
567
|
-
const { theme } = useStyles()
|
568
|
-
|
569
|
-
return (
|
570
|
-
<BaseText
|
571
|
-
bold={bold}
|
572
|
-
style={theme.components.typography.heading}
|
573
|
-
>
|
574
|
-
{text}
|
575
|
-
</BaseText>
|
576
|
-
)
|
577
|
-
}
|
578
|
-
```
|
579
|
-
And so on...
|
580
|
-
|
581
|
-
## Migrate from StyleSheet
|
582
|
-
|
583
|
-
`react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
|
584
|
-
|
585
|
-
You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:
|
586
|
-
|
587
|
-
```diff
|
588
|
-
-const styles = StyleSheet.create({
|
589
|
-
+const styles = createStyleSheet({
|
590
|
-
scrollContainer: {
|
591
|
-
flex: 1,
|
592
|
-
justifyContent: 'center',
|
593
|
-
alignItems: 'center',
|
594
|
-
}
|
595
|
-
})
|
596
|
-
```
|
597
|
-
|
598
|
-
If you need additional functionalities such as `breakpoints`, `media-queries` or `theme` you can incrementally pass `style(sheet)` into the `useStyles` hook:
|
599
|
-
|
600
|
-
```ts
|
601
|
-
export const ExampleUnistyles = () => {
|
602
|
-
const { styles } = useStyles(stylesheet)
|
603
|
-
// ... your component code
|
604
|
-
}
|
605
|
-
```
|
606
|
-
|
607
|
-
With the hook in place, you can now use all the features.
|
608
|
-
|
609
|
-
## Example
|
610
|
-
|
611
|
-
In order to check out working example go to [example/](./example).
|
32
|
+
## [Documentation](https://reactnativeunistyles.vercel.app/)
|
33
|
+
- [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
|
34
|
+
- [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
|
35
|
+
- [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
|
612
36
|
|
613
37
|
## Blog post
|
614
38
|
|
615
|
-
|
616
|
-
|
39
|
+
Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
|
617
40
|
|
618
41
|
## Sponsor my work
|
619
42
|
|
@@ -13,15 +13,6 @@ const createUnistyles = breakpoints => {
|
|
13
13
|
const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
|
14
14
|
const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
|
15
15
|
return {
|
16
|
-
/**
|
17
|
-
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
18
|
-
*/
|
19
|
-
createStyles: styles => {
|
20
|
-
if (typeof styles === 'function') {
|
21
|
-
return styles;
|
22
|
-
}
|
23
|
-
return styles;
|
24
|
-
},
|
25
16
|
createStyleSheet: styles => {
|
26
17
|
if (typeof styles === 'function') {
|
27
18
|
return styles;
|
@@ -31,15 +22,16 @@ const createUnistyles = breakpoints => {
|
|
31
22
|
useStyles: stylesheet => {
|
32
23
|
const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
|
33
24
|
const screenSize = (0, _hooks.useDimensions)();
|
25
|
+
const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
|
34
26
|
if (!stylesheet) {
|
35
27
|
return {
|
36
28
|
theme,
|
29
|
+
breakpoint,
|
37
30
|
styles: {}
|
38
31
|
};
|
39
32
|
}
|
40
|
-
const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
|
41
|
-
const
|
42
|
-
const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
|
33
|
+
const parsedStyles = (0, _react.useMemo)(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
|
34
|
+
const dynamicStyleSheet = (0, _react.useMemo)(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
|
43
35
|
let [key, value] = _ref;
|
44
36
|
const style = value;
|
45
37
|
if (typeof value === 'function') {
|
@@ -52,9 +44,10 @@ const createUnistyles = breakpoints => {
|
|
52
44
|
...acc,
|
53
45
|
[key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
|
54
46
|
});
|
55
|
-
}, {});
|
47
|
+
}, {}), [breakpoint, screenSize, parsedStyles]);
|
56
48
|
return {
|
57
49
|
theme,
|
50
|
+
breakpoint,
|
58
51
|
styles: dynamicStyleSheet
|
59
52
|
};
|
60
53
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","parsedStyles","useMemo","dynamicStyleSheet","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,MAAMK,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EACjE,MAAMG,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACJ,iBAAiB,CAA+B;EAE7D,OAAO;IACHK,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLK,UAAU;UACVR,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMW,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOV,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMW,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAMf,MAAM,CACzCC,OAAO,CAACa,YAAY,CAAC,CACrBG,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEV,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAEX,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACY,UAAU,EAAEF,UAAU,EAAEK,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHR,KAAK;QACLK,UAAU;QACVR,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}
|
@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useDimensions = void 0;
|
7
7
|
var _reactNative = require("react-native");
|
8
|
-
const useDimensions = () =>
|
9
|
-
const {
|
10
|
-
width,
|
11
|
-
height
|
12
|
-
} = (0, _reactNative.useWindowDimensions)();
|
13
|
-
return {
|
14
|
-
width,
|
15
|
-
height
|
16
|
-
};
|
17
|
-
};
|
8
|
+
const useDimensions = () => (0, _reactNative.useWindowDimensions)();
|
18
9
|
exports.useDimensions = useDimensions;
|
19
10
|
//# sourceMappingURL=useDimensions.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_reactNative","require","useDimensions","
|
1
|
+
{"version":3,"names":["_reactNative","require","useDimensions","useWindowDimensions","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB,IAAAC,gCAAmB,EAAC,CAAC;AAAAC,OAAA,CAAAF,aAAA,GAAAA,aAAA"}
|