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

Sign up to get free protection for your applications and to get access to all the features.
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
  })