react-native-unistyles 3.0.0-alpha.6 → 3.0.0-alpha.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/cxx/common/Helpers.h +24 -0
  2. package/cxx/core/HostStyle.cpp +4 -5
  3. package/cxx/core/HostStyle.h +4 -0
  4. package/cxx/core/StyleSheet.h +0 -1
  5. package/cxx/core/StyleSheetRegistry.cpp +9 -17
  6. package/cxx/core/StyleSheetRegistry.h +3 -4
  7. package/cxx/core/UnistyleData.h +22 -0
  8. package/cxx/core/UnistylesCommitHook.cpp +4 -1
  9. package/cxx/core/UnistylesRegistry.cpp +33 -49
  10. package/cxx/core/UnistylesRegistry.h +8 -8
  11. package/cxx/hybridObjects/HybridShadowRegistry.cpp +4 -3
  12. package/cxx/hybridObjects/HybridStyleSheet.cpp +8 -11
  13. package/cxx/parser/Parser.cpp +41 -57
  14. package/cxx/parser/Parser.h +8 -13
  15. package/lib/commonjs/specs/ShadowRegistry/index.js +2 -2
  16. package/lib/commonjs/specs/ShadowRegistry/index.js.map +1 -1
  17. package/lib/commonjs/specs/StyleSheet/index.js.map +1 -1
  18. package/lib/module/specs/ShadowRegistry/index.js +2 -2
  19. package/lib/module/specs/ShadowRegistry/index.js.map +1 -1
  20. package/lib/module/specs/StyleSheet/index.js.map +1 -1
  21. package/lib/typescript/example/App.d.ts.map +1 -1
  22. package/lib/typescript/example/Typography.d.ts +11 -0
  23. package/lib/typescript/example/Typography.d.ts.map +1 -0
  24. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts +2 -2
  25. package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map +1 -1
  26. package/lib/typescript/src/specs/StyleSheet/index.d.ts +2 -1
  27. package/lib/typescript/src/specs/StyleSheet/index.d.ts.map +1 -1
  28. package/package.json +1 -1
  29. package/plugin/__tests__/dependencies.spec.js +181 -103
  30. package/plugin/__tests__/ref.spec.js +222 -158
  31. package/plugin/__tests__/stylesheet.spec.js +148 -55
  32. package/plugin/index.js +22 -11
  33. package/plugin/ref.js +35 -7
  34. package/plugin/style.js +5 -22
  35. package/plugin/stylesheet.js +44 -1
  36. package/plugin/variants.js +33 -0
  37. package/src/specs/ShadowRegistry/index.ts +4 -4
  38. package/src/specs/StyleSheet/index.ts +3 -1
package/plugin/__tests__/ref.spec.js CHANGED
@@ -78,7 +78,7 @@ pluginTester({
78
78
  <View
79
79
  style={styles.container}
80
80
  ref={ref => {
81
- UnistylesShadowRegistry.add(ref, styles.container)
81
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
82
82
  return () => UnistylesShadowRegistry.remove(ref, styles.container)
83
83
  }}
84
84
  >
@@ -130,8 +130,8 @@ pluginTester({
130
130
  return (
131
131
  <View
132
132
  ref={_ref => {
133
- ref = _ref
134
- UnistylesShadowRegistry.add(_ref, styles.container)
133
+ ref.current = _ref
134
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
135
135
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
136
136
  }}
137
137
  style={styles.container}
@@ -141,11 +141,14 @@ pluginTester({
141
141
  )
142
142
  }
143
143
 
144
- const styles = StyleSheet.create({
145
- container: {
146
- backgroundColor: 'red'
147
- }
148
- })
144
+ const styles = StyleSheet.create(
145
+ {
146
+ container: {
147
+ backgroundColor: 'red'
148
+ }
149
+ },
150
+ 921918562
151
+ )
149
152
  `
150
153
  },
151
154
  {
@@ -155,13 +158,13 @@ pluginTester({
155
158
  import { StyleSheet } from 'react-native-unistyles'
156
159
 
157
160
  export const Example = () => {
158
- let myRef = useRef()
161
+ const myRef = useRef()
159
162
 
160
163
  return (
161
164
  <View
162
165
  ref={ref => {
163
166
  doSomething(ref)
164
- myRef = ref
167
+ myRef.current = ref
165
168
  }}
166
169
  style={styles.container}
167
170
  >
@@ -182,14 +185,14 @@ pluginTester({
182
185
  import { StyleSheet } from 'react-native-unistyles'
183
186
 
184
187
  export const Example = () => {
185
- let myRef = useRef()
188
+ const myRef = useRef()
186
189
 
187
190
  return (
188
191
  <View
189
192
  ref={ref => {
190
193
  doSomething(ref)
191
- myRef = ref
192
- UnistylesShadowRegistry.add(ref, styles.container)
194
+ myRef.current = ref
195
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
193
196
  return () => {
194
197
  UnistylesShadowRegistry.remove(ref, styles.container)
195
198
  }
@@ -201,11 +204,14 @@ pluginTester({
201
204
  )
202
205
  }
203
206
 
204
- const styles = StyleSheet.create({
205
- container: {
206
- backgroundColor: 'red'
207
- }
208
- })
207
+ const styles = StyleSheet.create(
208
+ {
209
+ container: {
210
+ backgroundColor: 'red'
211
+ }
212
+ },
213
+ 921918562
214
+ )
209
215
  `
210
216
  },
211
217
  {
@@ -215,13 +221,13 @@ pluginTester({
215
221
  import { StyleSheet } from 'react-native-unistyles'
216
222
 
217
223
  export const Example = () => {
218
- let myRef = React.useRef()
224
+ const myRef = React.useRef()
219
225
 
220
226
  return (
221
227
  <View
222
228
  ref={ref => {
223
229
  doSomething(ref)
224
- myRef = ref
230
+ myRef.current = ref
225
231
 
226
232
  return () => {
227
233
  customCleanup()
@@ -246,14 +252,14 @@ pluginTester({
246
252
  import { StyleSheet } from 'react-native-unistyles'
247
253
 
248
254
  export const Example = () => {
249
- let myRef = React.useRef()
255
+ const myRef = React.useRef()
250
256
 
251
257
  return (
252
258
  <View
253
259
  ref={ref => {
254
260
  doSomething(ref)
255
- myRef = ref
256
- UnistylesShadowRegistry.add(ref, styles.container)
261
+ myRef.current = ref
262
+ UnistylesShadowRegistry.add(ref, styles.container, undefined)
257
263
  return () => {
258
264
  ;(() => {
259
265
  customCleanup()
@@ -268,11 +274,14 @@ pluginTester({
268
274
  )
269
275
  }
270
276
 
271
- const styles = StyleSheet.create({
272
- container: {
273
- backgroundColor: 'red'
274
- }
275
- })
277
+ const styles = StyleSheet.create(
278
+ {
279
+ container: {
280
+ backgroundColor: 'red'
281
+ }
282
+ },
283
+ 921918562
284
+ )
276
285
  `
277
286
  },
278
287
  {
@@ -282,10 +291,10 @@ pluginTester({
282
291
  import { StyleSheet } from 'react-native-unistyles'
283
292
 
284
293
  export const Example = () => {
285
- let myRef = React.useRef()
294
+ const myRef = React.useRef()
286
295
  const fn = ref => {
287
296
  doSomething(ref)
288
- myRef = ref
297
+ myRef.current = ref
289
298
 
290
299
  return () => {
291
300
  customCleanup2()
@@ -314,17 +323,17 @@ pluginTester({
314
323
  import { StyleSheet } from 'react-native-unistyles'
315
324
 
316
325
  export const Example = () => {
317
- let myRef = React.useRef()
326
+ const myRef = React.useRef()
318
327
  const fn = ref => {
319
328
  doSomething(ref)
320
- myRef = ref
329
+ myRef.current = ref
321
330
  }
322
331
 
323
332
  return (
324
333
  <View
325
334
  ref={_ref => {
326
335
  fn(_ref)
327
- UnistylesShadowRegistry.add(_ref, styles.container)
336
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
328
337
  return () => {
329
338
  ;(() => {
330
339
  customCleanup2()
@@ -339,11 +348,14 @@ pluginTester({
339
348
  )
340
349
  }
341
350
 
342
- const styles = StyleSheet.create({
343
- container: {
344
- backgroundColor: 'red'
345
- }
346
- })
351
+ const styles = StyleSheet.create(
352
+ {
353
+ container: {
354
+ backgroundColor: 'red'
355
+ }
356
+ },
357
+ 921918562
358
+ )
347
359
  `
348
360
  },
349
361
  {
@@ -353,10 +365,10 @@ pluginTester({
353
365
  import { StyleSheet } from 'react-native-unistyles'
354
366
 
355
367
  export const Example = () => {
356
- let myRef = React.useRef()
368
+ const myRef = React.useRef()
357
369
  function fn(ref) {
358
370
  doSomething(ref)
359
- myRef = ref
371
+ myRef.current = ref
360
372
 
361
373
  return () => {
362
374
  customCleanup2()
@@ -385,17 +397,17 @@ pluginTester({
385
397
  import { StyleSheet } from 'react-native-unistyles'
386
398
 
387
399
  export const Example = () => {
388
- let myRef = React.useRef()
400
+ const myRef = React.useRef()
389
401
  function fn(ref) {
390
402
  doSomething(ref)
391
- myRef = ref
403
+ myRef.current = ref
392
404
  }
393
405
 
394
406
  return (
395
407
  <View
396
408
  ref={_ref => {
397
409
  fn(_ref)
398
- UnistylesShadowRegistry.add(_ref, styles.container)
410
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
399
411
  return () => {
400
412
  ;(() => {
401
413
  customCleanup2()
@@ -410,11 +422,14 @@ pluginTester({
410
422
  )
411
423
  }
412
424
 
413
- const styles = StyleSheet.create({
414
- container: {
415
- backgroundColor: 'red'
416
- }
417
- })
425
+ const styles = StyleSheet.create(
426
+ {
427
+ container: {
428
+ backgroundColor: 'red'
429
+ }
430
+ },
431
+ 921918562
432
+ )
418
433
  `
419
434
  },
420
435
  {
@@ -424,7 +439,7 @@ pluginTester({
424
439
  import { StyleSheet } from 'react-native-unistyles'
425
440
 
426
441
  export const Example = () => {
427
- let myRef = useRef()
442
+ const myRef = useRef()
428
443
 
429
444
  return (
430
445
  <View
@@ -449,7 +464,7 @@ pluginTester({
449
464
  import { StyleSheet } from 'react-native-unistyles'
450
465
 
451
466
  export const Example = () => {
452
- let myRef = useRef()
467
+ const myRef = useRef()
453
468
 
454
469
  return (
455
470
  <View
@@ -463,11 +478,14 @@ pluginTester({
463
478
  )
464
479
  }
465
480
 
466
- const styles = StyleSheet.create({
467
- container: {
468
- backgroundColor: 'red'
469
- }
470
- })
481
+ const styles = StyleSheet.create(
482
+ {
483
+ container: {
484
+ backgroundColor: 'red'
485
+ }
486
+ },
487
+ 921918562
488
+ )
471
489
  `
472
490
  },
473
491
  {
@@ -477,7 +495,7 @@ pluginTester({
477
495
  import { StyleSheet } from 'react-native-unistyles'
478
496
 
479
497
  export const Example = () => {
480
- let myRef = useRef()
498
+ const myRef = useRef()
481
499
 
482
500
  return (
483
501
  <View
@@ -503,7 +521,7 @@ pluginTester({
503
521
  import { StyleSheet } from 'react-native-unistyles'
504
522
 
505
523
  export const Example = () => {
506
- let myRef = useRef()
524
+ const myRef = useRef()
507
525
 
508
526
  return (
509
527
  <View
@@ -518,11 +536,14 @@ pluginTester({
518
536
  )
519
537
  }
520
538
 
521
- const styles = StyleSheet.create({
522
- container: {
523
- backgroundColor: 'red'
524
- }
525
- })
539
+ const styles = StyleSheet.create(
540
+ {
541
+ container: {
542
+ backgroundColor: 'red'
543
+ }
544
+ },
545
+ 921918562
546
+ )
526
547
  `
527
548
  },
528
549
  {
@@ -532,7 +553,7 @@ pluginTester({
532
553
  import { StyleSheet } from 'react-native-unistyles'
533
554
 
534
555
  export const Example = () => {
535
- let myRef = useRef()
556
+ const myRef = useRef()
536
557
 
537
558
  return (
538
559
  <View
@@ -555,7 +576,7 @@ pluginTester({
555
576
  import { StyleSheet } from 'react-native-unistyles'
556
577
 
557
578
  export const Example = () => {
558
- let myRef = useRef()
579
+ const myRef = useRef()
559
580
 
560
581
  return (
561
582
  <View ref={myRef} style={[obj1, obj2]}>
@@ -564,11 +585,14 @@ pluginTester({
564
585
  )
565
586
  }
566
587
 
567
- const styles = StyleSheet.create({
568
- container: {
569
- backgroundColor: 'red'
570
- }
571
- })
588
+ const styles = StyleSheet.create(
589
+ {
590
+ container: {
591
+ backgroundColor: 'red'
592
+ }
593
+ },
594
+ 921918562
595
+ )
572
596
  `
573
597
  },
574
598
  {
@@ -578,7 +602,7 @@ pluginTester({
578
602
  import { StyleSheet } from 'react-native-unistyles'
579
603
 
580
604
  export const Example = () => {
581
- let myRef = useRef()
605
+ const myRef = useRef()
582
606
 
583
607
  return (
584
608
  <View
@@ -607,13 +631,13 @@ pluginTester({
607
631
  import { StyleSheet } from 'react-native-unistyles'
608
632
 
609
633
  export const Example = () => {
610
- let myRef = useRef()
634
+ const myRef = useRef()
611
635
 
612
636
  return (
613
637
  <View
614
638
  ref={_ref => {
615
- myRef = _ref
616
- UnistylesShadowRegistry.add(_ref, styles.container)
639
+ myRef.current = _ref
640
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
617
641
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
618
642
  }}
619
643
  style={{
@@ -628,11 +652,14 @@ pluginTester({
628
652
  )
629
653
  }
630
654
 
631
- const styles = StyleSheet.create({
632
- container: {
633
- backgroundColor: 'red'
634
- }
635
- })
655
+ const styles = StyleSheet.create(
656
+ {
657
+ container: {
658
+ backgroundColor: 'red'
659
+ }
660
+ },
661
+ 921918562
662
+ )
636
663
  `
637
664
  },
638
665
  {
@@ -642,7 +669,7 @@ pluginTester({
642
669
  import { StyleSheet } from 'react-native-unistyles'
643
670
 
644
671
  export const Example = () => {
645
- let myRef = useRef()
672
+ const myRef = useRef()
646
673
 
647
674
  return (
648
675
  <View
@@ -671,13 +698,13 @@ pluginTester({
671
698
  import { StyleSheet } from 'react-native-unistyles'
672
699
 
673
700
  export const Example = () => {
674
- let myRef = useRef()
701
+ const myRef = useRef()
675
702
 
676
703
  return (
677
704
  <View
678
705
  ref={_ref => {
679
- myRef = _ref
680
- UnistylesShadowRegistry.add(_ref, styles.container)
706
+ myRef.current = _ref
707
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
681
708
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
682
709
  }}
683
710
  style={[
@@ -692,11 +719,14 @@ pluginTester({
692
719
  )
693
720
  }
694
721
 
695
- const styles = StyleSheet.create({
696
- container: {
697
- backgroundColor: 'red'
698
- }
699
- })
722
+ const styles = StyleSheet.create(
723
+ {
724
+ container: {
725
+ backgroundColor: 'red'
726
+ }
727
+ },
728
+ 921918562
729
+ )
700
730
  `
701
731
  },
702
732
  {
@@ -706,7 +736,7 @@ pluginTester({
706
736
  import { StyleSheet } from 'react-native-unistyles'
707
737
 
708
738
  export const Example = () => {
709
- let myRef = useRef()
739
+ const myRef = useRef()
710
740
 
711
741
  return (
712
742
  <View
@@ -730,13 +760,13 @@ pluginTester({
730
760
  import { StyleSheet } from 'react-native-unistyles'
731
761
 
732
762
  export const Example = () => {
733
- let myRef = useRef()
763
+ const myRef = useRef()
734
764
 
735
765
  return (
736
766
  <View
737
767
  ref={_ref => {
738
- myRef = _ref
739
- UnistylesShadowRegistry.add(_ref, styles.container)
768
+ myRef.current = _ref
769
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
740
770
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
741
771
  }}
742
772
  style={[styles.container]}
@@ -746,11 +776,14 @@ pluginTester({
746
776
  )
747
777
  }
748
778
 
749
- const styles = StyleSheet.create({
750
- container: {
751
- backgroundColor: 'red'
752
- }
753
- })
779
+ const styles = StyleSheet.create(
780
+ {
781
+ container: {
782
+ backgroundColor: 'red'
783
+ }
784
+ },
785
+ 921918562
786
+ )
754
787
  `
755
788
  },
756
789
  {
@@ -760,7 +793,7 @@ pluginTester({
760
793
  import { StyleSheet } from 'react-native-unistyles'
761
794
 
762
795
  export const Example = () => {
763
- let myRef = useRef()
796
+ const myRef = useRef()
764
797
 
765
798
  return (
766
799
  <View
@@ -786,27 +819,30 @@ pluginTester({
786
819
  import { StyleSheet } from 'react-native-unistyles'
787
820
 
788
821
  export const Example = () => {
789
- let myRef = useRef()
822
+ const myRef = useRef()
790
823
 
791
824
  return (
792
825
  <View
793
826
  ref={_ref => {
794
- myRef = _ref
795
- UnistylesShadowRegistry.add(_ref, styles.container)
827
+ myRef.current = _ref
828
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
796
829
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
797
830
  }}
798
- style={[styles.container(1, 2, 1)]}
831
+ style={[styles.container(1, 2)]}
799
832
  >
800
833
  <Text>Hello world</Text>
801
834
  </View>
802
835
  )
803
836
  }
804
837
 
805
- const styles = StyleSheet.create({
806
- container: () => ({
807
- backgroundColor: 'red'
808
- })
809
- })
838
+ const styles = StyleSheet.create(
839
+ {
840
+ container: () => ({
841
+ backgroundColor: 'red'
842
+ })
843
+ },
844
+ 921918562
845
+ )
810
846
  `
811
847
  },
812
848
  {
@@ -816,7 +852,7 @@ pluginTester({
816
852
  import { StyleSheet } from 'react-native-unistyles'
817
853
 
818
854
  export const Example = () => {
819
- let myRef = useRef()
855
+ const myRef = useRef()
820
856
 
821
857
  return (
822
858
  <View
@@ -832,9 +868,9 @@ pluginTester({
832
868
  }
833
869
 
834
870
  const styles = StyleSheet.create({
835
- container: () => ({
871
+ container: {
836
872
  backgroundColor: 'red'
837
- })
873
+ }
838
874
  })
839
875
  `,
840
876
  output: `
@@ -843,18 +879,18 @@ pluginTester({
843
879
  import { StyleSheet } from 'react-native-unistyles'
844
880
 
845
881
  export const Example = () => {
846
- let myRef = useRef()
882
+ const myRef = useRef()
847
883
 
848
884
  return (
849
885
  <View
850
886
  ref={_ref => {
851
- myRef = _ref
852
- UnistylesShadowRegistry.add(_ref, styles.container)
887
+ myRef.current = _ref
888
+ UnistylesShadowRegistry.add(_ref, styles.container, undefined)
853
889
  return () => UnistylesShadowRegistry.remove(_ref, styles.container)
854
890
  }}
855
891
  style={{
856
892
  backgroundColor: 'red',
857
- ...styles.container(1, 2, 1)
893
+ ...styles.container(1, 2)
858
894
  }}
859
895
  >
860
896
  <Text>Hello world</Text>
@@ -862,21 +898,28 @@ pluginTester({
862
898
  )
863
899
  }
864
900
 
865
- const styles = StyleSheet.create({
866
- container: () => ({
867
- backgroundColor: 'red'
868
- })
869
- })
901
+ const styles = StyleSheet.create(
902
+ {
903
+ container: {
904
+ backgroundColor: 'red'
905
+ }
906
+ },
907
+ 921918562
908
+ )
870
909
  `
871
910
  },
872
911
  {
873
- title: 'Should modify registry names if user changes name of member expression',
912
+ title: 'It should extract variants and pass them to ShadowReigstry',
874
913
  code: `
875
914
  import { useRef } from 'react'
876
915
  import { StyleSheet } from 'react-native-unistyles'
877
916
 
878
917
  export const Example = () => {
879
- let myRef = useRef()
918
+ const myRef = useRef()
919
+
920
+ styles.useVariants({
921
+ size: 'default'
922
+ })
880
923
 
881
924
  return (
882
925
  <View
@@ -890,7 +933,17 @@ pluginTester({
890
933
 
891
934
  const uhh = StyleSheet.create({
892
935
  dkk: () => ({
893
- backgroundColor: 'red'
936
+ backgroundColor: 'red',
937
+ variants: {
938
+ size: {
939
+ small: {
940
+ backgroundColor: 'blue'
941
+ },
942
+ default: {
943
+ backgroundColor: 'green'
944
+ }
945
+ }
946
+ }
894
947
  })
895
948
  })
896
949
  `,
@@ -900,52 +953,68 @@ pluginTester({
900
953
  import { StyleSheet } from 'react-native-unistyles'
901
954
 
902
955
  export const Example = () => {
903
- let myRef = useRef()
956
+ const myRef = useRef()
957
+ const __uni__variants = {
958
+ size: 'default'
959
+ }
960
+ styles.useVariants(__uni__variants)
904
961
 
905
962
  return (
906
963
  <View
907
964
  ref={_ref => {
908
- myRef = _ref
909
- UnistylesShadowRegistry.add(_ref, uhh.dkk)
965
+ myRef.current = _ref
966
+ UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants)
910
967
  return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
911
968
  }}
912
- style={uhh.dkk(1)}
969
+ style={uhh.dkk()}
913
970
  >
914
971
  <Text>Hello world</Text>
915
972
  </View>
916
973
  )
917
974
  }
918
975
 
919
- const uhh = StyleSheet.create({
920
- dkk: () => ({
921
- backgroundColor: 'red'
922
- })
923
- })
976
+ const uhh = StyleSheet.create(
977
+ {
978
+ dkk: () => ({
979
+ backgroundColor: 'red',
980
+ variants: {
981
+ size: {
982
+ small: {
983
+ backgroundColor: 'blue'
984
+ },
985
+ default: {
986
+ backgroundColor: 'green'
987
+ }
988
+ }
989
+ },
990
+ uni__dependencies: [4]
991
+ })
992
+ },
993
+ 921918562
994
+ )
924
995
  `
925
996
  },
926
997
  {
927
- title: 'Should increment counter for web dynamic functions',
998
+ title: 'Should modify registry names if user changes name of member expression',
928
999
  code: `
929
1000
  import { useRef } from 'react'
930
1001
  import { StyleSheet } from 'react-native-unistyles'
931
1002
 
932
1003
  export const Example = () => {
933
- let myRef = useRef()
1004
+ const myRef = useRef()
934
1005
 
935
1006
  return (
936
1007
  <View
937
1008
  ref={myRef}
938
- style={styles.container()}
1009
+ style={uhh.dkk()}
939
1010
  >
940
- <Text style={styles.container()}>
941
- Hello world
942
- </Text>
1011
+ <Text>Hello world</Text>
943
1012
  </View>
944
1013
  )
945
1014
  }
946
1015
 
947
- const styles = StyleSheet.create({
948
- container: () => ({
1016
+ const uhh = StyleSheet.create({
1017
+ dkk: () => ({
949
1018
  backgroundColor: 'red'
950
1019
  })
951
1020
  })
@@ -956,36 +1025,31 @@ pluginTester({
956
1025
  import { StyleSheet } from 'react-native-unistyles'
957
1026
 
958
1027
  export const Example = () => {
959
- let myRef = useRef()
1028
+ const myRef = useRef()
960
1029
 
961
1030
  return (
962
1031
  <View
963
1032
  ref={_ref => {
964
- myRef = _ref
965
- UnistylesShadowRegistry.add(_ref, styles.container)
966
- return () => UnistylesShadowRegistry.remove(_ref, styles.container)
1033
+ myRef.current = _ref
1034
+ UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined)
1035
+ return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
967
1036
  }}
968
- style={styles.container(1)}
1037
+ style={uhh.dkk()}
969
1038
  >
970
- <Text
971
- style={styles.container(2)}
972
- ref={ref => {
973
- UnistylesShadowRegistry.add(ref, styles.container)
974
- return () => UnistylesShadowRegistry.remove(ref, styles.container)
975
- }}
976
- >
977
- Hello world
978
- </Text>
1039
+ <Text>Hello world</Text>
979
1040
  </View>
980
1041
  )
981
1042
  }
982
1043
 
983
- const styles = StyleSheet.create({
984
- container: () => ({
985
- backgroundColor: 'red'
986
- })
987
- })
1044
+ const uhh = StyleSheet.create(
1045
+ {
1046
+ dkk: () => ({
1047
+ backgroundColor: 'red'
1048
+ })
1049
+ },
1050
+ 921918562
1051
+ )
988
1052
  `
989
- },
1053
+ }
990
1054
  ]
991
1055
  })