react-native-unistyles 3.0.0-alpha.10 → 3.0.0-alpha.11

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.
Files changed (23) hide show
  1. package/cxx/core/Unistyle.h +7 -4
  2. package/cxx/core/UnistyleWrapper.h +19 -1
  3. package/cxx/core/UnistylesRegistry.cpp +18 -35
  4. package/cxx/core/UnistylesRegistry.h +1 -4
  5. package/cxx/hybridObjects/HybridShadowRegistry.cpp +7 -7
  6. package/cxx/parser/Parser.cpp +33 -39
  7. package/cxx/parser/Parser.h +1 -1
  8. package/cxx/shadowTree/ShadowLeafUpdate.h +1 -1
  9. package/cxx/shadowTree/ShadowTreeManager.cpp +3 -8
  10. package/lib/commonjs/specs/ShadowRegistry/index.js +1 -1
  11. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  12. package/lib/module/specs/ShadowRegistry/index.js +1 -1
  13. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  14. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +1 -1
  15. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  16. package/package.json +1 -1
  17. package/plugin/__tests__/dependencies.spec.js +15 -5
  18. package/plugin/__tests__/ref.spec.js +209 -30
  19. package/plugin/__tests__/stylesheet.spec.js +27 -9
  20. package/plugin/index.js +38 -3
  21. package/plugin/ref.js +41 -11
  22. package/plugin/style.js +45 -1
  23. package/src/specs/ShadowRegistry/index.ts +2 -2
package/plugin/__tests__/ref.spec.js CHANGED
@@ -14,9 +14,9 @@ pluginTester({
14
14
  },
15
15
  tests: [
16
16
  {
17
- title: 'Does nothing if there is no import from Unistyles',
17
+ title: 'Does nothing if there is no import from React Native',
18
18
  code: `
19
- import { StyleSheet } from 'react-native'
19
+ import { StyleSheet, View, Text } from 'custom-lib'
20
20
 
21
21
  export const Example = () => {
22
22
  return (
@@ -33,7 +33,7 @@ pluginTester({
33
33
  })
34
34
  `,
35
35
  output: `
36
- import { StyleSheet } from 'react-native'
36
+ import { StyleSheet, View, Text } from 'custom-lib'
37
37
 
38
38
  export const Example = () => {
39
39
  return (
@@ -51,9 +51,9 @@ pluginTester({
51
51
  `
52
52
  },
53
53
  {
54
- title: 'Adds ref if there is any import from Unistyles',
54
+ title: 'Adds ref if there is any import from React Native',
55
55
  code: `
56
- import 'react-native-unistyles'
56
+ import { View, Text } from 'react-native'
57
57
 
58
58
  export const Example = () => {
59
59
  return (
@@ -71,12 +71,12 @@ pluginTester({
71
71
  `,
72
72
  output: `
73
73
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
74
- import 'react-native-unistyles'
74
+ import { View, Text } from 'react-native'
75
75
 
76
76
  export const Example = () => {
77
77
  return (
78
78
  <View
79
- style={styles.container}
79
+ style={[styles.container]}
80
80
  ref={ref => {
81
81
  UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
82
82
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -94,10 +94,63 @@ pluginTester({
94
94
  })
95
95
  `
96
96
  },
97
+ {
98
+ title: 'Adds ref only for React Native components',
99
+ code: `
100
+ import { View } from 'react-native'
101
+ import { Text } from 'custom-lib'
102
+
103
+ export const Example = () => {
104
+ return (
105
+ <View style={styles.container}>
106
+ <Text style={styles.text}>Hello world</Text>
107
+ </View>
108
+ )
109
+ }
110
+
111
+ const styles = StyleSheet.create({
112
+ container: {
113
+ backgroundColor: 'red'
114
+ },
115
+ text: {
116
+ color: 'blue'
117
+ }
118
+ })
119
+ `,
120
+ output: `
121
+ import { UnistylesShadowRegistry } from 'react-native-unistyles'
122
+ import { View } from 'react-native'
123
+ import { Text } from 'custom-lib'
124
+
125
+ export const Example = () => {
126
+ return (
127
+ <View
128
+ style={[styles.container]}
129
+ ref={ref => {
130
+ UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
131
+ return () => UnistylesShadowRegistry.remove(ref, styles.container)
132
+ }}
133
+ >
134
+ <Text style={styles.text}>Hello world</Text>
135
+ </View>
136
+ )
137
+ }
138
+
139
+ const styles = StyleSheet.create({
140
+ container: {
141
+ backgroundColor: 'red'
142
+ },
143
+ text: {
144
+ color: 'blue'
145
+ }
146
+ })
147
+ `
148
+ },
97
149
  {
98
150
  title: 'Preserves user\'s ref',
99
151
  code: `
100
152
  import React from 'react'
153
+ import { View, Text } from 'react-native'
101
154
  import { StyleSheet } from 'react-native-unistyles'
102
155
 
103
156
  export const Example = () => {
@@ -122,6 +175,7 @@ pluginTester({
122
175
  output: `
123
176
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
124
177
  import React from 'react'
178
+ import { View, Text } from 'react-native'
125
179
  import { StyleSheet } from 'react-native-unistyles'
126
180
 
127
181
  export const Example = () => {
@@ -134,7 +188,7 @@ pluginTester({
134
188
  UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
135
189
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
136
190
  }}
137
- style={styles.container}
191
+ style={[styles.container]}
138
192
  >
139
193
  <Text>Hello world</Text>
140
194
  </View>
@@ -155,6 +209,7 @@ pluginTester({
155
209
  title: 'Preserves user\'s ref as function',
156
210
  code: `
157
211
  import { useRef } from 'react'
212
+ import { View, Text } from 'react-native'
158
213
  import { StyleSheet } from 'react-native-unistyles'
159
214
 
160
215
  export const Example = () => {
@@ -182,6 +237,7 @@ pluginTester({
182
237
  output: `
183
238
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
184
239
  import { useRef } from 'react'
240
+ import { View, Text } from 'react-native'
185
241
  import { StyleSheet } from 'react-native-unistyles'
186
242
 
187
243
  export const Example = () => {
@@ -197,7 +253,7 @@ pluginTester({
197
253
  UnistylesShadowRegistry.remove(ref, styles.container)
198
254
  }
199
255
  }}
200
- style={styles.container}
256
+ style={[styles.container]}
201
257
  >
202
258
  <Text>Hello world</Text>
203
259
  </View>
@@ -218,6 +274,7 @@ pluginTester({
218
274
  title: 'Preserves user\'s ref as function with cleanup',
219
275
  code: `
220
276
  import React from 'react'
277
+ import { View, Text } from 'react-native'
221
278
  import { StyleSheet } from 'react-native-unistyles'
222
279
 
223
280
  export const Example = () => {
@@ -249,6 +306,7 @@ pluginTester({
249
306
  output: `
250
307
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
251
308
  import React from 'react'
309
+ import { View, Text } from 'react-native'
252
310
  import { StyleSheet } from 'react-native-unistyles'
253
311
 
254
312
  export const Example = () => {
@@ -267,7 +325,7 @@ pluginTester({
267
325
  UnistylesShadowRegistry.remove(ref, styles.container)
268
326
  }
269
327
  }}
270
- style={styles.container}
328
+ style={[styles.container]}
271
329
  >
272
330
  <Text>Hello world</Text>
273
331
  </View>
@@ -288,6 +346,7 @@ pluginTester({
288
346
  title: 'Preserves user\'s ref as assigned arrow function',
289
347
  code: `
290
348
  import React from 'react'
349
+ import { View, Text } from 'react-native'
291
350
  import { StyleSheet } from 'react-native-unistyles'
292
351
 
293
352
  export const Example = () => {
@@ -320,6 +379,7 @@ pluginTester({
320
379
  output: `
321
380
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
322
381
  import React from 'react'
382
+ import { View, Text } from 'react-native'
323
383
  import { StyleSheet } from 'react-native-unistyles'
324
384
 
325
385
  export const Example = () => {
@@ -341,7 +401,7 @@ pluginTester({
341
401
  UnistylesShadowRegistry.remove(_ref, styles.container)
342
402
  }
343
403
  }}
344
- style={styles.container}
404
+ style={[styles.container]}
345
405
  >
346
406
  <Text>Hello world</Text>
347
407
  </View>
@@ -362,6 +422,7 @@ pluginTester({
362
422
  title: 'Preserves user\'s ref as assigned function function',
363
423
  code: `
364
424
  import React from 'react'
425
+ import { View, Text } from 'react-native'
365
426
  import { StyleSheet } from 'react-native-unistyles'
366
427
 
367
428
  export const Example = () => {
@@ -394,6 +455,7 @@ pluginTester({
394
455
  output: `
395
456
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
396
457
  import React from 'react'
458
+ import { View, Text } from 'react-native'
397
459
  import { StyleSheet } from 'react-native-unistyles'
398
460
 
399
461
  export const Example = () => {
@@ -415,7 +477,7 @@ pluginTester({
415
477
  UnistylesShadowRegistry.remove(_ref, styles.container)
416
478
  }
417
479
  }}
418
- style={styles.container}
480
+ style={[styles.container]}
419
481
  >
420
482
  <Text>Hello world</Text>
421
483
  </View>
@@ -436,6 +498,7 @@ pluginTester({
436
498
  title: 'Should not modify ref if user is using inline styles',
437
499
  code: `
438
500
  import { useRef } from 'react'
501
+ import { View, Text } from 'react-native'
439
502
  import { StyleSheet } from 'react-native-unistyles'
440
503
 
441
504
  export const Example = () => {
@@ -461,6 +524,7 @@ pluginTester({
461
524
  `,
462
525
  output: `
463
526
  import { useRef } from 'react'
527
+ import { View, Text } from 'react-native'
464
528
  import { StyleSheet } from 'react-native-unistyles'
465
529
 
466
530
  export const Example = () => {
@@ -489,9 +553,10 @@ pluginTester({
489
553
  `
490
554
  },
491
555
  {
492
- title: 'Should not modify ref if user is not member accessing styles',
556
+ title: 'Should modify ref if user is not member accessing styles',
493
557
  code: `
494
558
  import { useRef } from 'react'
559
+ import { View, Text } from 'react-native'
495
560
  import { StyleSheet } from 'react-native-unistyles'
496
561
 
497
562
  export const Example = () => {
@@ -517,7 +582,9 @@ pluginTester({
517
582
  })
518
583
  `,
519
584
  output: `
585
+ import { UnistylesShadowRegistry } from 'react-native-unistyles'
520
586
  import { useRef } from 'react'
587
+ import { View, Text } from 'react-native'
521
588
  import { StyleSheet } from 'react-native-unistyles'
522
589
 
523
590
  export const Example = () => {
@@ -525,11 +592,16 @@ pluginTester({
525
592
 
526
593
  return (
527
594
  <View
528
- ref={myRef}
529
- style={{
530
- ...obj1,
531
- ...obj2
595
+ ref={_ref => {
596
+ myRef.current = _ref
597
+ UnistylesShadowRegistry.add(_ref, obj1, undefined, undefined)
598
+ UnistylesShadowRegistry.add(_ref, obj2, undefined, undefined)
599
+ return () => {
600
+ ;(() => UnistylesShadowRegistry.remove(_ref, obj1))()
601
+ UnistylesShadowRegistry.remove(_ref, obj2)
602
+ }
532
603
  }}
604
+ style={[obj1, obj2]}
533
605
  >
534
606
  <Text>Hello world</Text>
535
607
  </View>
@@ -547,9 +619,10 @@ pluginTester({
547
619
  `
548
620
  },
549
621
  {
550
- title: 'Should not modify ref if user is not member accessing styles in array',
622
+ title: 'Should modify ref if user is not member accessing styles in array',
551
623
  code: `
552
624
  import { useRef } from 'react'
625
+ import { View, Text } from 'react-native'
553
626
  import { StyleSheet } from 'react-native-unistyles'
554
627
 
555
628
  export const Example = () => {
@@ -572,14 +645,27 @@ pluginTester({
572
645
  })
573
646
  `,
574
647
  output: `
648
+ import { UnistylesShadowRegistry } from 'react-native-unistyles'
575
649
  import { useRef } from 'react'
650
+ import { View, Text } from 'react-native'
576
651
  import { StyleSheet } from 'react-native-unistyles'
577
652
 
578
653
  export const Example = () => {
579
654
  const myRef = useRef()
580
655
 
581
656
  return (
582
- <View ref={myRef} style={[obj1, obj2]}>
657
+ <View
658
+ ref={_ref => {
659
+ myRef.current = _ref
660
+ UnistylesShadowRegistry.add(_ref, obj1, undefined, undefined)
661
+ UnistylesShadowRegistry.add(_ref, obj2, undefined, undefined)
662
+ return () => {
663
+ ;(() => UnistylesShadowRegistry.remove(_ref, obj1))()
664
+ UnistylesShadowRegistry.remove(_ref, obj2)
665
+ }
666
+ }}
667
+ style={[obj1, obj2]}
668
+ >
583
669
  <Text>Hello world</Text>
584
670
  </View>
585
671
  )
@@ -599,6 +685,7 @@ pluginTester({
599
685
  title: 'Should modify ref if user is using spreads on styles',
600
686
  code: `
601
687
  import { useRef } from 'react'
688
+ import { View, Text } from 'react-native'
602
689
  import { StyleSheet } from 'react-native-unistyles'
603
690
 
604
691
  export const Example = () => {
@@ -628,6 +715,7 @@ pluginTester({
628
715
  output: `
629
716
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
630
717
  import { useRef } from 'react'
718
+ import { View, Text } from 'react-native'
631
719
  import { StyleSheet } from 'react-native-unistyles'
632
720
 
633
721
  export const Example = () => {
@@ -640,12 +728,12 @@ pluginTester({
640
728
  UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
641
729
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
642
730
  }}
643
- style={{
644
- ...styles.container,
645
- ...{
731
+ style={[
732
+ styles.container,
733
+ {
646
734
  backgroundColor: 'red'
647
735
  }
648
- }}
736
+ ]}
649
737
  >
650
738
  <Text>Hello world</Text>
651
739
  </View>
@@ -666,6 +754,7 @@ pluginTester({
666
754
  title: 'Should modify ref if user is using array for styles',
667
755
  code: `
668
756
  import { useRef } from 'react'
757
+ import { View, Text } from 'react-native'
669
758
  import { StyleSheet } from 'react-native-unistyles'
670
759
 
671
760
  export const Example = () => {
@@ -695,6 +784,7 @@ pluginTester({
695
784
  output: `
696
785
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
697
786
  import { useRef } from 'react'
787
+ import { View, Text } from 'react-native'
698
788
  import { StyleSheet } from 'react-native-unistyles'
699
789
 
700
790
  export const Example = () => {
@@ -733,6 +823,7 @@ pluginTester({
733
823
  title: 'Should modify ref if user is using single style in array',
734
824
  code: `
735
825
  import { useRef } from 'react'
826
+ import { View, Text } from 'react-native'
736
827
  import { StyleSheet } from 'react-native-unistyles'
737
828
 
738
829
  export const Example = () => {
@@ -741,7 +832,7 @@ pluginTester({
741
832
  return (
742
833
  <View
743
834
  ref={myRef}
744
- style={[styles.container]}
835
+ style={styles.container}
745
836
  >
746
837
  <Text>Hello world</Text>
747
838
  </View>
@@ -757,6 +848,7 @@ pluginTester({
757
848
  output: `
758
849
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
759
850
  import { useRef } from 'react'
851
+ import { View, Text } from 'react-native'
760
852
  import { StyleSheet } from 'react-native-unistyles'
761
853
 
762
854
  export const Example = () => {
@@ -790,6 +882,7 @@ pluginTester({
790
882
  title: 'Should modify ref if user is using dynamic function in array',
791
883
  code: `
792
884
  import { useRef } from 'react'
885
+ import { View, Text } from 'react-native'
793
886
  import { StyleSheet } from 'react-native-unistyles'
794
887
 
795
888
  export const Example = () => {
@@ -816,6 +909,7 @@ pluginTester({
816
909
  output: `
817
910
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
818
911
  import { useRef } from 'react'
912
+ import { View, Text } from 'react-native'
819
913
  import { StyleSheet } from 'react-native-unistyles'
820
914
 
821
915
  export const Example = () => {
@@ -849,6 +943,7 @@ pluginTester({
849
943
  title: 'Should modify ref if user is using dynamic function in object',
850
944
  code: `
851
945
  import { useRef } from 'react'
946
+ import { View, Text } from 'react-native'
852
947
  import { StyleSheet } from 'react-native-unistyles'
853
948
 
854
949
  export const Example = () => {
@@ -876,6 +971,7 @@ pluginTester({
876
971
  output: `
877
972
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
878
973
  import { useRef } from 'react'
974
+ import { View, Text } from 'react-native'
879
975
  import { StyleSheet } from 'react-native-unistyles'
880
976
 
881
977
  export const Example = () => {
@@ -888,7 +984,7 @@ pluginTester({
888
984
  UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
889
985
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
890
986
  }}
891
- style={{ backgroundColor: 'red', ...styles.container(1, 2) }}
987
+ style={[{ backgroundColor: 'red' }, styles.container(1, 2)]}
892
988
  >
893
989
  <Text>Hello world</Text>
894
990
  </View>
@@ -909,6 +1005,7 @@ pluginTester({
909
1005
  title: 'It should extract variants and pass them to ShadowReigstry',
910
1006
  code: `
911
1007
  import { useRef } from 'react'
1008
+ import { View, Text } from 'react-native'
912
1009
  import { StyleSheet } from 'react-native-unistyles'
913
1010
 
914
1011
  export const Example = () => {
@@ -947,6 +1044,7 @@ pluginTester({
947
1044
  output: `
948
1045
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
949
1046
  import { useRef } from 'react'
1047
+ import { View, Text } from 'react-native'
950
1048
  import { StyleSheet } from 'react-native-unistyles'
951
1049
 
952
1050
  export const Example = () => {
@@ -963,7 +1061,7 @@ pluginTester({
963
1061
  UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants, [])
964
1062
  return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
965
1063
  }}
966
- style={uhh.dkk()}
1064
+ style={[uhh.dkk()]}
967
1065
  >
968
1066
  <Text>Hello world</Text>
969
1067
  </View>
@@ -995,6 +1093,7 @@ pluginTester({
995
1093
  title: 'Should modify registry names if user changes name of member expression',
996
1094
  code: `
997
1095
  import { useRef } from 'react'
1096
+ import { View, Text } from 'react-native'
998
1097
  import { StyleSheet } from 'react-native-unistyles'
999
1098
 
1000
1099
  export const Example = () => {
@@ -1019,6 +1118,7 @@ pluginTester({
1019
1118
  output: `
1020
1119
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
1021
1120
  import { useRef } from 'react'
1121
+ import { View, Text } from 'react-native'
1022
1122
  import { StyleSheet } from 'react-native-unistyles'
1023
1123
 
1024
1124
  export const Example = () => {
@@ -1031,7 +1131,7 @@ pluginTester({
1031
1131
  UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined, [])
1032
1132
  return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
1033
1133
  }}
1034
- style={uhh.dkk()}
1134
+ style={[uhh.dkk()]}
1035
1135
  >
1036
1136
  <Text>Hello world</Text>
1037
1137
  </View>
@@ -1051,6 +1151,7 @@ pluginTester({
1051
1151
  {
1052
1152
  title: 'Should pass ref for dynamic functions to bind it to shadow node',
1053
1153
  code: `
1154
+ import { View } from 'react-native'
1054
1155
  import { StyleSheet } from 'react-native-unistyles'
1055
1156
 
1056
1157
  export const Example = () => {
@@ -1072,27 +1173,28 @@ pluginTester({
1072
1173
  `,
1073
1174
  output: `
1074
1175
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
1176
+ import { View } from 'react-native'
1075
1177
  import { StyleSheet } from 'react-native-unistyles'
1076
1178
 
1077
1179
  export const Example = () => {
1078
1180
  return (
1079
1181
  <React.Fragment>
1080
1182
  <View
1081
- style={styles.container(1, 5)}
1183
+ style={[styles.container(1, 5)]}
1082
1184
  ref={ref => {
1083
1185
  UnistylesShadowRegistry.add(ref, styles.container, undefined, [1, 5])
1084
1186
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
1085
1187
  }}
1086
1188
  />
1087
1189
  <View
1088
- style={styles.container(2, 6)}
1190
+ style={[styles.container(2, 6)]}
1089
1191
  ref={ref => {
1090
1192
  UnistylesShadowRegistry.add(ref, styles.container, undefined, [2, 6])
1091
1193
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
1092
1194
  }}
1093
1195
  />
1094
1196
  <View
1095
- style={styles.container(5, 1)}
1197
+ style={[styles.container(5, 1)]}
1096
1198
  ref={ref => {
1097
1199
  UnistylesShadowRegistry.add(ref, styles.container, undefined, [5, 1])
1098
1200
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
@@ -1116,6 +1218,7 @@ pluginTester({
1116
1218
  {
1117
1219
  title: 'Should pass refs for dynamic functions',
1118
1220
  code: `
1221
+ import { View } from 'react-native'
1119
1222
  import { StyleSheet } from 'react-native-unistyles'
1120
1223
 
1121
1224
  export const Example = () => {
@@ -1135,6 +1238,7 @@ pluginTester({
1135
1238
  `,
1136
1239
  output: `
1137
1240
  import { UnistylesShadowRegistry } from 'react-native-unistyles'
1241
+ import { View } from 'react-native'
1138
1242
  import { StyleSheet } from 'react-native-unistyles'
1139
1243
 
1140
1244
  export const Example = () => {
@@ -1165,6 +1269,81 @@ pluginTester({
1165
1269
  921918562
1166
1270
  )
1167
1271
  `
1272
+ },
1273
+ {
1274
+ title: 'Should keep order of spreads',
1275
+ code: `
1276
+ import { View } from 'react-native'
1277
+ import { StyleSheet } from 'react-native-unistyles'
1278
+
1279
+ export const Example = () => {
1280
+ return (
1281
+ <View style={{...styles.container, ...styles.secondProp, ...styles.thirdProp}} />
1282
+ )
1283
+ }
1284
+
1285
+ const styles = StyleSheet.create(theme => ({
1286
+ container: {
1287
+ flex: 1,
1288
+ alignItems: 'center',
1289
+ justifyContent: 'center',
1290
+ backgroundColor: theme.colors.backgroundColor
1291
+ },
1292
+ secondProp: {
1293
+ marginHorizontal: theme.gap(10),
1294
+ backgroundColor: 'red'
1295
+ },
1296
+ thirdProp: {
1297
+ backgroundColor: 'blue'
1298
+ }
1299
+ }))
1300
+ `,
1301
+ output: `
1302
+ import { UnistylesShadowRegistry } from 'react-native-unistyles'
1303
+ import { View } from 'react-native'
1304
+ import { StyleSheet } from 'react-native-unistyles'
1305
+
1306
+ export const Example = () => {
1307
+ return (
1308
+ <View
1309
+ style={[styles.container, styles.secondProp, styles.thirdProp]}
1310
+ ref={ref => {
1311
+ UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
1312
+ UnistylesShadowRegistry.add(ref, styles.secondProp, undefined, undefined)
1313
+ UnistylesShadowRegistry.add(ref, styles.thirdProp, undefined, undefined)
1314
+ return () => {
1315
+ ;(() => {
1316
+ ;(() => UnistylesShadowRegistry.remove(ref, styles.container))()
1317
+ UnistylesShadowRegistry.remove(ref, styles.secondProp)
1318
+ })()
1319
+ UnistylesShadowRegistry.remove(ref, styles.thirdProp)
1320
+ }
1321
+ }}
1322
+ />
1323
+ )
1324
+ }
1325
+
1326
+ const styles = StyleSheet.create(
1327
+ theme => ({
1328
+ container: {
1329
+ flex: 1,
1330
+ alignItems: 'center',
1331
+ justifyContent: 'center',
1332
+ backgroundColor: theme.colors.backgroundColor,
1333
+ uni__dependencies: [0]
1334
+ },
1335
+ secondProp: {
1336
+ marginHorizontal: theme.gap(10),
1337
+ backgroundColor: 'red',
1338
+ uni__dependencies: [0]
1339
+ },
1340
+ thirdProp: {
1341
+ backgroundColor: 'blue'
1342
+ }
1343
+ }),
1344
+ 921918562
1345
+ )
1346
+ `
1168
1347
  }
1169
1348
  ]
1170
1349
  })