+1256 -1256

out/llms-full-nativewind.txt

reviewed

··· 449 449 450 450 ### Options 451 451 452 452 - | Option | Description | Default Value | 453 453 - | --- | --- | --- | 454 454 - | `output` | The relative path for the output file. Defaults to `<projectRoot>/node_modules/.cache/nativewind/`. | `<projectRoot>/node_modules/.cache/nativewind/` | 455 455 - | `projectRoot` | Absolute path to your project root, used only to set `output`. | N/A | 456 456 - | `inlineRem` | Numeric value for inlining the value of `rem` units on native. Set to `false` to disable this behavior. Defaults to `14`. | `14` | 457 457 - | `configPath` | Relative path to your `tailwind.config` file. Recommended to use `@config` instead. | `tailwind.config` | 458 458 - | `hotServerOptions` | Options for the hot server, with a default configuration of `{ port: 8089 }`. | `{ port: 8089 }` | 452 452 + |Option|Description|Default Value| 453 453 + |-|-|-| 454 454 + |`output`|The relative path for the output file. Defaults to `<projectRoot>/node_modules/.cache/nativewind/`.|`<projectRoot>/node_modules/.cache/nativewind/`| 455 455 + |`projectRoot`|Absolute path to your project root, used only to set `output`.|N/A| 456 456 + |`inlineRem`|Numeric value for inlining the value of `rem` units on native. Set to `false` to disable this behavior. Defaults to `14`.|`14`| 457 457 + |`configPath`|Relative path to your `tailwind.config` file. Recommended to use `@config` instead.|`tailwind.config`| 458 458 + |`hotServerOptions`|Options for the hot server, with a default configuration of `{ port: 8089 }`.|`{ port: 8089 }`| 459 459 460 460 #### Experimental Options 461 461 ··· 471 471 472 472 ### Compatibility 473 473 474 474 - | Class | Support | 475 475 - | ----------------- | --------------- | 476 476 - | `content-center` | ✅ Full Support | 477 477 - | `content-start` | ✅ Full Support | 478 478 - | `content-end` | ✅ Full Support | 479 479 - | `content-between` | ✅ Full Support | 480 480 - | `content-around` | ✅ Full Support | 481 481 - | `content-evenly` | ✅ Full Support | 474 474 + |Class|Support| 475 475 + |-|-| 476 476 + |`content-center`|✅ Full Support| 477 477 + |`content-start`|✅ Full Support| 478 478 + |`content-end`|✅ Full Support| 479 479 + |`content-between`|✅ Full Support| 480 480 + |`content-around`|✅ Full Support| 481 481 + |`content-evenly`|✅ Full Support| 482 482 483 483 ## Text Decoration Color 484 484 ··· 488 488 489 489 ### Compatibility 490 490 491 491 - | Class | Support | 492 492 - | -------------------- | --------------- | 493 493 - | `decoration-{n}` | ✅ Full Support | 494 494 - | `decoration-[n]` | ✅ Full Support | 495 495 - | `decoration-inherit` | 🌐 Web only | 496 496 - | `decoration-current` | 🌐 Web only | 491 491 + |Class|Support| 492 492 + |-|-| 493 493 + |`decoration-{n}`|✅ Full Support| 494 494 + |`decoration-[n]`|✅ Full Support| 495 495 + |`decoration-inherit`|🌐 Web only| 496 496 + |`decoration-current`|🌐 Web only| 497 497 498 498 ## Align Items 499 499 ··· 503 503 504 504 ### Compatibility 505 505 506 506 - | Class | Support | 507 507 - | ---------------- | --------------- | 508 508 - | `items-start` | ✅ Full Support | 509 509 - | `items-end` | ✅ Full Support | 510 510 - | `items-center` | ✅ Full Support | 511 511 - | `items-baseline` | ✅ Full Support | 512 512 - | `items-stretch` | ✅ Full Support | 506 506 + |Class|Support| 507 507 + |-|-| 508 508 + |`items-start`|✅ Full Support| 509 509 + |`items-end`|✅ Full Support| 510 510 + |`items-center`|✅ Full Support| 511 511 + |`items-baseline`|✅ Full Support| 512 512 + |`items-stretch`|✅ Full Support| 513 513 514 514 ## Text Decoration Style 515 515 ··· 519 519 520 520 ### Compatibility 521 521 522 522 - | Class | Support | 523 523 - | ------------------- | --------------- | 524 524 - | `decoration-solid` | ✅ Full Support | 525 525 - | `decoration-double` | ✅ Full Support | 526 526 - | `decoration-dotted` | ✅ Full Support | 527 527 - | `decoration-dashed` | ✅ Full Support | 528 528 - | `decoration-wavy` | 🌐 Web only | 522 522 + |Class|Support| 523 523 + |-|-| 524 524 + |`decoration-solid`|✅ Full Support| 525 525 + |`decoration-double`|✅ Full Support| 526 526 + |`decoration-dotted`|✅ Full Support| 527 527 + |`decoration-dashed`|✅ Full Support| 528 528 + |`decoration-wavy`|🌐 Web only| 529 529 530 530 ## Text Decoration Thickness 531 531 ··· 535 535 536 536 ### Compatibility 537 537 538 538 - | Class | Support | 539 539 - | ---------------------- | ----------- | 540 540 - | `decoration-auto` | 🌐 Web only | 541 541 - | `decoration-from-font` | 🌐 Web only | 542 542 - | `decoration-0` | 🌐 Web only | 543 543 - | `decoration-1` | 🌐 Web only | 544 544 - | `decoration-2` | 🌐 Web only | 545 545 - | `decoration-4` | 🌐 Web only | 546 546 - | `decoration-8` | 🌐 Web only | 538 538 + |Class|Support| 539 539 + |-|-| 540 540 + |`decoration-auto`|🌐 Web only| 541 541 + |`decoration-from-font`|🌐 Web only| 542 542 + |`decoration-0`|🌐 Web only| 543 543 + |`decoration-1`|🌐 Web only| 544 544 + |`decoration-2`|🌐 Web only| 545 545 + |`decoration-4`|🌐 Web only| 546 546 + |`decoration-8`|🌐 Web only| 547 547 548 548 ## `vars()` Function Overview 549 549 ··· 572 572 573 573 ### Compatibility 574 574 575 575 - | Class | Support | 576 576 - | ------------ | ----------- | 577 577 - | `indent-[n]` | 🌐 Web only | 578 578 - | `indent-{n}` | 🌐 Web only | 575 575 + |Class|Support| 576 576 + |-|-| 577 577 + |`indent-[n]`|🌐 Web only| 578 578 + |`indent-{n}`|🌐 Web only| 579 579 580 580 ## Align Self 581 581 ··· 585 585 586 586 ### Compatibility 587 587 588 588 - | Class | Support | 589 589 - | --------------- | --------------- | 590 590 - | `self-auto` | ✅ Full Support | 591 591 - | `self-start` | ✅ Full Support | 592 592 - | `self-end` | ✅ Full Support | 593 593 - | `self-center` | ✅ Full Support | 594 594 - | `self-stretch` | ✅ Full Support | 595 595 - | `self-baseline` | ✅ Full Support | 588 588 + |Class|Support| 589 589 + |-|-| 590 590 + |`self-auto`|✅ Full Support| 591 591 + |`self-start`|✅ Full Support| 592 592 + |`self-end`|✅ Full Support| 593 593 + |`self-center`|✅ Full Support| 594 594 + |`self-stretch`|✅ Full Support| 595 595 + |`self-baseline`|✅ Full Support| 596 596 597 597 ## Text Overflow 598 598 ··· 602 602 603 603 ### Compatibility 604 604 605 605 - | Class | Support | 606 606 - | --------------- | ----------- | 607 607 - | `truncate` | 🌐 Web only | 608 608 - | `text-ellipsis` | 🌐 Web only | 609 609 - | `text-clip` | 🌐 Web only | 605 605 + |Class|Support| 606 606 + |-|-| 607 607 + |`truncate`|🌐 Web only| 608 608 + |`text-ellipsis`|🌐 Web only| 609 609 + |`text-clip`|🌐 Web only| 610 610 611 611 ## Text Alignment 612 612 ··· 616 616 617 617 ### Compatibility Table 618 618 619 619 - | Class | Support | 620 620 - | -------------- | --------------- | 621 621 - | `text-left` | ✅ Full Support | 622 622 - | `text-center` | ✅ Full Support | 623 623 - | `text-right` | ✅ Full Support | 624 624 - | `text-justify` | ✅ Full Support | 625 625 - | `text-start` | ✅ Full Support | 626 626 - | `text-end` | ✅ Full Support | 619 619 + |Class|Support| 620 620 + |-|-| 621 621 + |`text-left`|✅ Full Support| 622 622 + |`text-center`|✅ Full Support| 623 623 + |`text-right`|✅ Full Support| 624 624 + |`text-justify`|✅ Full Support| 625 625 + |`text-start`|✅ Full Support| 626 626 + |`text-end`|✅ Full Support| 627 627 628 628 - --- 628 628 + *** 629 629 630 630 ## Accessing and Managing Device Color Scheme 631 631 632 632 The `useColorScheme()` function provides a way to access and manage the device's current color scheme. 633 633 634 634 - | Property | Description | 635 635 - | --- | --- | 636 636 - | `colorScheme` | Represents the current color scheme of the device. | 637 637 - | `setColorScheme` | Allows overriding the current color scheme with either `light`, `dark`, or `system`. | 638 638 - | `toggleColorScheme` | Switches the color scheme between `light` and `dark`. | 634 634 + |Property|Description| 635 635 + |-|-| 636 636 + |`colorScheme`|Represents the current color scheme of the device.| 637 637 + |`setColorScheme`|Allows overriding the current color scheme with either `light`, `dark`, or `system`.| 638 638 + |`toggleColorScheme`|Switches the color scheme between `light` and `dark`.| 639 639 640 640 Additionally, you can manually adjust the color scheme using `NativeWindStyleSheet.setColorScheme(colorScheme)`. 641 641 ··· 664 664 665 665 ### Compatibility 666 666 667 667 - | Class | Support | 668 668 - | -------------- | --------------- | 669 669 - | `flex-1` | ✅ Full Support | 670 670 - | `basis-[n]` | ✅ Full Support | 671 671 - | `flex-auto` | 🌐 Web only | 672 672 - | `flex-initial` | 🌐 Web only | 673 673 - | `flex-none` | 🌐 Web only | 667 667 + |Class|Support| 668 668 + |-|-| 669 669 + |`flex-1`|✅ Full Support| 670 670 + |`basis-[n]`|✅ Full Support| 671 671 + |`flex-auto`|🌐 Web only| 672 672 + |`flex-initial`|🌐 Web only| 673 673 + |`flex-none`|🌐 Web only| 674 674 675 675 ## Text Underline Offset 676 676 ··· 680 680 681 681 ### Compatibility 682 682 683 683 - | Class | Support | 684 684 - | ----------------------- | ----------- | 685 685 - | `underline-offset-auto` | 🌐 Web only | 686 686 - | `underline-offset-0` | 🌐 Web only | 687 687 - | `underline-offset-1` | 🌐 Web only | 688 688 - | `underline-offset-2` | 🌐 Web only | 689 689 - | `underline-offset-4` | 🌐 Web only | 690 690 - | `underline-offset-8` | 🌐 Web only | 683 683 + |Class|Support| 684 684 + |-|-| 685 685 + |`underline-offset-auto`|🌐 Web only| 686 686 + |`underline-offset-0`|🌐 Web only| 687 687 + |`underline-offset-1`|🌐 Web only| 688 688 + |`underline-offset-2`|🌐 Web only| 689 689 + |`underline-offset-4`|🌐 Web only| 690 690 + |`underline-offset-8`|🌐 Web only| 691 691 692 692 ## Vertical Align 693 693 ··· 697 697 698 698 ### Compatibility 699 699 700 700 - | Class | Support | 701 701 - | ------------------- | ----------- | 702 702 - | `align-baseline` | 🌐 Web only | 703 703 - | `align-top` | 🌐 Web only | 704 704 - | `align-middle` | 🌐 Web only | 705 705 - | `align-bottom` | 🌐 Web only | 706 706 - | `align-text-top` | 🌐 Web only | 707 707 - | `align-text-bottom` | 🌐 Web only | 708 708 - | `align-sub` | 🌐 Web only | 709 709 - | `align-super` | 🌐 Web only | 700 700 + |Class|Support| 701 701 + |-|-| 702 702 + |`align-baseline`|🌐 Web only| 703 703 + |`align-top`|🌐 Web only| 704 704 + |`align-middle`|🌐 Web only| 705 705 + |`align-bottom`|🌐 Web only| 706 706 + |`align-text-top`|🌐 Web only| 707 707 + |`align-text-bottom`|🌐 Web only| 708 708 + |`align-sub`|🌐 Web only| 709 709 + |`align-super`|🌐 Web only| 710 710 711 711 ## Flex Basis 712 712 ··· 716 716 717 717 ### Compatibility 718 718 719 719 - | Class | Support | 720 720 - | ------------ | --------------- | 721 721 - | `basis-{n}` | ✅ Full Support | 722 722 - | `basis-[n]` | ✅ Full Support | 723 723 - | `basis-auto` | 🌐 Web only | 719 719 + |Class|Support| 720 720 + |-|-| 721 721 + |`basis-{n}`|✅ Full Support| 722 722 + |`basis-[n]`|✅ Full Support| 723 723 + |`basis-auto`|🌐 Web only| 724 724 725 725 ## Whitespace 726 726 ··· 730 730 731 731 ### Compatibility 732 732 733 733 - | Class | Support | 734 734 - | ------------------------- | ----------- | 735 735 - | `whitespace-normal` | 🌐 Web only | 736 736 - | `whitespace-nowrap` | 🌐 Web only | 737 737 - | `whitespace-pre` | 🌐 Web only | 738 738 - | `whitespace-pre-line` | 🌐 Web only | 739 739 - | `whitespace-pre-wrap` | 🌐 Web only | 740 740 - | `whitespace-break-spaces` | 🌐 Web only | 733 733 + |Class|Support| 734 734 + |-|-| 735 735 + |`whitespace-normal`|🌐 Web only| 736 736 + |`whitespace-nowrap`|🌐 Web only| 737 737 + |`whitespace-pre`|🌐 Web only| 738 738 + |`whitespace-pre-line`|🌐 Web only| 739 739 + |`whitespace-pre-wrap`|🌐 Web only| 740 740 + |`whitespace-break-spaces`|🌐 Web only| 741 741 742 742 ## Flex Direction 743 743 ··· 749 749 750 750 ### Compatibility 751 751 752 752 - | Class | Support | 753 753 - | ------------------ | --------------- | 754 754 - | `flex-row` | ✅ Full Support | 755 755 - | `flex-row-reverse` | ✅ Full Support | 756 756 - | `flex-col` | ✅ Full Support | 757 757 - | `flex-col-reverse` | ✅ Full Support | 752 752 + |Class|Support| 753 753 + |-|-| 754 754 + |`flex-row`|✅ Full Support| 755 755 + |`flex-row-reverse`|✅ Full Support| 756 756 + |`flex-col`|✅ Full Support| 757 757 + |`flex-col-reverse`|✅ Full Support| 758 758 759 759 ```typescript 760 760 // Example TypeScript typings for flex direction classes ··· 776 776 777 777 ### Compatibility 778 778 779 779 - | Class | Support | 780 780 - | -------------------- | ----------- | 781 781 - | `break-normal` | 🌐 Web only | 782 782 - | `word-break: normal` | 🌐 Web only | 783 783 - | `break-words` | 🌐 Web only | 784 784 - | `break-all` | 🌐 Web only | 785 785 - | `break-keep` | 🌐 Web only | 779 779 + |Class|Support| 780 780 + |-|-| 781 781 + |`break-normal`|🌐 Web only| 782 782 + |`word-break: normal`|🌐 Web only| 783 783 + |`break-words`|🌐 Web only| 784 784 + |`break-all`|🌐 Web only| 785 785 + |`break-keep`|🌐 Web only| 786 786 787 787 ## Background Attachment 788 788 789 789 The following table outlines the support for various background attachment classes in web development: 790 790 791 791 - | Class | Support | 792 792 - | ----------- | -------- | 793 793 - | `bg-fixed` | Web only | 794 794 - | `bg-local` | Web only | 795 795 - | `bg-scroll` | Web only | 791 791 + |Class|Support| 792 792 + |-|-| 793 793 + |`bg-fixed`|Web only| 794 794 + |`bg-local`|Web only| 795 795 + |`bg-scroll`|Web only| 796 796 797 797 These classes are used to control how a background image is positioned relative to the viewport or its containing element. 798 798 ··· 800 800 801 801 The following table outlines various CSS classes related to background clipping, along with their support status: 802 802 803 803 - | Class | Support | 804 804 - | ----------------- | ----------- | 805 805 - | `bg-clip-border` | 🌐 Web only | 806 806 - | `bg-clip-padding` | 🌐 Web only | 807 807 - | `bg-clip-content` | 🌐 Web only | 808 808 - | `bg-clip-text` | 🌐 Web only | 803 803 + |Class|Support| 804 804 + |-|-| 805 805 + |`bg-clip-border`|🌐 Web only| 806 806 + |`bg-clip-padding`|🌐 Web only| 807 807 + |`bg-clip-content`|🌐 Web only| 808 808 + |`bg-clip-text`|🌐 Web only| 809 809 810 810 These classes are used to define how the background of an element is clipped, with support limited to web browsers. 811 811 ··· 861 861 862 862 ### Compatibility 863 863 864 864 - | Class | Support | 865 865 - | -------- | --------------- | 866 866 - | `grow` | ✅ Full Support | 867 867 - | `grow-0` | ✅ Full Support | 864 864 + |Class|Support| 865 865 + |-|-| 866 866 + |`grow`|✅ Full Support| 867 867 + |`grow-0`|✅ Full Support| 868 868 869 869 ## Background Color 870 870 871 871 - | Class | Support | 872 872 - | ------------ | --------------- | 873 873 - | `bg-{n}` | ✅ Full Support | 874 874 - | `bg-[n]` | ✅ Full Support | 875 875 - | `bg-inherit` | 🌐 Web only | 876 876 - | `bg-current` | 🌐 Web only | 871 871 + |Class|Support| 872 872 + |-|-| 873 873 + |`bg-{n}`|✅ Full Support| 874 874 + |`bg-[n]`|✅ Full Support| 875 875 + |`bg-inherit`|🌐 Web only| 876 876 + |`bg-current`|🌐 Web only| 877 877 878 878 ### Background Opacity 879 879 ··· 894 894 895 895 The following table outlines various classes used for background images, along with their support status: 896 896 897 897 - | Class | Support | 898 898 - | ------------------- | ----------- | 899 899 - | `bg-none` | 🌐 Web only | 900 900 - | `bg-gradient-to-t` | 🌐 Web only | 901 901 - | `bg-gradient-to-tr` | 🌐 Web only | 902 902 - | `bg-gradient-to-r` | 🌐 Web only | 903 903 - | `bg-gradient-to-br` | 🌐 Web only | 904 904 - | `bg-gradient-to-b` | 🌐 Web only | 905 905 - | `bg-gradient-to-bl` | 🌐 Web only | 906 906 - | `bg-gradient-to-l` | 🌐 Web only | 907 907 - | `bg-gradient-to-tl` | 🌐 Web only | 897 897 + |Class|Support| 898 898 + |-|-| 899 899 + |`bg-none`|🌐 Web only| 900 900 + |`bg-gradient-to-t`|🌐 Web only| 901 901 + |`bg-gradient-to-tr`|🌐 Web only| 902 902 + |`bg-gradient-to-r`|🌐 Web only| 903 903 + |`bg-gradient-to-br`|🌐 Web only| 904 904 + |`bg-gradient-to-b`|🌐 Web only| 905 905 + |`bg-gradient-to-bl`|🌐 Web only| 906 906 + |`bg-gradient-to-l`|🌐 Web only| 907 907 + |`bg-gradient-to-tl`|🌐 Web only| 908 908 909 909 These classes are specifically designed for use in web development to apply background styles. 910 910 ··· 916 916 917 917 ### Compatibility 918 918 919 919 - | Class | Support | 920 920 - | ---------- | --------------- | 921 921 - | `shrink` | ✅ Full Support | 922 922 - | `shrink-0` | ✅ Full Support | 919 919 + |Class|Support| 920 920 + |-|-| 921 921 + |`shrink`|✅ Full Support| 922 922 + |`shrink-0`|✅ Full Support| 923 923 924 924 ## Background Origin 925 925 926 926 The following table outlines the support for different background origin classes in web development: 927 927 928 928 - | Class | Support | 929 929 - | ------------------- | -------- | 930 930 - | `bg-origin-border` | Web only | 931 931 - | `bg-origin-padding` | Web only | 932 932 - | `bg-origin-content` | Web only | 928 928 + |Class|Support| 929 929 + |-|-| 930 930 + |`bg-origin-border`|Web only| 931 931 + |`bg-origin-padding`|Web only| 932 932 + |`bg-origin-content`|Web only| 933 933 934 934 These classes are used to specify the positioning area of a background image within an element. Each class targets a different part of the element's box model: 935 935 ··· 1004 1004 1005 1005 ### Compatibility 1006 1006 1007 1007 - | Class | Support | 1008 1008 - | ------------------- | --------------- | 1009 1009 - | `flex-wrap` | ✅ Full Support | 1010 1010 - | `flex-wrap-reverse` | ✅ Full Support | 1011 1011 - | `flex-nowrap` | ✅ Full Support | 1007 1007 + |Class|Support| 1008 1008 + |-|-| 1009 1009 + |`flex-wrap`|✅ Full Support| 1010 1010 + |`flex-wrap-reverse`|✅ Full Support| 1011 1011 + |`flex-nowrap`|✅ Full Support| 1012 1012 1013 1013 ## Background Position 1014 1014 1015 1015 The following table outlines various CSS classes used for setting background positions, along with their support status: 1016 1016 1017 1017 - | Class | Support | 1018 1018 - | ----------------- | ----------- | 1019 1019 - | `bg-bottom` | 🌐 Web only | 1020 1020 - | `bg-center` | 🌐 Web only | 1021 1021 - | `bg-left` | 🌐 Web only | 1022 1022 - | `bg-left-bottom` | 🌐 Web only | 1023 1023 - | `bg-left-top` | 🌐 Web only | 1024 1024 - | `bg-right` | 🌐 Web only | 1025 1025 - | `bg-right-bottom` | 🌐 Web only | 1026 1026 - | `bg-right-top` | 🌐 Web only | 1027 1027 - | `bg-top` | 🌐 Web only | 1017 1017 + |Class|Support| 1018 1018 + |-|-| 1019 1019 + |`bg-bottom`|🌐 Web only| 1020 1020 + |`bg-center`|🌐 Web only| 1021 1021 + |`bg-left`|🌐 Web only| 1022 1022 + |`bg-left-bottom`|🌐 Web only| 1023 1023 + |`bg-left-top`|🌐 Web only| 1024 1024 + |`bg-right`|🌐 Web only| 1025 1025 + |`bg-right-bottom`|🌐 Web only| 1026 1026 + |`bg-right-top`|🌐 Web only| 1027 1027 + |`bg-top`|🌐 Web only| 1028 1028 1029 1029 These classes are used to position background images in various locations within an element. 1030 1030 ··· 1032 1032 1033 1033 The following table outlines various CSS classes related to background repeat properties, along with their support status: 1034 1034 1035 1035 - | Class | Support | 1036 1036 - | ----------------- | ----------- | 1037 1037 - | `bg-repeat` | 🌐 Web only | 1038 1038 - | `bg-no-repeat` | 🌐 Web only | 1039 1039 - | `bg-repeat-x` | 🌐 Web only | 1040 1040 - | `bg-repeat-y` | 🌐 Web only | 1041 1041 - | `bg-repeat-round` | 🌐 Web only | 1042 1042 - | `bg-repeat-space` | 🌐 Web only | 1035 1035 + |Class|Support| 1036 1036 + |-|-| 1037 1037 + |`bg-repeat`|🌐 Web only| 1038 1038 + |`bg-no-repeat`|🌐 Web only| 1039 1039 + |`bg-repeat-x`|🌐 Web only| 1040 1040 + |`bg-repeat-y`|🌐 Web only| 1041 1041 + |`bg-repeat-round`|🌐 Web only| 1042 1042 + |`bg-repeat-space`|🌐 Web only| 1043 1043 1044 1044 These classes are used to control how background images repeat within an element. Each class is supported exclusively on web platforms. 1045 1045 ··· 1047 1047 1048 1048 The following table outlines the support for various background size classes: 1049 1049 1050 1050 - | Class | Support | 1051 1051 - | ------------ | ----------- | 1052 1052 - | `bg-auto` | 🌐 Web only | 1053 1053 - | `bg-cover` | 🌐 Web only | 1054 1054 - | `bg-contain` | 🌐 Web only | 1050 1050 + |Class|Support| 1051 1051 + |-|-| 1052 1052 + |`bg-auto`|🌐 Web only| 1053 1053 + |`bg-cover`|🌐 Web only| 1054 1054 + |`bg-contain`|🌐 Web only| 1055 1055 1056 1056 These classes are used to control the sizing of background images in web development. 1057 1057 ··· 1060 1060 Nativewind offers two main strategies for integrating dark mode into your application: 1061 1061 1062 1062 1. **System Preference (Automatic)** 1063 1063 - 2. **Manual Selection (User Toggle)** 1063 1063 + 1. **Manual Selection (User Toggle)** 1064 1064 1065 1065 Both methods utilize the `colorScheme` from Nativewind, which provides a consistent API to interact with React Native's appearance settings. The underlying mechanism involves using the `Appearance` API on native platforms and `prefers-color-scheme` for web environments. 1066 1066 ··· 1145 1145 1146 1146 ### Compatibility 1147 1147 1148 1148 - | Class | Support | 1149 1149 - | --------------- | --------------- | 1150 1150 - | `aspect-auto` | ✅ Full Support | 1151 1151 - | `aspect-video` | ✅ Full Support | 1152 1152 - | `aspect-square` | ✅ Full Support | 1153 1153 - | `aspect-[n]` | ✅ Full Support | 1154 1154 - | `aspect-{n}` | ✅ Full Support | 1148 1148 + |Class|Support| 1149 1149 + |-|-| 1150 1150 + |`aspect-auto`|✅ Full Support| 1151 1151 + |`aspect-video`|✅ Full Support| 1152 1152 + |`aspect-square`|✅ Full Support| 1153 1153 + |`aspect-[n]`|✅ Full Support| 1154 1154 + |`aspect-{n}`|✅ Full Support| 1155 1155 1156 1156 ## Gap 1157 1157 ··· 1164 1164 1165 1165 ### Compatibility 1166 1166 1167 1167 - | Class | Support | 1168 1168 - | ----------- | --------------- | 1169 1169 - | `gap-{n}` | ✅ Full Support | 1170 1170 - | `gap-[n]` | ✅ Full Support | 1171 1171 - | `gap-x-{n}` | ✅ Full Support | 1172 1172 - | `gap-x-[n]` | ✅ Full Support | 1173 1173 - | `gap-y-{n}` | ✅ Full Support | 1174 1174 - | `gap-y-[n]` | ✅ Full Support | 1167 1167 + |Class|Support| 1168 1168 + |-|-| 1169 1169 + |`gap-{n}`|✅ Full Support| 1170 1170 + |`gap-[n]`|✅ Full Support| 1171 1171 + |`gap-x-{n}`|✅ Full Support| 1172 1172 + |`gap-x-[n]`|✅ Full Support| 1173 1173 + |`gap-y-{n}`|✅ Full Support| 1174 1174 + |`gap-y-[n]`|✅ Full Support| 1175 1175 1176 1176 ## Gradient Color Stops 1177 1177 1178 1178 - | Class | Support | 1179 1179 - | ------------------ | ----------- | 1180 1180 - | `from-inherit` | 🌐 Web only | 1181 1181 - | `from-current` | 🌐 Web only | 1182 1182 - | `from-transparent` | 🌐 Web only | 1183 1183 - | `from-black` | 🌐 Web only | 1184 1184 - | `from-white` | 🌐 Web only | 1185 1185 - | `from-{n}` | 🌐 Web only | 1186 1186 - | `from-[n]` | 🌐 Web only | 1187 1187 - | `via-inherit` | 🌐 Web only | 1188 1188 - | `via-current` | 🌐 Web only | 1189 1189 - | `via-transparent` | 🌐 Web only | 1190 1190 - | `via-black` | 🌐 Web only | 1191 1191 - | `via-white` | 🌐 Web only | 1192 1192 - | `via-{n}` | 🌐 Web only | 1193 1193 - | `via-[n]` | 🌐 Web only | 1194 1194 - | `to-inherit` | 🌐 Web only | 1195 1195 - | `to-current` | 🌐 Web only | 1196 1196 - | `to-transparent` | 🌐 Web only | 1197 1197 - | `to-black` | 🌐 Web only | 1198 1198 - | `to-white` | 🌐 Web only | 1199 1199 - | `to-{n}` | 🌐 Web only | 1200 1200 - | `to-[n]` | 🌐 Web only | 1178 1178 + |Class|Support| 1179 1179 + |-|-| 1180 1180 + |`from-inherit`|🌐 Web only| 1181 1181 + |`from-current`|🌐 Web only| 1182 1182 + |`from-transparent`|🌐 Web only| 1183 1183 + |`from-black`|🌐 Web only| 1184 1184 + |`from-white`|🌐 Web only| 1185 1185 + |`from-{n}`|🌐 Web only| 1186 1186 + |`from-[n]`|🌐 Web only| 1187 1187 + |`via-inherit`|🌐 Web only| 1188 1188 + |`via-current`|🌐 Web only| 1189 1189 + |`via-transparent`|🌐 Web only| 1190 1190 + |`via-black`|🌐 Web only| 1191 1191 + |`via-white`|🌐 Web only| 1192 1192 + |`via-{n}`|🌐 Web only| 1193 1193 + |`via-[n]`|🌐 Web only| 1194 1194 + |`to-inherit`|🌐 Web only| 1195 1195 + |`to-current`|🌐 Web only| 1196 1196 + |`to-transparent`|🌐 Web only| 1197 1197 + |`to-black`|🌐 Web only| 1198 1198 + |`to-white`|🌐 Web only| 1199 1199 + |`to-{n}`|🌐 Web only| 1200 1200 + |`to-[n]`|🌐 Web only| 1201 1201 1202 1202 ## Border Color 1203 1203 ··· 1207 1207 1208 1208 ### Compatibility 1209 1209 1210 1210 - | Class | Support | 1211 1211 - | ---------------- | --------------- | 1212 1212 - | `border-{n}` | ✅ Full Support | 1213 1213 - | `border-[n]` | ✅ Full Support | 1214 1214 - | `border-inherit` | 🌐 Web only | 1215 1215 - | `border-current` | 🌐 Web only | 1210 1210 + |Class|Support| 1211 1211 + |-|-| 1212 1212 + |`border-{n}`|✅ Full Support| 1213 1213 + |`border-[n]`|✅ Full Support| 1214 1214 + |`border-inherit`|🌐 Web only| 1215 1215 + |`border-current`|🌐 Web only| 1216 1216 1217 1217 #### Border Opacity (Native Only) 1218 1218 ··· 1239 1239 1240 1240 ### Compatibility 1241 1241 1242 1242 - | Class | Support | 1243 1243 - | ---------------- | ----------- | 1244 1244 - | `auto-cols-auto` | 🌐 Web only | 1245 1245 - | `auto-cols-min` | 🌐 Web only | 1246 1246 - | `auto-cols-max` | 🌐 Web only | 1247 1247 - | `auto-cols-fr` | 🌐 Web only | 1242 1242 + |Class|Support| 1243 1243 + |-|-| 1244 1244 + |`auto-cols-auto`|🌐 Web only| 1245 1245 + |`auto-cols-min`|🌐 Web only| 1246 1246 + |`auto-cols-max`|🌐 Web only| 1247 1247 + |`auto-cols-fr`|🌐 Web only| 1248 1248 1249 1249 ## Border Radius 1250 1250 ··· 1254 1254 1255 1255 ### Compatibility 1256 1256 1257 1257 - | Class | Support | 1258 1258 - | ----------------- | --------------- | 1259 1259 - | `rounded-none` | ✅ Full Support | 1260 1260 - | `rounded` | ✅ Full Support | 1261 1261 - | `rounded-{n}` | ✅ Full Support | 1262 1262 - | `rounded-[n]` | ✅ Full Support | 1263 1263 - | `rounded-full` | ✅ Full Support | 1264 1264 - | `rounded-t-none` | ✅ Full Support | 1265 1265 - | `rounded-t-{n}` | ✅ Full Support | 1266 1266 - | `rounded-t-[n]` | ✅ Full Support | 1267 1267 - | `rounded-t-full` | ✅ Full Support | 1268 1268 - | `rounded-r-none` | ✅ Full Support | 1269 1269 - | `rounded-r-{n}` | ✅ Full Support | 1270 1270 - | `rounded-r-[n]` | ✅ Full Support | 1271 1271 - | `rounded-r-full` | ✅ Full Support | 1272 1272 - | `rounded-b-none` | ✅ Full Support | 1273 1273 - | `rounded-b-{n}` | ✅ Full Support | 1274 1274 - | `rounded-b-[n]` | ✅ Full Support | 1275 1275 - | `rounded-b-full` | ✅ Full Support | 1276 1276 - | `rounded-l-none` | ✅ Full Support | 1277 1277 - | `rounded-l-{n}` | ✅ Full Support | 1278 1278 - | `rounded-l-[n]` | ✅ Full Support | 1279 1279 - | `rounded-l-full` | ✅ Full Support | 1280 1280 - | `rounded-tl-none` | ✅ Full Support | 1281 1281 - | `rounded-tl-{n}` | ✅ Full Support | 1282 1282 - | `rounded-tl-[n]` | ✅ Full Support | 1283 1283 - | `rounded-tl-full` | ✅ Full Support | 1284 1284 - | `rounded-tr-none` | ✅ Full Support | 1285 1285 - | `rounded-tr-{n}` | ✅ Full Support | 1286 1286 - | `rounded-tr-[n]` | ✅ Full Support | 1287 1287 - | `rounded-tr-full` | ✅ Full Support | 1288 1288 - | `rounded-br-none` | ✅ Full Support | 1289 1289 - | `rounded-br-{n}` | ✅ Full Support | 1290 1290 - | `rounded-br-[n]` | ✅ Full Support | 1291 1291 - | `rounded-br-full` | ✅ Full Support | 1292 1292 - | `rounded-bl-none` | ✅ Full Support | 1293 1293 - | `rounded-bl-{n}` | ✅ Full Support | 1294 1294 - | `rounded-bl-[n]` | ✅ Full Support | 1295 1295 - | `rounded-bl-full` | ✅ Full Support | 1296 1296 - | `border-inherit` | 🌐 Web only | 1297 1297 - | `border-current` | 🌐 Web only | 1257 1257 + |Class|Support| 1258 1258 + |-|-| 1259 1259 + |`rounded-none`|✅ Full Support| 1260 1260 + |`rounded`|✅ Full Support| 1261 1261 + |`rounded-{n}`|✅ Full Support| 1262 1262 + |`rounded-[n]`|✅ Full Support| 1263 1263 + |`rounded-full`|✅ Full Support| 1264 1264 + |`rounded-t-none`|✅ Full Support| 1265 1265 + |`rounded-t-{n}`|✅ Full Support| 1266 1266 + |`rounded-t-[n]`|✅ Full Support| 1267 1267 + |`rounded-t-full`|✅ Full Support| 1268 1268 + |`rounded-r-none`|✅ Full Support| 1269 1269 + |`rounded-r-{n}`|✅ Full Support| 1270 1270 + |`rounded-r-[n]`|✅ Full Support| 1271 1271 + |`rounded-r-full`|✅ Full Support| 1272 1272 + |`rounded-b-none`|✅ Full Support| 1273 1273 + |`rounded-b-{n}`|✅ Full Support| 1274 1274 + |`rounded-b-[n]`|✅ Full Support| 1275 1275 + |`rounded-b-full`|✅ Full Support| 1276 1276 + |`rounded-l-none`|✅ Full Support| 1277 1277 + |`rounded-l-{n}`|✅ Full Support| 1278 1278 + |`rounded-l-[n]`|✅ Full Support| 1279 1279 + |`rounded-l-full`|✅ Full Support| 1280 1280 + |`rounded-tl-none`|✅ Full Support| 1281 1281 + |`rounded-tl-{n}`|✅ Full Support| 1282 1282 + |`rounded-tl-[n]`|✅ Full Support| 1283 1283 + |`rounded-tl-full`|✅ Full Support| 1284 1284 + |`rounded-tr-none`|✅ Full Support| 1285 1285 + |`rounded-tr-{n}`|✅ Full Support| 1286 1286 + |`rounded-tr-[n]`|✅ Full Support| 1287 1287 + |`rounded-tr-full`|✅ Full Support| 1288 1288 + |`rounded-br-none`|✅ Full Support| 1289 1289 + |`rounded-br-{n}`|✅ Full Support| 1290 1290 + |`rounded-br-[n]`|✅ Full Support| 1291 1291 + |`rounded-br-full`|✅ Full Support| 1292 1292 + |`rounded-bl-none`|✅ Full Support| 1293 1293 + |`rounded-bl-{n}`|✅ Full Support| 1294 1294 + |`rounded-bl-[n]`|✅ Full Support| 1295 1295 + |`rounded-bl-full`|✅ Full Support| 1296 1296 + |`border-inherit`|🌐 Web only| 1297 1297 + |`border-current`|🌐 Web only| 1298 1298 1299 1299 ## Box Decoration Break 1300 1300 ··· 1304 1304 1305 1305 ### Compatibility 1306 1306 1307 1307 - | Class | Support | 1308 1308 - | ---------------------- | ----------- | 1309 1309 - | `box-decoration-clone` | 🌐 Web only | 1310 1310 - | `box-decoration-slice` | 🌐 Web only | 1307 1307 + |Class|Support| 1308 1308 + |-|-| 1309 1309 + |`box-decoration-clone`|🌐 Web only| 1310 1310 + |`box-decoration-slice`|🌐 Web only| 1311 1311 1312 1312 ## Grid Auto Flow 1313 1313 ··· 1317 1317 1318 1318 ### Compatibility 1319 1319 1320 1320 - | Class | Support | 1321 1321 - | --------------------- | ----------- | 1322 1322 - | `grid-flow-row` | 🌐 Web only | 1323 1323 - | `grid-flow-col` | 🌐 Web only | 1324 1324 - | `grid-flow-dense` | 🌐 Web only | 1325 1325 - | `grid-flow-row-dense` | 🌐 Web only | 1326 1326 - | `grid-flow-col-dense` | 🌐 Web only | 1320 1320 + |Class|Support| 1321 1321 + |-|-| 1322 1322 + |`grid-flow-row`|🌐 Web only| 1323 1323 + |`grid-flow-col`|🌐 Web only| 1324 1324 + |`grid-flow-dense`|🌐 Web only| 1325 1325 + |`grid-flow-row-dense`|🌐 Web only| 1326 1326 + |`grid-flow-col-dense`|🌐 Web only| 1327 1327 1328 1328 ## Border Style 1329 1329 ··· 1335 1335 1336 1336 When working with native environments, use `border-0` instead of `border-none` to eliminate borders. Below is a table indicating support levels for various border classes: 1337 1337 1338 1338 - | Class | Support | 1339 1339 - | --------------- | --------------- | 1340 1340 - | `border-solid` | ✅ Full Support | 1341 1341 - | `border-dashed` | ✅ Full Support | 1342 1342 - | `border-dotted` | ✅ Full Support | 1343 1343 - | `border-none` | 🌐 Web only | 1344 1344 - | `border-double` | 🌐 Web only | 1345 1345 - | `border-hidden` | 🌐 Web only | 1338 1338 + |Class|Support| 1339 1339 + |-|-| 1340 1340 + |`border-solid`|✅ Full Support| 1341 1341 + |`border-dashed`|✅ Full Support| 1342 1342 + |`border-dotted`|✅ Full Support| 1343 1343 + |`border-none`|🌐 Web only| 1344 1344 + |`border-double`|🌐 Web only| 1345 1345 + |`border-hidden`|🌐 Web only| 1346 1346 1347 1347 ## Border Width 1348 1348 ··· 1354 1354 1355 1355 The following table outlines the support status for various border width classes: 1356 1356 1357 1357 - | Class | Support | 1358 1358 - | -------------- | --------------- | 1359 1359 - | `border` | ✅ Full Support | 1360 1360 - | `border-{n}` | ✅ Full Support | 1361 1361 - | `border-[n]` | ✅ Full Support | 1362 1362 - | `border-x` | ✅ Full Support | 1363 1363 - | `border-x-{n}` | ✅ Full Support | 1364 1364 - | `border-x-[n]` | ✅ Full Support | 1365 1365 - | `border-y` | ✅ Full Support | 1366 1366 - | `border-y-{n}` | ✅ Full Support | 1367 1367 - | `border-y-[n]` | ✅ Full Support | 1368 1368 - | `border-t` | ✅ Full Support | 1369 1369 - | `border-t-{n}` | ✅ Full Support | 1370 1370 - | `border-t-[n]` | ✅ Full Support | 1371 1371 - | `border-r` | ✅ Full Support | 1372 1372 - | `border-r-{n}` | ✅ Full Support | 1373 1373 - | `border-r-[n]` | ✅ Full Support | 1374 1374 - | `border-b` | ✅ Full Support | 1375 1375 - | `border-b-{n}` | ✅ Full Support | 1376 1376 - | `border-b-[n]` | ✅ Full Support | 1377 1377 - | `border-l` | ✅ Full Support | 1378 1378 - | `border-l-{n}` | ✅ Full Support | 1379 1379 - | `border-l-[n]` | ✅ Full Support | 1357 1357 + |Class|Support| 1358 1358 + |-|-| 1359 1359 + |`border`|✅ Full Support| 1360 1360 + |`border-{n}`|✅ Full Support| 1361 1361 + |`border-[n]`|✅ Full Support| 1362 1362 + |`border-x`|✅ Full Support| 1363 1363 + |`border-x-{n}`|✅ Full Support| 1364 1364 + |`border-x-[n]`|✅ Full Support| 1365 1365 + |`border-y`|✅ Full Support| 1366 1366 + |`border-y-{n}`|✅ Full Support| 1367 1367 + |`border-y-[n]`|✅ Full Support| 1368 1368 + |`border-t`|✅ Full Support| 1369 1369 + |`border-t-{n}`|✅ Full Support| 1370 1370 + |`border-t-[n]`|✅ Full Support| 1371 1371 + |`border-r`|✅ Full Support| 1372 1372 + |`border-r-{n}`|✅ Full Support| 1373 1373 + |`border-r-[n]`|✅ Full Support| 1374 1374 + |`border-b`|✅ Full Support| 1375 1375 + |`border-b-{n}`|✅ Full Support| 1376 1376 + |`border-b-[n]`|✅ Full Support| 1377 1377 + |`border-l`|✅ Full Support| 1378 1378 + |`border-l-{n}`|✅ Full Support| 1379 1379 + |`border-l-[n]`|✅ Full Support| 1380 1380 1381 1381 ## Grid Auto Rows 1382 1382 ··· 1386 1386 1387 1387 ### Compatibility 1388 1388 1389 1389 - | Class | Support | 1390 1390 - | ---------------- | ----------- | 1391 1391 - | `auto-rows-auto` | 🌐 Web only | 1392 1392 - | `auto-rows-min` | 🌐 Web only | 1393 1393 - | `auto-rows-max` | 🌐 Web only | 1394 1394 - | `auto-rows-fr` | 🌐 Web only | 1389 1389 + |Class|Support| 1390 1390 + |-|-| 1391 1391 + |`auto-rows-auto`|🌐 Web only| 1392 1392 + |`auto-rows-min`|🌐 Web only| 1393 1393 + |`auto-rows-max`|🌐 Web only| 1394 1394 + |`auto-rows-fr`|🌐 Web only| 1395 1395 1396 1396 ## Divide Color 1397 1397 ··· 1404 1404 1405 1405 ### Compatibility 1406 1406 1407 1407 - | Class | Support | 1408 1408 - | ---------------- | ----------- | 1409 1409 - | `divide-{n}` | 🌐 Web only | 1410 1410 - | `divide-[n]` | 🌐 Web only | 1411 1411 - | `divide-inherit` | 🌐 Web only | 1412 1412 - | `divide-current` | 🌐 Web only | 1407 1407 + |Class|Support| 1408 1408 + |-|-| 1409 1409 + |`divide-{n}`|🌐 Web only| 1410 1410 + |`divide-[n]`|🌐 Web only| 1411 1411 + |`divide-inherit`|🌐 Web only| 1412 1412 + |`divide-current`|🌐 Web only| 1413 1413 1414 1414 #### divideOpacity (native only) 1415 1415 ··· 1437 1437 1438 1438 ### Compatibility 1439 1439 1440 1440 - | Class | Support | 1441 1441 - | --------------- | ----------- | 1442 1442 - | `divide-solid` | 🌐 Web only | 1443 1443 - | `divide-dashed` | 🌐 Web only | 1444 1444 - | `divide-dotted` | 🌐 Web only | 1445 1445 - | `divide-none` | 🌐 Web only | 1446 1446 - | `divide-double` | 🌐 Web only | 1447 1447 - | `divide-hidden` | 🌐 Web only | 1440 1440 + |Class|Support| 1441 1441 + |-|-| 1442 1442 + |`divide-solid`|🌐 Web only| 1443 1443 + |`divide-dashed`|🌐 Web only| 1444 1444 + |`divide-dotted`|🌐 Web only| 1445 1445 + |`divide-none`|🌐 Web only| 1446 1446 + |`divide-double`|🌐 Web only| 1447 1447 + |`divide-hidden`|🌐 Web only| 1448 1448 1449 1449 ## Typescript 1450 1450 ··· 1676 1676 1677 1677 The following table outlines the compatibility of various grid column classes with web platforms: 1678 1678 1679 1679 - | Class | Support | 1680 1680 - | ---------------- | ----------- | 1681 1681 - | `col-auto` | 🌐 Web only | 1682 1682 - | `col-span-1` | 🌐 Web only | 1683 1683 - | `col-span-2` | 🌐 Web only | 1684 1684 - | `col-span-3` | 🌐 Web only | 1685 1685 - | `col-span-4` | 🌐 Web only | 1686 1686 - | `col-span-5` | 🌐 Web only | 1687 1687 - | `col-span-6` | 🌐 Web only | 1688 1688 - | `col-span-7` | 🌐 Web only | 1689 1689 - | `col-span-8` | 🌐 Web only | 1690 1690 - | `col-span-9` | 🌐 Web only | 1691 1691 - | `col-span-10` | 🌐 Web only | 1692 1692 - | `col-span-11` | 🌐 Web only | 1693 1693 - | `col-span-12` | 🌐 Web only | 1694 1694 - | `col-span-full` | 🌐 Web only | 1695 1695 - | `col-start-1` | 🌐 Web only | 1696 1696 - | `col-start-2` | 🌐 Web only | 1697 1697 - | `col-start-3` | 🌐 Web only | 1698 1698 - | `col-start-4` | 🌐 Web only | 1699 1699 - | `col-start-5` | 🌐 Web only | 1700 1700 - | `col-start-6` | 🌐 Web only | 1701 1701 - | `col-start-7` | 🌐 Web only | 1702 1702 - | `col-start-8` | 🌐 Web only | 1703 1703 - | `col-start-9` | 🌐 Web only | 1704 1704 - | `col-start-10` | 🌐 Web only | 1705 1705 - | `col-start-11` | 🌐 Web only | 1706 1706 - | `col-start-12` | 🌐 Web only | 1707 1707 - | `col-start-13` | 🌐 Web only | 1708 1708 - | `col-start-auto` | 🌐 Web only | 1709 1709 - | `col-end-1` | 🌐 Web only | 1710 1710 - | `col-end-2` | 🌐 Web only | 1711 1711 - | `col-end-3` | 🌐 Web only | 1712 1712 - | `col-end-4` | 🌐 Web only | 1713 1713 - | `col-end-5` | 🌐 Web only | 1714 1714 - | `col-end-6` | 🌐 Web only | 1715 1715 - | `col-end-7` | 🌐 Web only | 1716 1716 - | `col-end-8` | 🌐 Web only | 1717 1717 - | `col-end-9` | 🌐 Web only | 1718 1718 - | `col-end-10` | 🌐 Web only | 1719 1719 - | `col-end-11` | 🌐 Web only | 1720 1720 - | `col-end-12` | 🌐 Web only | 1721 1721 - | `col-end-13` | 🌐 Web only | 1722 1722 - | `col-end-auto` | 🌐 Web only | 1679 1679 + |Class|Support| 1680 1680 + |-|-| 1681 1681 + |`col-auto`|🌐 Web only| 1682 1682 + |`col-span-1`|🌐 Web only| 1683 1683 + |`col-span-2`|🌐 Web only| 1684 1684 + |`col-span-3`|🌐 Web only| 1685 1685 + |`col-span-4`|🌐 Web only| 1686 1686 + |`col-span-5`|🌐 Web only| 1687 1687 + |`col-span-6`|🌐 Web only| 1688 1688 + |`col-span-7`|🌐 Web only| 1689 1689 + |`col-span-8`|🌐 Web only| 1690 1690 + |`col-span-9`|🌐 Web only| 1691 1691 + |`col-span-10`|🌐 Web only| 1692 1692 + |`col-span-11`|🌐 Web only| 1693 1693 + |`col-span-12`|🌐 Web only| 1694 1694 + |`col-span-full`|🌐 Web only| 1695 1695 + |`col-start-1`|🌐 Web only| 1696 1696 + |`col-start-2`|🌐 Web only| 1697 1697 + |`col-start-3`|🌐 Web only| 1698 1698 + |`col-start-4`|🌐 Web only| 1699 1699 + |`col-start-5`|🌐 Web only| 1700 1700 + |`col-start-6`|🌐 Web only| 1701 1701 + |`col-start-7`|🌐 Web only| 1702 1702 + |`col-start-8`|🌐 Web only| 1703 1703 + |`col-start-9`|🌐 Web only| 1704 1704 + |`col-start-10`|🌐 Web only| 1705 1705 + |`col-start-11`|🌐 Web only| 1706 1706 + |`col-start-12`|🌐 Web only| 1707 1707 + |`col-start-13`|🌐 Web only| 1708 1708 + |`col-start-auto`|🌐 Web only| 1709 1709 + |`col-end-1`|🌐 Web only| 1710 1710 + |`col-end-2`|🌐 Web only| 1711 1711 + |`col-end-3`|🌐 Web only| 1712 1712 + |`col-end-4`|🌐 Web only| 1713 1713 + |`col-end-5`|🌐 Web only| 1714 1714 + |`col-end-6`|🌐 Web only| 1715 1715 + |`col-end-7`|🌐 Web only| 1716 1716 + |`col-end-8`|🌐 Web only| 1717 1717 + |`col-end-9`|🌐 Web only| 1718 1718 + |`col-end-10`|🌐 Web only| 1719 1719 + |`col-end-11`|🌐 Web only| 1720 1720 + |`col-end-12`|🌐 Web only| 1721 1721 + |`col-end-13`|🌐 Web only| 1722 1722 + |`col-end-auto`|🌐 Web only| 1723 1723 1724 1724 ## Divide Width 1725 1725 ··· 1733 1733 1734 1734 ### Compatibility 1735 1735 1736 1736 - | Class | Support | 1737 1737 - | -------------- | ----------- | 1738 1738 - | `divide-x-{n}` | 🌐 Web only | 1739 1739 - | `divide-x-[n]` | 🌐 Web only | 1740 1740 - | `divide-y-{n}` | 🌐 Web only | 1741 1741 - | `divide-y-[n]` | 🌐 Web only | 1736 1736 + |Class|Support| 1737 1737 + |-|-| 1738 1738 + |`divide-x-{n}`|🌐 Web only| 1739 1739 + |`divide-x-[n]`|🌐 Web only| 1740 1740 + |`divide-y-{n}`|🌐 Web only| 1741 1741 + |`divide-y-[n]`|🌐 Web only| 1742 1742 1743 1743 ## Outline Color 1744 1744 ··· 1748 1748 1749 1749 ### Compatibility 1750 1750 1751 1751 - | Class | Support | 1752 1752 - | --------------------- | ----------- | 1753 1753 - | `outline-inherit` | 🌐 Web only | 1754 1754 - | `outline-current` | 🌐 Web only | 1755 1755 - | `outline-transparent` | 🌐 Web only | 1756 1756 - | `outline-black` | 🌐 Web only | 1757 1757 - | `outline-white` | 🌐 Web only | 1758 1758 - | `outline-{n}` | 🌐 Web only | 1759 1759 - | `outline-[n]` | 🌐 Web only | 1751 1751 + |Class|Support| 1752 1752 + |-|-| 1753 1753 + |`outline-inherit`|🌐 Web only| 1754 1754 + |`outline-current`|🌐 Web only| 1755 1755 + |`outline-transparent`|🌐 Web only| 1756 1756 + |`outline-black`|🌐 Web only| 1757 1757 + |`outline-white`|🌐 Web only| 1758 1758 + |`outline-{n}`|🌐 Web only| 1759 1759 + |`outline-[n]`|🌐 Web only| 1760 1760 1761 1761 ## Outline Offset 1762 1762 ··· 1766 1766 1767 1767 ### Compatibility 1768 1768 1769 1769 - | Class | Support | 1770 1770 - | ------------------ | ----------- | 1771 1771 - | `outline-offset-0` | 🌐 Web only | 1772 1772 - | `outline-offset-1` | 🌐 Web only | 1773 1773 - | `outline-offset-2` | 🌐 Web only | 1774 1774 - | `outline-offset-4` | 🌐 Web only | 1775 1775 - | `outline-offset-8` | 🌐 Web only | 1769 1769 + |Class|Support| 1770 1770 + |-|-| 1771 1771 + |`outline-offset-0`|🌐 Web only| 1772 1772 + |`outline-offset-1`|🌐 Web only| 1773 1773 + |`outline-offset-2`|🌐 Web only| 1774 1774 + |`outline-offset-4`|🌐 Web only| 1775 1775 + |`outline-offset-8`|🌐 Web only| 1776 1776 1777 1777 ## Box Sizing 1778 1778 ··· 1782 1782 1783 1783 ### Compatibility 1784 1784 1785 1785 - | Class | Support | 1786 1786 - | ------------- | ----------- | 1787 1787 - | `box-border` | 🌐 Web only | 1788 1788 - | `box-content` | 🌐 Web only | 1785 1785 + |Class|Support| 1786 1786 + |-|-| 1787 1787 + |`box-border`|🌐 Web only| 1788 1788 + |`box-content`|🌐 Web only| 1789 1789 1790 1790 ## Grid Row Start / End 1791 1791 ··· 1797 1797 1798 1798 The following classes are supported exclusively on web platforms: 1799 1799 1800 1800 - | Class | Support | 1801 1801 - | ---------------- | ----------- | 1802 1802 - | `row-auto` | 🌐 Web only | 1803 1803 - | `row-span-1` | 🌐 Web only | 1804 1804 - | `row-span-2` | 🌐 Web only | 1805 1805 - | `row-span-3` | 🌐 Web only | 1806 1806 - | `row-span-4` | 🌐 Web only | 1807 1807 - | `row-span-5` | 🌐 Web only | 1808 1808 - | `row-span-6` | 🌐 Web only | 1809 1809 - | `row-span-7` | 🌐 Web only | 1810 1810 - | `row-span-8` | 🌐 Web only | 1811 1811 - | `row-span-9` | 🌐 Web only | 1812 1812 - | `row-span-10` | 🌐 Web only | 1813 1813 - | `row-span-11` | 🌐 Web only | 1814 1814 - | `row-span-12` | 🌐 Web only | 1815 1815 - | `row-span-full` | 🌐 Web only | 1816 1816 - | `row-start-1` | 🌐 Web only | 1817 1817 - | `row-start-2` | 🌐 Web only | 1818 1818 - | `row-start-3` | 🌐 Web only | 1819 1819 - | `row-start-4` | 🌐 Web only | 1820 1820 - | `row-start-5` | 🌐 Web only | 1821 1821 - | `row-start-6` | 🌐 Web only | 1822 1822 - | `row-start-7` | 🌐 Web only | 1823 1823 - | `row-start-8` | 🌐 Web only | 1824 1824 - | `row-start-9` | 🌐 Web only | 1825 1825 - | `row-start-10` | 🌐 Web only | 1826 1826 - | `row-start-11` | 🌐 Web only | 1827 1827 - | `row-start-12` | 🌐 Web only | 1828 1828 - | `row-start-13` | 🌐 Web only | 1829 1829 - | `row-start-auto` | 🌐 Web only | 1830 1830 - | `row-end-1` | 🌐 Web only | 1831 1831 - | `row-end-2` | 🌐 Web only | 1832 1832 - | `row-end-3` | 🌐 Web only | 1833 1833 - | `row-end-4` | 🌐 Web only | 1834 1834 - | `row-end-5` | 🌐 Web only | 1835 1835 - | `row-end-6` | 🌐 Web only | 1836 1836 - | `row-end-7` | 🌐 Web only | 1837 1837 - | `row-end-8` | 🌐 Web only | 1838 1838 - | `row-end-9` | 🌐 Web only | 1839 1839 - | `row-end-10` | 🌐 Web only | 1840 1840 - | `row-end-11` | 🌐 Web only | 1841 1841 - | `row-end-12` | 🌐 Web only | 1842 1842 - | `row-end-13` | 🌐 Web only | 1843 1843 - | `row-end-auto` | 🌐 Web only | 1800 1800 + |Class|Support| 1801 1801 + |-|-| 1802 1802 + |`row-auto`|🌐 Web only| 1803 1803 + |`row-span-1`|🌐 Web only| 1804 1804 + |`row-span-2`|🌐 Web only| 1805 1805 + |`row-span-3`|🌐 Web only| 1806 1806 + |`row-span-4`|🌐 Web only| 1807 1807 + |`row-span-5`|🌐 Web only| 1808 1808 + |`row-span-6`|🌐 Web only| 1809 1809 + |`row-span-7`|🌐 Web only| 1810 1810 + |`row-span-8`|🌐 Web only| 1811 1811 + |`row-span-9`|🌐 Web only| 1812 1812 + |`row-span-10`|🌐 Web only| 1813 1813 + |`row-span-11`|🌐 Web only| 1814 1814 + |`row-span-12`|🌐 Web only| 1815 1815 + |`row-span-full`|🌐 Web only| 1816 1816 + |`row-start-1`|🌐 Web only| 1817 1817 + |`row-start-2`|🌐 Web only| 1818 1818 + |`row-start-3`|🌐 Web only| 1819 1819 + |`row-start-4`|🌐 Web only| 1820 1820 + |`row-start-5`|🌐 Web only| 1821 1821 + |`row-start-6`|🌐 Web only| 1822 1822 + |`row-start-7`|🌐 Web only| 1823 1823 + |`row-start-8`|🌐 Web only| 1824 1824 + |`row-start-9`|🌐 Web only| 1825 1825 + |`row-start-10`|🌐 Web only| 1826 1826 + |`row-start-11`|🌐 Web only| 1827 1827 + |`row-start-12`|🌐 Web only| 1828 1828 + |`row-start-13`|🌐 Web only| 1829 1829 + |`row-start-auto`|🌐 Web only| 1830 1830 + |`row-end-1`|🌐 Web only| 1831 1831 + |`row-end-2`|🌐 Web only| 1832 1832 + |`row-end-3`|🌐 Web only| 1833 1833 + |`row-end-4`|🌐 Web only| 1834 1834 + |`row-end-5`|🌐 Web only| 1835 1835 + |`row-end-6`|🌐 Web only| 1836 1836 + |`row-end-7`|🌐 Web only| 1837 1837 + |`row-end-8`|🌐 Web only| 1838 1838 + |`row-end-9`|🌐 Web only| 1839 1839 + |`row-end-10`|🌐 Web only| 1840 1840 + |`row-end-11`|🌐 Web only| 1841 1841 + |`row-end-12`|🌐 Web only| 1842 1842 + |`row-end-13`|🌐 Web only| 1843 1843 + |`row-end-auto`|🌐 Web only| 1844 1844 1845 1845 ## Outline Style 1846 1846 ··· 1850 1850 1851 1851 ### Compatibility 1852 1852 1853 1853 - | Class | Support | 1854 1854 - | ---------------- | ----------- | 1855 1855 - | `outline-none` | 🌐 Web only | 1856 1856 - | `outline` | 🌐 Web only | 1857 1857 - | `outline-dashed` | 🌐 Web only | 1858 1858 - | `outline-dotted` | 🌐 Web only | 1859 1859 - | `outline-double` | 🌐 Web only | 1853 1853 + |Class|Support| 1854 1854 + |-|-| 1855 1855 + |`outline-none`|🌐 Web only| 1856 1856 + |`outline`|🌐 Web only| 1857 1857 + |`outline-dashed`|🌐 Web only| 1858 1858 + |`outline-dotted`|🌐 Web only| 1859 1859 + |`outline-double`|🌐 Web only| 1860 1860 1861 1861 ## Grid Template Columns 1862 1862 ··· 1866 1866 1867 1867 ### Compatibility 1868 1868 1869 1869 - | Class | Support | 1870 1870 - | ---------------- | ----------- | 1871 1871 - | `grid-cols-1` | 🌐 Web only | 1872 1872 - | `grid-cols-2` | 🌐 Web only | 1873 1873 - | `grid-cols-3` | 🌐 Web only | 1874 1874 - | `grid-cols-4` | 🌐 Web only | 1875 1875 - | `grid-cols-5` | 🌐 Web only | 1876 1876 - | `grid-cols-6` | 🌐 Web only | 1877 1877 - | `grid-cols-7` | 🌐 Web only | 1878 1878 - | `grid-cols-8` | 🌐 Web only | 1879 1879 - | `grid-cols-9` | 🌐 Web only | 1880 1880 - | `grid-cols-10` | 🌐 Web only | 1881 1881 - | `grid-cols-11` | 🌐 Web only | 1882 1882 - | `grid-cols-12` | 🌐 Web only | 1883 1883 - | `grid-cols-none` | 🌐 Web only | 1869 1869 + |Class|Support| 1870 1870 + |-|-| 1871 1871 + |`grid-cols-1`|🌐 Web only| 1872 1872 + |`grid-cols-2`|🌐 Web only| 1873 1873 + |`grid-cols-3`|🌐 Web only| 1874 1874 + |`grid-cols-4`|🌐 Web only| 1875 1875 + |`grid-cols-5`|🌐 Web only| 1876 1876 + |`grid-cols-6`|🌐 Web only| 1877 1877 + |`grid-cols-7`|🌐 Web only| 1878 1878 + |`grid-cols-8`|🌐 Web only| 1879 1879 + |`grid-cols-9`|🌐 Web only| 1880 1880 + |`grid-cols-10`|🌐 Web only| 1881 1881 + |`grid-cols-11`|🌐 Web only| 1882 1882 + |`grid-cols-12`|🌐 Web only| 1883 1883 + |`grid-cols-none`|🌐 Web only| 1884 1884 1885 1885 ## Outline Width 1886 1886 ··· 1890 1890 1891 1891 ### Compatibility 1892 1892 1893 1893 - | Class | Support | 1894 1894 - | ----------- | ----------- | 1895 1895 - | `outline-0` | 🌐 Web only | 1896 1896 - | `outline-1` | 🌐 Web only | 1897 1897 - | `outline-2` | 🌐 Web only | 1898 1898 - | `outline-4` | 🌐 Web only | 1899 1899 - | `outline-8` | 🌐 Web only | 1893 1893 + |Class|Support| 1894 1894 + |-|-| 1895 1895 + |`outline-0`|🌐 Web only| 1896 1896 + |`outline-1`|🌐 Web only| 1897 1897 + |`outline-2`|🌐 Web only| 1898 1898 + |`outline-4`|🌐 Web only| 1899 1899 + |`outline-8`|🌐 Web only| 1900 1900 1901 1901 ## Ring Color 1902 1902 ··· 1906 1906 1907 1907 ### Compatibility 1908 1908 1909 1909 - | Class | Support | 1910 1910 - | ------------------ | ----------- | 1911 1911 - | `ring-inherit` | 🌐 Web only | 1912 1912 - | `ring-current` | 🌐 Web only | 1913 1913 - | `ring-transparent` | 🌐 Web only | 1914 1914 - | `ring-black` | 🌐 Web only | 1915 1915 - | `ring-white` | 🌐 Web only | 1916 1916 - | `ring-{n}` | 🌐 Web only | 1917 1917 - | `ring-[n]` | 🌐 Web only | 1909 1909 + |Class|Support| 1910 1910 + |-|-| 1911 1911 + |`ring-inherit`|🌐 Web only| 1912 1912 + |`ring-current`|🌐 Web only| 1913 1913 + |`ring-transparent`|🌐 Web only| 1914 1914 + |`ring-black`|🌐 Web only| 1915 1915 + |`ring-white`|🌐 Web only| 1916 1916 + |`ring-{n}`|🌐 Web only| 1917 1917 + |`ring-[n]`|🌐 Web only| 1918 1918 1919 1919 ## Units 1920 1920 ··· 1922 1922 1923 1923 These units can be utilized within classes or in the `tailwind.config.js` file. 1924 1924 1925 1925 - | Unit | Name | Description | 1926 1926 - | ---- | ----------- | -------------------------------------------- | 1927 1927 - | vw | View Width | Implemented using `Dimensions.get('window')` | 1928 1928 - | vh | View Height | Implemented using `Dimensions.get('window')` | 1925 1925 + |Unit|Name|Description| 1926 1926 + |-|-|-| 1927 1927 + |vw|View Width|Implemented using `Dimensions.get('window')`| 1928 1928 + |vh|View Height|Implemented using `Dimensions.get('window')`| 1929 1929 1930 1930 ## Break After 1931 1931 ··· 1935 1935 1936 1936 ### Compatibility 1937 1937 1938 1938 - | Class | Support | 1939 1939 - | ------------------------ | ----------- | 1940 1940 - | `break-after-auto` | 🌐 Web only | 1941 1941 - | `break-after-avoid` | 🌐 Web only | 1942 1942 - | `break-after-all` | 🌐 Web only | 1943 1943 - | `break-after-avoid-page` | 🌐 Web only | 1944 1944 - | `break-after-page` | 🌐 Web only | 1945 1945 - | `break-after-left` | 🌐 Web only | 1946 1946 - | `break-after-right` | 🌐 Web only | 1947 1947 - | `break-after-column` | 🌐 Web only | 1938 1938 + |Class|Support| 1939 1939 + |-|-| 1940 1940 + |`break-after-auto`|🌐 Web only| 1941 1941 + |`break-after-avoid`|🌐 Web only| 1942 1942 + |`break-after-all`|🌐 Web only| 1943 1943 + |`break-after-avoid-page`|🌐 Web only| 1944 1944 + |`break-after-page`|🌐 Web only| 1945 1945 + |`break-after-left`|🌐 Web only| 1946 1946 + |`break-after-right`|🌐 Web only| 1947 1947 + |`break-after-column`|🌐 Web only| 1948 1948 1949 1949 ## Ring Offset Color 1950 1950 ··· 1954 1954 1955 1955 ### Compatibility 1956 1956 1957 1957 - | Class | Support | 1958 1958 - | --------------- | ----------- | 1959 1959 - | `ring-offset-0` | 🌐 Web only | 1960 1960 - | `ring-offset-1` | 🌐 Web only | 1961 1961 - | `ring-offset-2` | 🌐 Web only | 1962 1962 - | `ring-offset-4` | 🌐 Web only | 1963 1963 - | `ring-offset-8` | 🌐 Web only | 1957 1957 + |Class|Support| 1958 1958 + |-|-| 1959 1959 + |`ring-offset-0`|🌐 Web only| 1960 1960 + |`ring-offset-1`|🌐 Web only| 1961 1961 + |`ring-offset-2`|🌐 Web only| 1962 1962 + |`ring-offset-4`|🌐 Web only| 1963 1963 + |`ring-offset-8`|🌐 Web only| 1964 1964 1965 1965 ## Grid Template Rows 1966 1966 ··· 1970 1970 1971 1971 ### Compatibility 1972 1972 1973 1973 - | Class | Support | 1974 1974 - | ---------------- | ----------- | 1975 1975 - | `grid-rows-1` | 🌐 Web only | 1976 1976 - | `grid-rows-2` | 🌐 Web only | 1977 1977 - | `grid-rows-3` | 🌐 Web only | 1978 1978 - | `grid-rows-4` | 🌐 Web only | 1979 1979 - | `grid-rows-5` | 🌐 Web only | 1980 1980 - | `grid-rows-6` | 🌐 Web only | 1981 1981 - | `grid-rows-7` | 🌐 Web only | 1982 1982 - | `grid-rows-8` | 🌐 Web only | 1983 1983 - | `grid-rows-9` | 🌐 Web only | 1984 1984 - | `grid-rows-10` | 🌐 Web only | 1985 1985 - | `grid-rows-11` | 🌐 Web only | 1986 1986 - | `grid-rows-12` | 🌐 Web only | 1987 1987 - | `grid-rows-none` | 🌐 Web only | 1973 1973 + |Class|Support| 1974 1974 + |-|-| 1975 1975 + |`grid-rows-1`|🌐 Web only| 1976 1976 + |`grid-rows-2`|🌐 Web only| 1977 1977 + |`grid-rows-3`|🌐 Web only| 1978 1978 + |`grid-rows-4`|🌐 Web only| 1979 1979 + |`grid-rows-5`|🌐 Web only| 1980 1980 + |`grid-rows-6`|🌐 Web only| 1981 1981 + |`grid-rows-7`|🌐 Web only| 1982 1982 + |`grid-rows-8`|🌐 Web only| 1983 1983 + |`grid-rows-9`|🌐 Web only| 1984 1984 + |`grid-rows-10`|🌐 Web only| 1985 1985 + |`grid-rows-11`|🌐 Web only| 1986 1986 + |`grid-rows-12`|🌐 Web only| 1987 1987 + |`grid-rows-none`|🌐 Web only| 1988 1988 1989 1989 ## Ring Offset Width 1990 1990 ··· 1994 1994 1995 1995 ### Compatibility 1996 1996 1997 1997 - | Class | Support | 1998 1998 - | --------------- | ----------- | 1999 1999 - | `ring-offset-0` | 🌐 Web only | 2000 2000 - | `ring-offset-1` | 🌐 Web only | 2001 2001 - | `ring-offset-2` | 🌐 Web only | 2002 2002 - | `ring-offset-4` | 🌐 Web only | 2003 2003 - | `ring-offset-8` | 🌐 Web only | 1997 1997 + |Class|Support| 1998 1998 + |-|-| 1999 1999 + |`ring-offset-0`|🌐 Web only| 2000 2000 + |`ring-offset-1`|🌐 Web only| 2001 2001 + |`ring-offset-2`|🌐 Web only| 2002 2002 + |`ring-offset-4`|🌐 Web only| 2003 2003 + |`ring-offset-8`|🌐 Web only| 2004 2004 2005 2005 ## Ring Width 2006 2006 ··· 2010 2010 2011 2011 ### Compatibility 2012 2012 2013 2013 - | Class | Support | 2014 2014 - | ------------ | ----------- | 2015 2015 - | `ring-0` | 🌐 Web only | 2016 2016 - | `ring-1` | 🌐 Web only | 2017 2017 - | `ring-2` | 🌐 Web only | 2018 2018 - | `ring` | 🌐 Web only | 2019 2019 - | `ring-4` | 🌐 Web only | 2020 2020 - | `ring-8` | 🌐 Web only | 2021 2021 - | `ring-inset` | 🌐 Web only | 2013 2013 + |Class|Support| 2014 2014 + |-|-| 2015 2015 + |`ring-0`|🌐 Web only| 2016 2016 + |`ring-1`|🌐 Web only| 2017 2017 + |`ring-2`|🌐 Web only| 2018 2018 + |`ring`|🌐 Web only| 2019 2019 + |`ring-4`|🌐 Web only| 2020 2020 + |`ring-8`|🌐 Web only| 2021 2021 + |`ring-inset`|🌐 Web only| 2022 2022 2023 2023 ## Break Before 2024 2024 ··· 2028 2028 2029 2029 ### Compatibility 2030 2030 2031 2031 - | Class | Support | 2032 2032 - | ------------------------- | ----------- | 2033 2033 - | `break-before-auto` | 🌐 Web only | 2034 2034 - | `break-before-avoid` | 🌐 Web only | 2035 2035 - | `break-before-all` | 🌐 Web only | 2036 2036 - | `break-before-avoid-page` | 🌐 Web only | 2037 2037 - | `break-before-page` | 🌐 Web only | 2038 2038 - | `break-before-left` | 🌐 Web only | 2039 2039 - | `break-before-right` | 🌐 Web only | 2040 2040 - | `break-before-column` | 🌐 Web only | 2031 2031 + |Class|Support| 2032 2032 + |-|-| 2033 2033 + |`break-before-auto`|🌐 Web only| 2034 2034 + |`break-before-avoid`|🌐 Web only| 2035 2035 + |`break-before-all`|🌐 Web only| 2036 2036 + |`break-before-avoid-page`|🌐 Web only| 2037 2037 + |`break-before-page`|🌐 Web only| 2038 2038 + |`break-before-left`|🌐 Web only| 2039 2039 + |`break-before-right`|🌐 Web only| 2040 2040 + |`break-before-column`|🌐 Web only| 2041 2041 2042 2042 ## Justify Content 2043 2043 ··· 2047 2047 2048 2048 ### Compatibility 2049 2049 2050 2050 - | Class | Support | 2051 2051 - | ----------------- | --------------- | 2052 2052 - | `justify-start` | ✅ Full Support | 2053 2053 - | `justify-end` | ✅ Full Support | 2054 2054 - | `justify-center` | ✅ Full Support | 2055 2055 - | `justify-between` | ✅ Full Support | 2056 2056 - | `justify-around` | ✅ Full Support | 2057 2057 - | `justify-evenly` | ✅ Full Support | 2050 2050 + |Class|Support| 2051 2051 + |-|-| 2052 2052 + |`justify-start`|✅ Full Support| 2053 2053 + |`justify-end`|✅ Full Support| 2054 2054 + |`justify-center`|✅ Full Support| 2055 2055 + |`justify-between`|✅ Full Support| 2056 2056 + |`justify-around`|✅ Full Support| 2057 2057 + |`justify-evenly`|✅ Full Support| 2058 2058 2059 2059 ## Background Blend Mode 2060 2060 ··· 2066 2066 2067 2067 The following table outlines the support status for various background blend mode classes: 2068 2068 2069 2069 - | Class | Support | 2070 2070 - | ---------------------- | --------------- | 2071 2071 - | `bg-blend-normal` | ✅ Full Support | 2072 2072 - | `bg-blend-multiply` | ✅ Full Support | 2073 2073 - | `bg-blend-screen` | ✅ Full Support | 2074 2074 - | `bg-blend-overlay` | ✅ Full Support | 2075 2075 - | `bg-blend-darken` | ✅ Full Support | 2076 2076 - | `bg-blend-lighten` | ✅ Full Support | 2077 2077 - | `bg-blend-color-dodge` | ✅ Full Support | 2078 2078 - | `bg-blend-color-burn` | ✅ Full Support | 2079 2079 - | `bg-blend-hard-light` | ✅ Full Support | 2080 2080 - | `bg-blend-soft-light` | ✅ Full Support | 2081 2081 - | `bg-blend-difference` | ✅ Full Support | 2082 2082 - | `bg-blend-exclusion` | ✅ Full Support | 2083 2083 - | `bg-blend-hue` | ✅ Full Support | 2084 2084 - | `bg-blend-saturation` | ✅ Full Support | 2085 2085 - | `bg-blend-color` | ✅ Full Support | 2086 2086 - | `bg-blend-luminosity` | ✅ Full Support | 2069 2069 + |Class|Support| 2070 2070 + |-|-| 2071 2071 + |`bg-blend-normal`|✅ Full Support| 2072 2072 + |`bg-blend-multiply`|✅ Full Support| 2073 2073 + |`bg-blend-screen`|✅ Full Support| 2074 2074 + |`bg-blend-overlay`|✅ Full Support| 2075 2075 + |`bg-blend-darken`|✅ Full Support| 2076 2076 + |`bg-blend-lighten`|✅ Full Support| 2077 2077 + |`bg-blend-color-dodge`|✅ Full Support| 2078 2078 + |`bg-blend-color-burn`|✅ Full Support| 2079 2079 + |`bg-blend-hard-light`|✅ Full Support| 2080 2080 + |`bg-blend-soft-light`|✅ Full Support| 2081 2081 + |`bg-blend-difference`|✅ Full Support| 2082 2082 + |`bg-blend-exclusion`|✅ Full Support| 2083 2083 + |`bg-blend-hue`|✅ Full Support| 2084 2084 + |`bg-blend-saturation`|✅ Full Support| 2085 2085 + |`bg-blend-color`|✅ Full Support| 2086 2086 + |`bg-blend-luminosity`|✅ Full Support| 2087 2087 2088 2088 ## Justify Items 2089 2089 ··· 2093 2093 2094 2094 ### Compatibility 2095 2095 2096 2096 - | Class | Support | 2097 2097 - | ----------------------- | ----------- | 2098 2098 - | `justify-items-start` | 🌐 Web only | 2099 2099 - | `justify-items-end` | 🌐 Web only | 2100 2100 - | `justify-items-center` | 🌐 Web only | 2101 2101 - | `justify-items-stretch` | 🌐 Web only | 2096 2096 + |Class|Support| 2097 2097 + |-|-| 2098 2098 + |`justify-items-start`|🌐 Web only| 2099 2099 + |`justify-items-end`|🌐 Web only| 2100 2100 + |`justify-items-center`|🌐 Web only| 2101 2101 + |`justify-items-stretch`|🌐 Web only| 2102 2102 2103 2103 ## Box Shadow 2104 2104 ··· 2133 2133 2134 2134 ### Compatibility 2135 2135 2136 2136 - | Class | Support | 2137 2137 - | -------------- | --------------- | 2138 2138 - | `shadow` | ✅ Full Support | 2139 2139 - | `shadow-{n}` | ✅ Full Support | 2140 2140 - | `shadow-none` | ✅ Full Support | 2141 2141 - | `shadow-[n]` | 🌐 Web only | 2142 2142 - | `shadow-inner` | 🌐 Web only | 2136 2136 + |Class|Support| 2137 2137 + |-|-| 2138 2138 + |`shadow`|✅ Full Support| 2139 2139 + |`shadow-{n}`|✅ Full Support| 2140 2140 + |`shadow-none`|✅ Full Support| 2141 2141 + |`shadow-[n]`|🌐 Web only| 2142 2142 + |`shadow-inner`|🌐 Web only| 2143 2143 2144 2144 ## Box Shadow Color 2145 2145 ··· 2149 2149 2150 2150 ### Compatibility 2151 2151 2152 2152 - | Class | Support | 2153 2153 - | ------------ | --------------- | 2154 2154 - | `shadow-{n}` | ✅ Full Support | 2155 2155 - | `shadow-[n]` | ✅ Full Support | 2152 2152 + |Class|Support| 2153 2153 + |-|-| 2154 2154 + |`shadow-{n}`|✅ Full Support| 2155 2155 + |`shadow-[n]`|✅ Full Support| 2156 2156 2157 2157 ## Working with Third-Party Components in Nativewind 2158 2158 ··· 2368 2368 2369 2369 ### Compatibility 2370 2370 2371 2371 - | Class | Support | 2372 2372 - | --------------------------- | ----------- | 2373 2373 - | `break-inside-auto` | 🌐 Web only | 2374 2374 - | `break-inside-avoid` | 🌐 Web only | 2375 2375 - | `break-inside-avoid-page` | 🌐 Web only | 2376 2376 - | `break-inside-avoid-column` | 🌐 Web only | 2371 2371 + |Class|Support| 2372 2372 + |-|-| 2373 2373 + |`break-inside-auto`|🌐 Web only| 2374 2374 + |`break-inside-avoid`|🌐 Web only| 2375 2375 + |`break-inside-avoid-page`|🌐 Web only| 2376 2376 + |`break-inside-avoid-column`|🌐 Web only| 2377 2377 2378 2378 ## Justify Self 2379 2379 ··· 2383 2383 2384 2384 ### Compatibility 2385 2385 2386 2386 - | Class | Support | 2387 2387 - | ---------------------- | ----------- | 2388 2388 - | `justify-self-auto` | 🌐 Web only | 2389 2389 - | `justify-self-start` | 🌐 Web only | 2390 2390 - | `justify-self-end` | 🌐 Web only | 2391 2391 - | `justify-self-center` | 🌐 Web only | 2392 2392 - | `justify-self-stretch` | 🌐 Web only | 2386 2386 + |Class|Support| 2387 2387 + |-|-| 2388 2388 + |`justify-self-auto`|🌐 Web only| 2389 2389 + |`justify-self-start`|🌐 Web only| 2390 2390 + |`justify-self-end`|🌐 Web only| 2391 2391 + |`justify-self-center`|🌐 Web only| 2392 2392 + |`justify-self-stretch`|🌐 Web only| 2393 2393 2394 2394 ## Mix Blend Mode 2395 2395 ··· 2399 2399 2400 2400 ### Compatibility 2401 2401 2402 2402 - | Class | Support | 2403 2403 - | ------------------------ | ----------- | 2404 2404 - | `mix-blend-normal` | 🌐 Web only | 2405 2405 - | `mix-blend-multiply` | 🌐 Web only | 2406 2406 - | `mix-blend-screen` | 🌐 Web only | 2407 2407 - | `mix-blend-overlay` | 🌐 Web only | 2408 2408 - | `mix-blend-darken` | 🌐 Web only | 2409 2409 - | `mix-blend-lighten` | 🌐 Web only | 2410 2410 - | `mix-blend-color-dodge` | 🌐 Web only | 2411 2411 - | `mix-blend-color-burn` | 🌐 Web only | 2412 2412 - | `mix-blend-hard-light` | 🌐 Web only | 2413 2413 - | `mix-blend-soft-light` | 🌐 Web only | 2414 2414 - | `mix-blend-difference` | 🌐 Web only | 2415 2415 - | `mix-blend-exclusion` | 🌐 Web only | 2416 2416 - | `mix-blend-hue` | 🌐 Web only | 2417 2417 - | `mix-blend-saturation` | 🌐 Web only | 2418 2418 - | `mix-blend-color` | 🌐 Web only | 2419 2419 - | `mix-blend-luminosity` | 🌐 Web only | 2420 2420 - | `mix-blend-plus-lighter` | 🌐 Web only | 2402 2402 + |Class|Support| 2403 2403 + |-|-| 2404 2404 + |`mix-blend-normal`|🌐 Web only| 2405 2405 + |`mix-blend-multiply`|🌐 Web only| 2406 2406 + |`mix-blend-screen`|🌐 Web only| 2407 2407 + |`mix-blend-overlay`|🌐 Web only| 2408 2408 + |`mix-blend-darken`|🌐 Web only| 2409 2409 + |`mix-blend-lighten`|🌐 Web only| 2410 2410 + |`mix-blend-color-dodge`|🌐 Web only| 2411 2411 + |`mix-blend-color-burn`|🌐 Web only| 2412 2412 + |`mix-blend-hard-light`|🌐 Web only| 2413 2413 + |`mix-blend-soft-light`|🌐 Web only| 2414 2414 + |`mix-blend-difference`|🌐 Web only| 2415 2415 + |`mix-blend-exclusion`|🌐 Web only| 2416 2416 + |`mix-blend-hue`|🌐 Web only| 2417 2417 + |`mix-blend-saturation`|🌐 Web only| 2418 2418 + |`mix-blend-color`|🌐 Web only| 2419 2419 + |`mix-blend-luminosity`|🌐 Web only| 2420 2420 + |`mix-blend-plus-lighter`|🌐 Web only| 2421 2421 2422 2422 ## Opacity 2423 2423 ··· 2427 2427 2428 2428 ### Compatibility 2429 2429 2430 2430 - | Class | Support | 2431 2431 - | ------------- | --------------- | 2432 2432 - | `opacity-{n}` | ✅ Full Support | 2433 2433 - | `opacity-[n]` | ✅ Full Support | 2430 2430 + |Class|Support| 2431 2431 + |-|-| 2432 2432 + |`opacity-{n}`|✅ Full Support| 2433 2433 + |`opacity-[n]`|✅ Full Support| 2434 2434 2435 2435 ## Animation 2436 2436 ··· 2444 2444 2445 2445 ### Compatibility 2446 2446 2447 2447 - | Class | Support | 2448 2448 - | ---------------- | ----------------------- | 2449 2449 - | `animate-none` | 🧪 Experimental Support | 2450 2450 - | `animate-spin` | 🧪 Experimental Support | 2451 2451 - | `animate-ping` | 🧪 Experimental Support | 2452 2452 - | `animate-bounce` | 🧪 Experimental Support | 2453 2453 - | `animate-[n]` | 🧪 Experimental Support | 2447 2447 + |Class|Support| 2448 2448 + |-|-| 2449 2449 + |`animate-none`|🧪 Experimental Support| 2450 2450 + |`animate-spin`|🧪 Experimental Support| 2451 2451 + |`animate-ping`|🧪 Experimental Support| 2452 2452 + |`animate-bounce`|🧪 Experimental Support| 2453 2453 + |`animate-[n]`|🧪 Experimental Support| 2454 2454 2455 2455 ### Contributors 2456 2456 ··· 2468 2468 2469 2469 ### Compatibility 2470 2470 2471 2471 - | Class | Support | 2472 2472 - | ------------- | ----------- | 2473 2473 - | `order-1` | 🌐 Web only | 2474 2474 - | `order-2` | 🌐 Web only | 2475 2475 - | `order-3` | 🌐 Web only | 2476 2476 - | `order-4` | 🌐 Web only | 2477 2477 - | `order-5` | 🌐 Web only | 2478 2478 - | `order-6` | 🌐 Web only | 2479 2479 - | `order-7` | 🌐 Web only | 2480 2480 - | `order-8` | 🌐 Web only | 2481 2481 - | `order-9` | 🌐 Web only | 2482 2482 - | `order-10` | 🌐 Web only | 2483 2483 - | `order-11` | 🌐 Web only | 2484 2484 - | `order-12` | 🌐 Web only | 2485 2485 - | `order-first` | 🌐 Web only | 2486 2486 - | `order-last` | 🌐 Web only | 2487 2487 - | `order-none` | 🌐 Web only | 2471 2471 + |Class|Support| 2472 2472 + |-|-| 2473 2473 + |`order-1`|🌐 Web only| 2474 2474 + |`order-2`|🌐 Web only| 2475 2475 + |`order-3`|🌐 Web only| 2476 2476 + |`order-4`|🌐 Web only| 2477 2477 + |`order-5`|🌐 Web only| 2478 2478 + |`order-6`|🌐 Web only| 2479 2479 + |`order-7`|🌐 Web only| 2480 2480 + |`order-8`|🌐 Web only| 2481 2481 + |`order-9`|🌐 Web only| 2482 2482 + |`order-10`|🌐 Web only| 2483 2483 + |`order-11`|🌐 Web only| 2484 2484 + |`order-12`|🌐 Web only| 2485 2485 + |`order-first`|🌐 Web only| 2486 2486 + |`order-last`|🌐 Web only| 2487 2487 + |`order-none`|🌐 Web only| 2488 2488 2489 2489 ## Transition Delay 2490 2490 ··· 2498 2498 2499 2499 ### Compatibility 2500 2500 2501 2501 - | Class | Support | 2502 2502 - | ----------- | ----------------------- | 2503 2503 - | `delay-{n}` | 🧪 Experimental Support | 2504 2504 - | `delay-[n]` | 🧪 Experimental Support | 2501 2501 + |Class|Support| 2502 2502 + |-|-| 2503 2503 + |`delay-{n}`|🧪 Experimental Support| 2504 2504 + |`delay-[n]`|🧪 Experimental Support| 2505 2505 2506 2506 ## Transition Duration 2507 2507 ··· 2515 2515 2516 2516 ### Compatibility 2517 2517 2518 2518 - | Class | Support | 2519 2519 - | -------------- | ----------------------- | 2520 2520 - | `duration-{n}` | 🧪 Experimental Support | 2521 2521 - | `duration-[n]` | 🧪 Experimental Support | 2518 2518 + |Class|Support| 2519 2519 + |-|-| 2520 2520 + |`duration-{n}`|🧪 Experimental Support| 2521 2521 + |`duration-[n]`|🧪 Experimental Support| 2522 2522 2523 2523 ## Place Items 2524 2524 ··· 2528 2528 2529 2529 ### Compatibility 2530 2530 2531 2531 - | Class | Support | 2532 2532 - | ---------------------- | ----------- | 2533 2533 - | `place-items-start` | 🌐 Web only | 2534 2534 - | `place-items-end` | 🌐 Web only | 2535 2535 - | `place-items-center` | 🌐 Web only | 2536 2536 - | `place-items-baseline` | 🌐 Web only | 2537 2537 - | `place-items-stretch` | 🌐 Web only | 2531 2531 + |Class|Support| 2532 2532 + |-|-| 2533 2533 + |`place-items-start`|🌐 Web only| 2534 2534 + |`place-items-end`|🌐 Web only| 2535 2535 + |`place-items-center`|🌐 Web only| 2536 2536 + |`place-items-baseline`|🌐 Web only| 2537 2537 + |`place-items-stretch`|🌐 Web only| 2538 2538 2539 2539 ## Transition Property 2540 2540 ··· 2548 2548 2549 2549 ### Compatibility 2550 2550 2551 2551 - | Class | Support | 2552 2552 - | ---------------------- | ----------------------- | 2553 2553 - | `transition` | 🧪 Experimental Support | 2554 2554 - | `transition-all` | 🧪 Experimental Support | 2555 2555 - | `transition-colors` | 🧪 Experimental Support | 2556 2556 - | `transition-opacity` | 🧪 Experimental Support | 2557 2557 - | `transition-transform` | 🧪 Experimental Support | 2558 2558 - | `transition-{n}` | 🧪 Experimental Support | 2559 2559 - | `transition-[n]` | 🧪 Experimental Support | 2560 2560 - | `transition-shadow` | 🌐 Web only | 2551 2551 + |Class|Support| 2552 2552 + |-|-| 2553 2553 + |`transition`|🧪 Experimental Support| 2554 2554 + |`transition-all`|🧪 Experimental Support| 2555 2555 + |`transition-colors`|🧪 Experimental Support| 2556 2556 + |`transition-opacity`|🧪 Experimental Support| 2557 2557 + |`transition-transform`|🧪 Experimental Support| 2558 2558 + |`transition-{n}`|🧪 Experimental Support| 2559 2559 + |`transition-[n]`|🧪 Experimental Support| 2560 2560 + |`transition-shadow`|🌐 Web only| 2561 2561 2562 2562 ## Platform Differences 2563 2563 ··· 2613 2613 2614 2614 ### Compatibility 2615 2615 2616 2616 - | Class | Support | 2617 2617 - | ------------- | ----------- | 2618 2618 - | `clear-left` | 🌐 Web only | 2619 2619 - | `clear-right` | 🌐 Web only | 2620 2620 - | `clear-both` | 🌐 Web only | 2621 2621 - | `clear-none` | 🌐 Web only | 2616 2616 + |Class|Support| 2617 2617 + |-|-| 2618 2618 + |`clear-left`|🌐 Web only| 2619 2619 + |`clear-right`|🌐 Web only| 2620 2620 + |`clear-both`|🌐 Web only| 2621 2621 + |`clear-none`|🌐 Web only| 2622 2622 2623 2623 ## Place Content 2624 2624 ··· 2630 2630 2631 2631 The following table outlines the compatibility of various place content classes: 2632 2632 2633 2633 - | Class | Support | 2634 2634 - | ------------------------ | ----------- | 2635 2635 - | `place-content-center` | 🌐 Web only | 2636 2636 - | `place-content-start` | 🌐 Web only | 2637 2637 - | `place-content-end` | 🌐 Web only | 2638 2638 - | `place-content-between` | 🌐 Web only | 2639 2639 - | `place-content-around` | 🌐 Web only | 2640 2640 - | `place-content-evenly` | 🌐 Web only | 2641 2641 - | `place-content-baseline` | 🌐 Web only | 2642 2642 - | `place-content-stretch` | 🌐 Web only | 2633 2633 + |Class|Support| 2634 2634 + |-|-| 2635 2635 + |`place-content-center`|🌐 Web only| 2636 2636 + |`place-content-start`|🌐 Web only| 2637 2637 + |`place-content-end`|🌐 Web only| 2638 2638 + |`place-content-between`|🌐 Web only| 2639 2639 + |`place-content-around`|🌐 Web only| 2640 2640 + |`place-content-evenly`|🌐 Web only| 2641 2641 + |`place-content-baseline`|🌐 Web only| 2642 2642 + |`place-content-stretch`|🌐 Web only| 2643 2643 2644 2644 ## Transition Timing Function 2645 2645 ··· 2652 2652 2653 2653 ### Compatibility 2654 2654 2655 2655 - | Class | Support | 2656 2656 - | ---------- | ----------------------- | 2657 2657 - | `ease-{n}` | 🧪 Experimental Support | 2658 2658 - | `ease-[n]` | 🧪 Experimental Support | 2655 2655 + |Class|Support| 2656 2656 + |-|-| 2657 2657 + |`ease-{n}`|🧪 Experimental Support| 2658 2658 + |`ease-[n]`|🧪 Experimental Support| 2659 2659 2660 2660 ## Rotate 2661 2661 ··· 2665 2665 2666 2666 ### Compatibility 2667 2667 2668 2668 - | Class | Support | 2669 2669 - | ------------ | --------------- | 2670 2670 - | `rotate-{n}` | ✅ Full Support | 2671 2671 - | `rotate-[n]` | ✅ Full Support | 2668 2668 + |Class|Support| 2669 2669 + |-|-| 2670 2670 + |`rotate-{n}`|✅ Full Support| 2671 2671 + |`rotate-[n]`|✅ Full Support| 2672 2672 2673 2673 When using arbitrary styles or defining rotation values in your theme, always specify the `deg` unit. For example: `rotate-[90deg]`. 2674 2674 ··· 2682 2682 2683 2683 ### Compatibility 2684 2684 2685 2685 - | Class | Support | 2686 2686 - | ------------- | --------------- | 2687 2687 - | `scale-{n}` | ✅ Full Support | 2688 2688 - | `scale-[n]` | ✅ Full Support | 2689 2689 - | `scale-x-{n}` | ✅ Full Support | 2690 2690 - | `scale-x-[n]` | ✅ Full Support | 2691 2691 - | `scale-y-{n}` | ✅ Full Support | 2692 2692 - | `scale-y-[n]` | ✅ Full Support | 2685 2685 + |Class|Support| 2686 2686 + |-|-| 2687 2687 + |`scale-{n}`|✅ Full Support| 2688 2688 + |`scale-[n]`|✅ Full Support| 2689 2689 + |`scale-x-{n}`|✅ Full Support| 2690 2690 + |`scale-x-[n]`|✅ Full Support| 2691 2691 + |`scale-y-{n}`|✅ Full Support| 2692 2692 + |`scale-y-[n]`|✅ Full Support| 2693 2693 2694 2694 ## Columns 2695 2695 ··· 2699 2699 2700 2700 ### Compatibility 2701 2701 2702 2702 - | Class | Support | 2703 2703 - | ------------- | ----------- | 2704 2704 - | `columns-[n]` | 🌐 Web only | 2705 2705 - | `columns-{n}` | 🌐 Web only | 2702 2702 + |Class|Support| 2703 2703 + |-|-| 2704 2704 + |`columns-[n]`|🌐 Web only| 2705 2705 + |`columns-{n}`|🌐 Web only| 2706 2706 2707 2707 ## Place Self 2708 2708 ··· 2712 2712 2713 2713 ### Compatibility 2714 2714 2715 2715 - | Class | Support | 2716 2716 - | -------------------- | ----------- | 2717 2717 - | `place-self-auto` | 🌐 Web only | 2718 2718 - | `place-self-start` | 🌐 Web only | 2719 2719 - | `place-self-end` | 🌐 Web only | 2720 2720 - | `place-self-center` | 🌐 Web only | 2721 2721 - | `place-self-stretch` | 🌐 Web only | 2715 2715 + |Class|Support| 2716 2716 + |-|-| 2717 2717 + |`place-self-auto`|🌐 Web only| 2718 2718 + |`place-self-start`|🌐 Web only| 2719 2719 + |`place-self-end`|🌐 Web only| 2720 2720 + |`place-self-center`|🌐 Web only| 2721 2721 + |`place-self-stretch`|🌐 Web only| 2722 2722 2723 2723 ## Skew 2724 2724 ··· 2728 2728 2729 2729 ### Compatibility 2730 2730 2731 2731 - | Class | Support | 2732 2732 - | ------------ | --------------- | 2733 2733 - | `skew-x-{n}` | ✅ Full Support | 2734 2734 - | `skew-x-[n]` | ✅ Full Support | 2735 2735 - | `skew-y-{n}` | ✅ Full Support | 2736 2736 - | `skew-y-[n]` | ✅ Full Support | 2731 2731 + |Class|Support| 2732 2732 + |-|-| 2733 2733 + |`skew-x-{n}`|✅ Full Support| 2734 2734 + |`skew-x-[n]`|✅ Full Support| 2735 2735 + |`skew-y-{n}`|✅ Full Support| 2736 2736 + |`skew-y-[n]`|✅ Full Support| 2737 2737 2738 2738 ## Transform Origin 2739 2739 ··· 2743 2743 2744 2744 ### Compatibility 2745 2745 2746 2746 - | Class | Support | 2747 2747 - | --------------------- | ----------- | 2748 2748 - | `origin-center` | 🌐 Web only | 2749 2749 - | `origin-top` | 🌐 Web only | 2750 2750 - | `origin-top-right` | 🌐 Web only | 2751 2751 - | `origin-right` | 🌐 Web only | 2752 2752 - | `origin-bottom-right` | 🌐 Web only | 2753 2753 - | `origin-bottom` | 🌐 Web only | 2754 2754 - | `origin-bottom-left` | 🌐 Web only | 2755 2755 - | `origin-left` | 🌐 Web only | 2756 2756 - | `origin-top-left` | 🌐 Web only | 2746 2746 + |Class|Support| 2747 2747 + |-|-| 2748 2748 + |`origin-center`|🌐 Web only| 2749 2749 + |`origin-top`|🌐 Web only| 2750 2750 + |`origin-top-right`|🌐 Web only| 2751 2751 + |`origin-right`|🌐 Web only| 2752 2752 + |`origin-bottom-right`|🌐 Web only| 2753 2753 + |`origin-bottom`|🌐 Web only| 2754 2754 + |`origin-bottom-left`|🌐 Web only| 2755 2755 + |`origin-left`|🌐 Web only| 2756 2756 + |`origin-top-left`|🌐 Web only| 2757 2757 2758 2758 ### Contributors 2759 2759 ··· 2777 2777 2778 2778 The following table outlines the support status for various margin classes: 2779 2779 2780 2780 - | Class | Support | 2781 2781 - | --------- | --------------- | 2782 2782 - | `m-{n}` | ✅ Full Support | 2783 2783 - | `m-[n]` | ✅ Full Support | 2784 2784 - | `mx-{n}` | ✅ Full Support | 2785 2785 - | `mx-[n]` | ✅ Full Support | 2786 2786 - | `my-{n}` | ✅ Full Support | 2787 2787 - | `my-[n]` | ✅ Full Support | 2788 2788 - | `mt-{n}` | ✅ Full Support | 2789 2789 - | `mt-[n]` | ✅ Full Support | 2790 2790 - | `mr-{n}` | ✅ Full Support | 2791 2791 - | `mr-[n]` | ✅ Full Support | 2792 2792 - | `mb-{n}` | ✅ Full Support | 2793 2793 - | `mb-[n]` | ✅ Full Support | 2794 2794 - | `ml-{n}` | ✅ Full Support | 2795 2795 - | `ml-[n]` | ✅ Full Support | 2796 2796 - | `m-auto` | ✅ Full Support | 2797 2797 - | `mx-auto` | ✅ Full Support | 2798 2798 - | `my-auto` | ✅ Full Support | 2799 2799 - | `mt-auto` | ✅ Full Support | 2800 2800 - | `mr-auto` | ✅ Full Support | 2801 2801 - | `mb-auto` | ✅ Full Support | 2802 2802 - | `ml-auto` | ✅ Full Support | 2780 2780 + |Class|Support| 2781 2781 + |-|-| 2782 2782 + |`m-{n}`|✅ Full Support| 2783 2783 + |`m-[n]`|✅ Full Support| 2784 2784 + |`mx-{n}`|✅ Full Support| 2785 2785 + |`mx-[n]`|✅ Full Support| 2786 2786 + |`my-{n}`|✅ Full Support| 2787 2787 + |`my-[n]`|✅ Full Support| 2788 2788 + |`mt-{n}`|✅ Full Support| 2789 2789 + |`mt-[n]`|✅ Full Support| 2790 2790 + |`mr-{n}`|✅ Full Support| 2791 2791 + |`mr-[n]`|✅ Full Support| 2792 2792 + |`mb-{n}`|✅ Full Support| 2793 2793 + |`mb-[n]`|✅ Full Support| 2794 2794 + |`ml-{n}`|✅ Full Support| 2795 2795 + |`ml-[n]`|✅ Full Support| 2796 2796 + |`m-auto`|✅ Full Support| 2797 2797 + |`mx-auto`|✅ Full Support| 2798 2798 + |`my-auto`|✅ Full Support| 2799 2799 + |`mt-auto`|✅ Full Support| 2800 2800 + |`mr-auto`|✅ Full Support| 2801 2801 + |`mb-auto`|✅ Full Support| 2802 2802 + |`ml-auto`|✅ Full Support| 2803 2803 2804 2804 ## Translate 2805 2805 ··· 2809 2809 2810 2810 ### Compatibility 2811 2811 2812 2812 - | Class | Support | 2813 2813 - | ----------------- | --------------- | 2814 2814 - | `translate-x-{n}` | ✅ Full Support | 2815 2815 - | `translate-x-[n]` | ✅ Full Support | 2816 2816 - | `translate-y-{n}` | ✅ Full Support | 2817 2817 - | `translate-y-[n]` | ✅ Full Support | 2812 2812 + |Class|Support| 2813 2813 + |-|-| 2814 2814 + |`translate-x-{n}`|✅ Full Support| 2815 2815 + |`translate-x-[n]`|✅ Full Support| 2816 2816 + |`translate-y-{n}`|✅ Full Support| 2817 2817 + |`translate-y-[n]`|✅ Full Support| 2818 2818 2819 2819 ## Other Bundlers 2820 2820 2821 2821 Nativewind offers installation guidance for the two most prevalent React Native bundlers, Metro and Next.js. However, it is compatible with any bundler. To integrate Nativewind successfully, ensure these three conditions are satisfied: 2822 2822 2823 2823 1. Tailwind CSS must be configured using the Nativewind preset. 2824 2824 - 2. React Native should be set up, specifically utilizing React Native Web version 0.17 or higher. 2825 2825 - 3. The JSX runtime needs to be adjusted to `'automatic'`, and `jsxImportSource` should be assigned to `'nativewind'`. 2824 2824 + 1. React Native should be set up, specifically utilizing React Native Web version 0.17 or higher. 2825 2825 + 1. The JSX runtime needs to be adjusted to `'automatic'`, and `jsxImportSource` should be assigned to `'nativewind'`. 2826 2826 2827 2827 ### Troubleshooting for Web Bundlers 2828 2828 ··· 3255 3255 Nativewind defines the following specificity order from highest to lowest: 3256 3256 3257 3257 1. Styles marked as important (following CSS specificity rules) 3258 3258 - 2. Inline & remapped styles (applied in right-to-left order) 3259 3259 - 3. `className` styles (following CSS specificity rules) 3258 3258 + 1. Inline & remapped styles (applied in right-to-left order) 3259 3259 + 1. `className` styles (following CSS specificity rules) 3260 3260 3261 3261 ### Concept of Remapped Styles 3262 3262 ··· 3292 3292 3293 3293 The following table outlines the support for various padding classes: 3294 3294 3295 3295 - | Class | Support | 3296 3296 - | --------- | --------------- | 3297 3297 - | `p-{n}` | ✅ Full Support | 3298 3298 - | `p-[n]` | ✅ Full Support | 3299 3299 - | `px-{n}` | ✅ Full Support | 3300 3300 - | `px-[n]` | ✅ Full Support | 3301 3301 - | `py-{n}` | ✅ Full Support | 3302 3302 - | `py-[n]` | ✅ Full Support | 3303 3303 - | `pt-{n}` | ✅ Full Support | 3304 3304 - | `pt-[n]` | ✅ Full Support | 3305 3305 - | `pr-{n}` | ✅ Full Support | 3306 3306 - | `pr-[n]` | ✅ Full Support | 3307 3307 - | `pb-{n}` | ✅ Full Support | 3308 3308 - | `pb-[n]` | ✅ Full Support | 3309 3309 - | `pl-{n}` | ✅ Full Support | 3310 3310 - | `pl-[n]` | ✅ Full Support | 3311 3311 - | `p-auto` | 🌐 Web only | 3312 3312 - | `px-auto` | 🌐 Web only | 3313 3313 - | `py-auto` | 🌐 Web only | 3314 3314 - | `pt-auto` | 🌐 Web only | 3315 3315 - | `pr-auto` | 🌐 Web only | 3316 3316 - | `pb-auto` | 🌐 Web only | 3317 3317 - | `pl-auto` | 🌐 Web only | 3295 3295 + |Class|Support| 3296 3296 + |-|-| 3297 3297 + |`p-{n}`|✅ Full Support| 3298 3298 + |`p-[n]`|✅ Full Support| 3299 3299 + |`px-{n}`|✅ Full Support| 3300 3300 + |`px-[n]`|✅ Full Support| 3301 3301 + |`py-{n}`|✅ Full Support| 3302 3302 + |`py-[n]`|✅ Full Support| 3303 3303 + |`pt-{n}`|✅ Full Support| 3304 3304 + |`pt-[n]`|✅ Full Support| 3305 3305 + |`pr-{n}`|✅ Full Support| 3306 3306 + |`pr-[n]`|✅ Full Support| 3307 3307 + |`pb-{n}`|✅ Full Support| 3308 3308 + |`pb-[n]`|✅ Full Support| 3309 3309 + |`pl-{n}`|✅ Full Support| 3310 3310 + |`pl-[n]`|✅ Full Support| 3311 3311 + |`p-auto`|🌐 Web only| 3312 3312 + |`px-auto`|🌐 Web only| 3313 3313 + |`py-auto`|🌐 Web only| 3314 3314 + |`pt-auto`|🌐 Web only| 3315 3315 + |`pr-auto`|🌐 Web only| 3316 3316 + |`pb-auto`|🌐 Web only| 3317 3317 + |`pl-auto`|🌐 Web only| 3318 3318 3319 3319 ## Accent Color 3320 3320 ··· 3326 3326 3327 3327 The following table outlines the compatibility of various accent classes with different platforms: 3328 3328 3329 3329 - | Class | Support | 3330 3330 - | -------------------- | -------- | 3331 3331 - | `accent-{n}` | Web only | 3332 3332 - | `accent-[n]` | Web only | 3333 3333 - | `accent-black` | Web only | 3334 3334 - | `accent-white` | Web only | 3335 3335 - | `accent-transparent` | Web only | 3336 3336 - | `accent-inherit` | Web only | 3337 3337 - | `accent-current` | Web only | 3329 3329 + |Class|Support| 3330 3330 + |-|-| 3331 3331 + |`accent-{n}`|Web only| 3332 3332 + |`accent-[n]`|Web only| 3333 3333 + |`accent-black`|Web only| 3334 3334 + |`accent-white`|Web only| 3335 3335 + |`accent-transparent`|Web only| 3336 3336 + |`accent-inherit`|Web only| 3337 3337 + |`accent-current`|Web only| 3338 3338 3339 3339 ### Contributors 3340 3340 ··· 3352 3352 3353 3353 ### Compatibility 3354 3354 3355 3355 - | Class | Support | 3356 3356 - | ----------------- | ----------- | 3357 3357 - | `appearance-none` | 🌐 Web only | 3355 3355 + |Class|Support| 3356 3356 + |-|-| 3357 3357 + |`appearance-none`|🌐 Web only| 3358 3358 3359 3359 - --- 3359 3359 + *** 3360 3360 3361 3361 This reformatted content maintains the original structure and intent while ensuring clarity and adherence to markdown formatting standards. 3362 3362 ··· 3368 3368 3369 3369 ### Compatibility 3370 3370 3371 3371 - | Class | Support | 3372 3372 - | ------------------- | --------------- | 3373 3373 - | `caret-{n}` | ✅ Full Support | 3374 3374 - | `caret-[n]` | ✅ Full Support | 3375 3375 - | `caret-black` | ✅ Full Support | 3376 3376 - | `caret-white` | ✅ Full Support | 3377 3377 - | `caret-transparent` | ✅ Full Support | 3378 3378 - | `caret-inherit` | 🌐 Web only | 3379 3379 - | `caret-current` | 🌐 Web only | 3371 3371 + |Class|Support| 3372 3372 + |-|-| 3373 3373 + |`caret-{n}`|✅ Full Support| 3374 3374 + |`caret-[n]`|✅ Full Support| 3375 3375 + |`caret-black`|✅ Full Support| 3376 3376 + |`caret-white`|✅ Full Support| 3377 3377 + |`caret-transparent`|✅ Full Support| 3378 3378 + |`caret-inherit`|🌐 Web only| 3379 3379 + |`caret-current`|🌐 Web only| 3380 3380 3381 3381 ### Contributors 3382 3382 ··· 3394 3394 3395 3395 ### Compatibility 3396 3396 3397 3397 - | Class | Support | 3398 3398 - | ------------ | ----------- | 3399 3399 - | `cursor-{n}` | 🌐 Web only | 3400 3400 - | `cursor-[n]` | 🌐 Web only | 3397 3397 + |Class|Support| 3398 3398 + |-|-| 3399 3399 + |`cursor-{n}`|🌐 Web only| 3400 3400 + |`cursor-[n]`|🌐 Web only| 3401 3401 3402 3402 ## Container 3403 3403 ··· 3409 3409 3410 3410 ### Compatibility 3411 3411 3412 3412 - | Class | Support | 3413 3413 - | ----------- | --------------- | 3414 3414 - | `container` | ✅ Full Support | 3412 3412 + |Class|Support| 3413 3413 + |-|-| 3414 3414 + |`container`|✅ Full Support| 3415 3415 3416 3416 ## Space Between 3417 3417 ··· 3424 3424 3425 3425 ### Compatibility 3426 3426 3427 3427 - | Class | Support | 3428 3428 - | ----------------- | ----------- | 3429 3429 - | `space-{n}` | 🌐 Web only | 3430 3430 - | `space-[n]` | 🌐 Web only | 3431 3431 - | `space-x-{n}` | 🌐 Web only | 3432 3432 - | `space-x-[n]` | 🌐 Web only | 3433 3433 - | `space-y-{n}` | 🌐 Web only | 3434 3434 - | `space-y-[n]` | 🌐 Web only | 3435 3435 - | `space-x-reverse` | 🌐 Web only | 3436 3436 - | `space-y-reverse` | 🌐 Web only | 3427 3427 + |Class|Support| 3428 3428 + |-|-| 3429 3429 + |`space-{n}`|🌐 Web only| 3430 3430 + |`space-[n]`|🌐 Web only| 3431 3431 + |`space-x-{n}`|🌐 Web only| 3432 3432 + |`space-x-[n]`|🌐 Web only| 3433 3433 + |`space-y-{n}`|🌐 Web only| 3434 3434 + |`space-y-[n]`|🌐 Web only| 3435 3435 + |`space-x-reverse`|🌐 Web only| 3436 3436 + |`space-y-reverse`|🌐 Web only| 3437 3437 3438 3438 ## Pointer Events 3439 3439 ··· 3443 3443 3444 3444 ### Compatibility 3445 3445 3446 3446 - | Class | Support | 3447 3447 - | ------------------------- | --------------- | 3448 3448 - | `pointer-events-none` | ✅ Full Support | 3449 3449 - | `pointer-events-auto` | ✅ Full Support | 3450 3450 - | `pointer-events-box-none` | 📱 Native only | 3451 3451 - | `pointer-events-box-only` | 📱 Native only | 3446 3446 + |Class|Support| 3447 3447 + |-|-| 3448 3448 + |`pointer-events-none`|✅ Full Support| 3449 3449 + |`pointer-events-auto`|✅ Full Support| 3450 3450 + |`pointer-events-box-none`|📱 Native only| 3451 3451 + |`pointer-events-box-only`|📱 Native only| 3452 3452 3453 3453 ## Height 3454 3454 ··· 3458 3458 3459 3459 ### Compatibility 3460 3460 3461 3461 - | Class | Support | 3462 3462 - | ---------- | --------------- | 3463 3463 - | `h-{n}` | ✅ Full Support | 3464 3464 - | `h-[n]` | ✅ Full Support | 3465 3465 - | `h-full` | ✅ Full Support | 3466 3466 - | `h-screen` | ✅ Full Support | 3467 3467 - | `h-auto` | 🌐 Web only | 3468 3468 - | `h-min` | 🌐 Web only | 3469 3469 - | `h-max` | 🌐 Web only | 3470 3470 - | `h-fit` | 🌐 Web only | 3461 3461 + |Class|Support| 3462 3462 + |-|-| 3463 3463 + |`h-{n}`|✅ Full Support| 3464 3464 + |`h-[n]`|✅ Full Support| 3465 3465 + |`h-full`|✅ Full Support| 3466 3466 + |`h-screen`|✅ Full Support| 3467 3467 + |`h-auto`|🌐 Web only| 3468 3468 + |`h-min`|🌐 Web only| 3469 3469 + |`h-max`|🌐 Web only| 3470 3470 + |`h-fit`|🌐 Web only| 3471 3471 3472 3472 ## Resize 3473 3473 ··· 3477 3477 3478 3478 ### Compatibility 3479 3479 3480 3480 - | Class | Support | 3481 3481 - | ------------- | ----------- | 3482 3482 - | `resize-none` | 🌐 Web only | 3483 3483 - | `resize-y` | 🌐 Web only | 3484 3484 - | `resize-x` | 🌐 Web only | 3485 3485 - | `resize` | 🌐 Web only | 3480 3480 + |Class|Support| 3481 3481 + |-|-| 3482 3482 + |`resize-none`|🌐 Web only| 3483 3483 + |`resize-y`|🌐 Web only| 3484 3484 + |`resize-x`|🌐 Web only| 3485 3485 + |`resize`|🌐 Web only| 3486 3486 3487 3487 ## Scroll Behavior 3488 3488 ··· 3492 3492 3493 3493 ### Compatibility 3494 3494 3495 3495 - | Class | Support | 3496 3496 - | --------------- | ----------- | 3497 3497 - | `scroll-auto` | 🌐 Web only | 3498 3498 - | `scroll-smooth` | 🌐 Web only | 3495 3495 + |Class|Support| 3496 3496 + |-|-| 3497 3497 + |`scroll-auto`|🌐 Web only| 3498 3498 + |`scroll-smooth`|🌐 Web only| 3499 3499 3500 3500 ## Safe Area Insets 3501 3501 ··· 3549 3549 3550 3550 ### Compatibility 3551 3551 3552 3552 - | Class | Support | Comments | 3553 3553 - | --- | --- | --- | 3554 3554 - | `m-safe` | ✅ Full Support | Applies margins using safe area insets: `margin-top`, `margin-bottom`, `margin-left`, and `margin-right`. | 3555 3555 - | `p-safe` | ✅ Full Support | Applies padding using safe area insets: `padding-top`, `padding-bottom`, `padding-left`, and `padding-right`. | 3556 3556 - | `mx-safe` | ✅ Full Support | Sets horizontal margins with safe area insets. | 3557 3557 - | `px-safe` | ✅ Full Support | Sets horizontal padding with safe area insets. | 3558 3558 - | `my-safe` | ✅ Full Support | Sets vertical margins using safe area insets. | 3559 3559 - | `py-safe` | ✅ Full Support | Sets vertical padding using safe area insets. | 3560 3560 - | `mt-safe` | ✅ Full Support | Applies top margin with a safe area inset. | 3561 3561 - | `pt-safe` | ✅ Full Support | Applies top padding with a safe area inset. | 3562 3562 - | `mr-safe` | ✅ Full Support | Sets right margin using a safe area inset. | 3563 3563 - | `pr-safe` | ✅ Full Support | Sets right padding using a safe area inset. | 3564 3564 - | `mb-safe` | ✅ Full Support | Applies bottom margin with a safe area inset. | 3565 3565 - | `pb-safe` | ✅ Full Support | Applies bottom padding with a safe area inset. | 3566 3566 - | `ml-safe` | ✅ Full Support | Sets left margin using a safe area inset. | 3567 3567 - | `pl-safe` | ✅ Full Support | Sets left padding using a safe area inset. | 3568 3568 - | `*-safe-or-[n]` | ✅ Full Support | Allows substitution of any spacing utility (`*`) and value (`[n]`). Example: `mt-safe-or-4` translates to `margin-top: max(env(safe-area-inset-top), 1rem);`. Another example is `mt-safe-or-[2px]`, resulting in `margin-top: max(env(safe-area-inset-top), 2px);`. | 3569 3569 - | `h-screen-safe` | 🌐 Web only | Adjusts height using safe area insets: `height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))`. | 3570 3570 - | `*-safe-offset-[n]` | 🌐 Web only | Allows substitution of any spacing utility (`*`) and value (`[n]`). Example: `mt-safe-offset-4` results in `margin-top: calc(env(safe-area-inset-top) + 1rem);`. Another example is `mt-safe-offset-[2px]`, resulting in `margin-top: calc(env(safe-area-inset-top) + 2px);`. | 3552 3552 + |Class|Support|Comments| 3553 3553 + |-|-|-| 3554 3554 + |`m-safe`|✅ Full Support|Applies margins using safe area insets: `margin-top`, `margin-bottom`, `margin-left`, and `margin-right`.| 3555 3555 + |`p-safe`|✅ Full Support|Applies padding using safe area insets: `padding-top`, `padding-bottom`, `padding-left`, and `padding-right`.| 3556 3556 + |`mx-safe`|✅ Full Support|Sets horizontal margins with safe area insets.| 3557 3557 + |`px-safe`|✅ Full Support|Sets horizontal padding with safe area insets.| 3558 3558 + |`my-safe`|✅ Full Support|Sets vertical margins using safe area insets.| 3559 3559 + |`py-safe`|✅ Full Support|Sets vertical padding using safe area insets.| 3560 3560 + |`mt-safe`|✅ Full Support|Applies top margin with a safe area inset.| 3561 3561 + |`pt-safe`|✅ Full Support|Applies top padding with a safe area inset.| 3562 3562 + |`mr-safe`|✅ Full Support|Sets right margin using a safe area inset.| 3563 3563 + |`pr-safe`|✅ Full Support|Sets right padding using a safe area inset.| 3564 3564 + |`mb-safe`|✅ Full Support|Applies bottom margin with a safe area inset.| 3565 3565 + |`pb-safe`|✅ Full Support|Applies bottom padding with a safe area inset.| 3566 3566 + |`ml-safe`|✅ Full Support|Sets left margin using a safe area inset.| 3567 3567 + |`pl-safe`|✅ Full Support|Sets left padding using a safe area inset.| 3568 3568 + |`*-safe-or-[n]`|✅ Full Support|Allows substitution of any spacing utility (`*`) and value (`[n]`). Example: `mt-safe-or-4` translates to `margin-top: max(env(safe-area-inset-top), 1rem);`. Another example is `mt-safe-or-[2px]`, resulting in `margin-top: max(env(safe-area-inset-top), 2px);`.| 3569 3569 + |`h-screen-safe`|🌐 Web only|Adjusts height using safe area insets: `height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))`.| 3570 3570 + |`*-safe-offset-[n]`|🌐 Web only|Allows substitution of any spacing utility (`*`) and value (`[n]`). Example: `mt-safe-offset-4` results in `margin-top: calc(env(safe-area-inset-top) + 1rem);`. Another example is `mt-safe-offset-[2px]`, resulting in `margin-top: calc(env(safe-area-inset-top) + 2px);`.| 3571 3571 3572 3572 ## Display 3573 3573 ··· 3577 3577 3578 3578 ### Compatibility 3579 3579 3580 3580 - | Class | Support | 3581 3581 - | -------------------- | --------------- | 3582 3582 - | `flex` | ✅ Full Support | 3583 3583 - | `hidden` | ✅ Full Support | 3584 3584 - | `block` | 🌐 Web only | 3585 3585 - | `inline-block` | 🌐 Web only | 3586 3586 - | `inline` | 🌐 Web only | 3587 3587 - | `inline-flex` | 🌐 Web only | 3588 3588 - | `table` | 🌐 Web only | 3589 3589 - | `inline-table` | 🌐 Web only | 3590 3590 - | `table-caption` | 🌐 Web only | 3591 3591 - | `table-cell` | 🌐 Web only | 3592 3592 - | `table-column` | 🌐 Web only | 3593 3593 - | `table-column-group` | 🌐 Web only | 3594 3594 - | `table-footer-group` | 🌐 Web only | 3595 3595 - | `table-header-group` | 🌐 Web only | 3596 3596 - | `table-row-group` | 🌐 Web only | 3597 3597 - | `table-row` | 🌐 Web only | 3598 3598 - | `flow-root` | 🌐 Web only | 3599 3599 - | `grid` | 🌐 Web only | 3600 3600 - | `inline-grid` | 🌐 Web only | 3601 3601 - | `contents` | 🌐 Web only | 3602 3602 - | `list-item` | 🌐 Web only | 3580 3580 + |Class|Support| 3581 3581 + |-|-| 3582 3582 + |`flex`|✅ Full Support| 3583 3583 + |`hidden`|✅ Full Support| 3584 3584 + |`block`|🌐 Web only| 3585 3585 + |`inline-block`|🌐 Web only| 3586 3586 + |`inline`|🌐 Web only| 3587 3587 + |`inline-flex`|🌐 Web only| 3588 3588 + |`table`|🌐 Web only| 3589 3589 + |`inline-table`|🌐 Web only| 3590 3590 + |`table-caption`|🌐 Web only| 3591 3591 + |`table-cell`|🌐 Web only| 3592 3592 + |`table-column`|🌐 Web only| 3593 3593 + |`table-column-group`|🌐 Web only| 3594 3594 + |`table-footer-group`|🌐 Web only| 3595 3595 + |`table-header-group`|🌐 Web only| 3596 3596 + |`table-row-group`|🌐 Web only| 3597 3597 + |`table-row`|🌐 Web only| 3598 3598 + |`flow-root`|🌐 Web only| 3599 3599 + |`grid`|🌐 Web only| 3600 3600 + |`inline-grid`|🌐 Web only| 3601 3601 + |`contents`|🌐 Web only| 3602 3602 + |`list-item`|🌐 Web only| 3603 3603 3604 3604 ## Max-Height 3605 3605 ··· 3609 3609 3610 3610 ### Compatibility 3611 3611 3612 3612 - | Class | Support | 3613 3613 - | -------------- | --------------- | 3614 3614 - | `max-h-0` | ✅ Full Support | 3615 3615 - | `max-h-[n]` | ✅ Full Support | 3616 3616 - | `max-h-{n}` | ✅ Full Support | 3617 3617 - | `max-h-full` | ✅ Full Support | 3618 3618 - | `max-h-screen` | ✅ Full Support | 3619 3619 - | `max-h-min` | 🌐 Web only | 3620 3620 - | `max-h-max` | 🌐 Web only | 3621 3621 - | `max-h-fit` | 🌐 Web only | 3612 3612 + |Class|Support| 3613 3613 + |-|-| 3614 3614 + |`max-h-0`|✅ Full Support| 3615 3615 + |`max-h-[n]`|✅ Full Support| 3616 3616 + |`max-h-{n}`|✅ Full Support| 3617 3617 + |`max-h-full`|✅ Full Support| 3618 3618 + |`max-h-screen`|✅ Full Support| 3619 3619 + |`max-h-min`|🌐 Web only| 3620 3620 + |`max-h-max`|🌐 Web only| 3621 3621 + |`max-h-fit`|🌐 Web only| 3622 3622 3623 3623 ## Scroll Margin 3624 3624 ··· 3630 3630 3631 3631 The following classes are supported exclusively on web platforms: 3632 3632 3633 3633 - | Class | Support | 3634 3634 - | --------------- | ----------- | 3635 3635 - | `scroll-m-{n}` | 🌐 Web only | 3636 3636 - | `scroll-m-[n]` | 🌐 Web only | 3637 3637 - | `scroll-mx-{n}` | 🌐 Web only | 3638 3638 - | `scroll-mx-[n]` | 🌐 Web only | 3639 3639 - | `scroll-my-{n}` | 🌐 Web only | 3640 3640 - | `scroll-my-[n]` | 🌐 Web only | 3641 3641 - | `scroll-mt-{n}` | 🌐 Web only | 3642 3642 - | `scroll-mt-[n]` | 🌐 Web only | 3643 3643 - | `scroll-mr-{n}` | 🌐 Web only | 3644 3644 - | `scroll-mr-[n]` | 🌐 Web only | 3645 3645 - | `scroll-mb-{n}` | 🌐 Web only | 3646 3646 - | `scroll-mb-[n]` | 🌐 Web only | 3647 3647 - | `scroll-ml-{n}` | 🌐 Web only | 3648 3648 - | `scroll-ml-[n]` | 🌐 Web only | 3633 3633 + |Class|Support| 3634 3634 + |-|-| 3635 3635 + |`scroll-m-{n}`|🌐 Web only| 3636 3636 + |`scroll-m-[n]`|🌐 Web only| 3637 3637 + |`scroll-mx-{n}`|🌐 Web only| 3638 3638 + |`scroll-mx-[n]`|🌐 Web only| 3639 3639 + |`scroll-my-{n}`|🌐 Web only| 3640 3640 + |`scroll-my-[n]`|🌐 Web only| 3641 3641 + |`scroll-mt-{n}`|🌐 Web only| 3642 3642 + |`scroll-mt-[n]`|🌐 Web only| 3643 3643 + |`scroll-mr-{n}`|🌐 Web only| 3644 3644 + |`scroll-mr-[n]`|🌐 Web only| 3645 3645 + |`scroll-mb-{n}`|🌐 Web only| 3646 3646 + |`scroll-mb-[n]`|🌐 Web only| 3647 3647 + |`scroll-ml-{n}`|🌐 Web only| 3648 3648 + |`scroll-ml-[n]`|🌐 Web only| 3649 3649 3650 3650 ## Max-Width 3651 3651 ··· 3655 3655 3656 3656 ### Compatibility 3657 3657 3658 3658 - | Class | Support | 3659 3659 - | ------------------ | --------------- | 3660 3660 - | `max-w-0` | ✅ Full Support | 3661 3661 - | `max-w-[n]` | ✅ Full Support | 3662 3662 - | `max-w-{n}` | ✅ Full Support | 3663 3663 - | `max-w-full` | ✅ Full Support | 3664 3664 - | `max-w-screen-sm` | ✅ Full Support | 3665 3665 - | `max-w-screen-md` | ✅ Full Support | 3666 3666 - | `max-w-screen-lg` | ✅ Full Support | 3667 3667 - | `max-w-screen-xl` | ✅ Full Support | 3668 3668 - | `max-w-screen-2xl` | ✅ Full Support | 3669 3669 - | `max-w-min` | 🌐 Web only | 3670 3670 - | `max-w-max` | 🌐 Web only | 3671 3671 - | `max-w-fit` | 🌐 Web only | 3672 3672 - | `max-w-prose` | 🌐 Web only | 3658 3658 + |Class|Support| 3659 3659 + |-|-| 3660 3660 + |`max-w-0`|✅ Full Support| 3661 3661 + |`max-w-[n]`|✅ Full Support| 3662 3662 + |`max-w-{n}`|✅ Full Support| 3663 3663 + |`max-w-full`|✅ Full Support| 3664 3664 + |`max-w-screen-sm`|✅ Full Support| 3665 3665 + |`max-w-screen-md`|✅ Full Support| 3666 3666 + |`max-w-screen-lg`|✅ Full Support| 3667 3667 + |`max-w-screen-xl`|✅ Full Support| 3668 3668 + |`max-w-screen-2xl`|✅ Full Support| 3669 3669 + |`max-w-min`|🌐 Web only| 3670 3670 + |`max-w-max`|🌐 Web only| 3671 3671 + |`max-w-fit`|🌐 Web only| 3672 3672 + |`max-w-prose`|🌐 Web only| 3673 3673 3674 3674 ## Scroll Padding 3675 3675 ··· 3681 3681 3682 3682 The following classes are supported exclusively on web platforms: 3683 3683 3684 3684 - | Class | Support | 3685 3685 - | --------------- | ----------- | 3686 3686 - | `scroll-p-{n}` | 🌐 Web only | 3687 3687 - | `scroll-p-[n]` | 🌐 Web only | 3688 3688 - | `scroll-px-{n}` | 🌐 Web only | 3689 3689 - | `scroll-px-[n]` | 🌐 Web only | 3690 3690 - | `scroll-py-{n}` | 🌐 Web only | 3691 3691 - | `scroll-py-[n]` | 🌐 Web only | 3692 3692 - | `scroll-pt-{n}` | 🌐 Web only | 3693 3693 - | `scroll-pt-[n]` | 🌐 Web only | 3694 3694 - | `scroll-pr-{n}` | 🌐 Web only | 3695 3695 - | `scroll-pr-[n]` | 🌐 Web only | 3696 3696 - | `scroll-pb-{n}` | 🌐 Web only | 3697 3697 - | `scroll-pb-[n]` | 🌐 Web only | 3698 3698 - | `scroll-pl-{n}` | 🌐 Web only | 3699 3699 - | `scroll-pl-[n]` | 🌐 Web only | 3684 3684 + |Class|Support| 3685 3685 + |-|-| 3686 3686 + |`scroll-p-{n}`|🌐 Web only| 3687 3687 + |`scroll-p-[n]`|🌐 Web only| 3688 3688 + |`scroll-px-{n}`|🌐 Web only| 3689 3689 + |`scroll-px-[n]`|🌐 Web only| 3690 3690 + |`scroll-py-{n}`|🌐 Web only| 3691 3691 + |`scroll-py-[n]`|🌐 Web only| 3692 3692 + |`scroll-pt-{n}`|🌐 Web only| 3693 3693 + |`scroll-pt-[n]`|🌐 Web only| 3694 3694 + |`scroll-pr-{n}`|🌐 Web only| 3695 3695 + |`scroll-pr-[n]`|🌐 Web only| 3696 3696 + |`scroll-pb-{n}`|🌐 Web only| 3697 3697 + |`scroll-pb-[n]`|🌐 Web only| 3698 3698 + |`scroll-pl-{n}`|🌐 Web only| 3699 3699 + |`scroll-pl-[n]`|🌐 Web only| 3700 3700 3701 3701 ## Scroll Snap Align 3702 3702 ··· 3706 3706 3707 3707 ### Compatibility 3708 3708 3709 3709 - | Class | Support | 3710 3710 - | ----------------- | ----------- | 3711 3711 - | `snap-start` | 🌐 Web only | 3712 3712 - | `snap-end` | 🌐 Web only | 3713 3713 - | `snap-center` | 🌐 Web only | 3714 3714 - | `snap-align-none` | 🌐 Web only | 3709 3709 + |Class|Support| 3710 3710 + |-|-| 3711 3711 + |`snap-start`|🌐 Web only| 3712 3712 + |`snap-end`|🌐 Web only| 3713 3713 + |`snap-center`|🌐 Web only| 3714 3714 + |`snap-align-none`|🌐 Web only| 3715 3715 3716 3716 ## Floats 3717 3717 ··· 3721 3721 3722 3722 ### Compatibility 3723 3723 3724 3724 - | Class | Support | 3725 3725 - | ------------- | ----------- | 3726 3726 - | `float-right` | 🌐 Web only | 3727 3727 - | `float-left` | 🌐 Web only | 3728 3728 - | `float-none` | 🌐 Web only | 3724 3724 + |Class|Support| 3725 3725 + |-|-| 3726 3726 + |`float-right`|🌐 Web only| 3727 3727 + |`float-left`|🌐 Web only| 3728 3728 + |`float-none`|🌐 Web only| 3729 3729 3730 3730 ## Scroll Snap Stop 3731 3731 ··· 3735 3735 3736 3736 ### Compatibility 3737 3737 3738 3738 - | Class | Support | 3739 3739 - | ------------- | ----------- | 3740 3740 - | `snap-normal` | 🌐 Web only | 3741 3741 - | `snap-always` | 🌐 Web only | 3738 3738 + |Class|Support| 3739 3739 + |-|-| 3740 3740 + |`snap-normal`|🌐 Web only| 3741 3741 + |`snap-always`|🌐 Web only| 3742 3742 3743 3743 ## Min-Height 3744 3744 ··· 3748 3748 3749 3749 ### Compatibility 3750 3750 3751 3751 - | Class | Support | 3752 3752 - | ------------ | --------------- | 3753 3753 - | `min-h-0` | ✅ Full Support | 3754 3754 - | `min-h-[n]` | ✅ Full Support | 3755 3755 - | `min-h-full` | ✅ Full Support | 3756 3756 - | `min-h-min` | 🌐 Web only | 3757 3757 - | `min-h-max` | 🌐 Web only | 3758 3758 - | `min-h-fit` | 🌐 Web only | 3751 3751 + |Class|Support| 3752 3752 + |-|-| 3753 3753 + |`min-h-0`|✅ Full Support| 3754 3754 + |`min-h-[n]`|✅ Full Support| 3755 3755 + |`min-h-full`|✅ Full Support| 3756 3756 + |`min-h-min`|🌐 Web only| 3757 3757 + |`min-h-max`|🌐 Web only| 3758 3758 + |`min-h-fit`|🌐 Web only| 3759 3759 3760 3760 ```typescript 3761 3761 type MinHeightClasses = { ··· 3776 3776 3777 3777 ### Compatibility 3778 3778 3779 3779 - | Class | Support | 3780 3780 - | ---------------- | ----------- | 3781 3781 - | `snap-none` | 🌐 Web only | 3782 3782 - | `snap-x` | 🌐 Web only | 3783 3783 - | `snap-y` | 🌐 Web only | 3784 3784 - | `snap-both` | 🌐 Web only | 3785 3785 - | `snap-mandatory` | 🌐 Web only | 3786 3786 - | `snap-proximity` | 🌐 Web only | 3779 3779 + |Class|Support| 3780 3780 + |-|-| 3781 3781 + |`snap-none`|🌐 Web only| 3782 3782 + |`snap-x`|🌐 Web only| 3783 3783 + |`snap-y`|🌐 Web only| 3784 3784 + |`snap-both`|🌐 Web only| 3785 3785 + |`snap-mandatory`|🌐 Web only| 3786 3786 + |`snap-proximity`|🌐 Web only| 3787 3787 3788 3788 ## Touch Action 3789 3789 ··· 3795 3795 3796 3796 The following table outlines the support for various touch action classes: 3797 3797 3798 3798 - | Class | Support | 3799 3799 - | -------------------- | ----------- | 3800 3800 - | `touch-auto` | 🌐 Web only | 3801 3801 - | `touch-none` | 🌐 Web only | 3802 3802 - | `touch-pan-x` | 🌐 Web only | 3803 3803 - | `touch-pan-left` | 🌐 Web only | 3804 3804 - | `touch-pan-right` | 🌐 Web only | 3805 3805 - | `touch-pan-y` | 🌐 Web only | 3806 3806 - | `touch-pan-up` | 🌐 Web only | 3807 3807 - | `touch-pan-down` | 🌐 Web only | 3808 3808 - | `touch-pinch-zoom` | 🌐 Web only | 3809 3809 - | `touch-manipulation` | 🌐 Web only | 3798 3798 + |Class|Support| 3799 3799 + |-|-| 3800 3800 + |`touch-auto`|🌐 Web only| 3801 3801 + |`touch-none`|🌐 Web only| 3802 3802 + |`touch-pan-x`|🌐 Web only| 3803 3803 + |`touch-pan-left`|🌐 Web only| 3804 3804 + |`touch-pan-right`|🌐 Web only| 3805 3805 + |`touch-pan-y`|🌐 Web only| 3806 3806 + |`touch-pan-up`|🌐 Web only| 3807 3807 + |`touch-pan-down`|🌐 Web only| 3808 3808 + |`touch-pinch-zoom`|🌐 Web only| 3809 3809 + |`touch-manipulation`|🌐 Web only| 3810 3810 3811 3811 ## Configuration 3812 3812 ··· 3864 3864 3865 3865 ### Compatibility 3866 3866 3867 3867 - | Class | Support | 3868 3868 - | ---------------- | ----------- | 3869 3869 - | `isolate` | 🌐 Web only | 3870 3870 - | `isolation-auto` | 🌐 Web only | 3867 3867 + |Class|Support| 3868 3868 + |-|-| 3869 3869 + |`isolate`|🌐 Web only| 3870 3870 + |`isolation-auto`|🌐 Web only| 3871 3871 3872 3872 ## Min-Width 3873 3873 ··· 3877 3877 3878 3878 ### Compatibility 3879 3879 3880 3880 - | Class | Support | 3881 3881 - | ------------ | --------------- | 3882 3882 - | `min-w-0` | ✅ Full Support | 3883 3883 - | `min-w-[n]` | ✅ Full Support | 3884 3884 - | `min-w-full` | ✅ Full Support | 3885 3885 - | `min-w-min` | 🌐 Web only | 3886 3886 - | `min-w-max` | 🌐 Web only | 3887 3887 - | `min-w-fit` | 🌐 Web only | 3880 3880 + |Class|Support| 3881 3881 + |-|-| 3882 3882 + |`min-w-0`|✅ Full Support| 3883 3883 + |`min-w-[n]`|✅ Full Support| 3884 3884 + |`min-w-full`|✅ Full Support| 3885 3885 + |`min-w-min`|🌐 Web only| 3886 3886 + |`min-w-max`|🌐 Web only| 3887 3887 + |`min-w-fit`|🌐 Web only| 3888 3888 3889 3889 ```typescript 3890 3890 // TypeScript typings for min-width classes ··· 3906 3906 3907 3907 ### Compatibility 3908 3908 3909 3909 - | Class | Support | 3910 3910 - | ------------- | ----------- | 3911 3911 - | `select-none` | 🌐 Web only | 3912 3912 - | `select-text` | 🌐 Web only | 3913 3913 - | `select-all` | 🌐 Web only | 3914 3914 - | `select-auto` | 🌐 Web only | 3909 3909 + |Class|Support| 3910 3910 + |-|-| 3911 3911 + |`select-none`|🌐 Web only| 3912 3912 + |`select-text`|🌐 Web only| 3913 3913 + |`select-all`|🌐 Web only| 3914 3914 + |`select-auto`|🌐 Web only| 3915 3915 3916 3916 ### Contributors 3917 3917 ··· 3929 3929 3930 3930 ### Compatibility 3931 3931 3932 3932 - | Class | Support | 3933 3933 - | ---------- | --------------- | 3934 3934 - | `w-{n}` | ✅ Full Support | 3935 3935 - | `w-[n]` | ✅ Full Support | 3936 3936 - | `w-full` | ✅ Full Support | 3937 3937 - | `w-screen` | ✅ Full Support | 3938 3938 - | `w-auto` | 🌐 Web only | 3939 3939 - | `w-min` | 🌐 Web only | 3940 3940 - | `w-max` | 🌐 Web only | 3941 3941 - | `w-fit` | 🌐 Web only | 3932 3932 + |Class|Support| 3933 3933 + |-|-| 3934 3934 + |`w-{n}`|✅ Full Support| 3935 3935 + |`w-[n]`|✅ Full Support| 3936 3936 + |`w-full`|✅ Full Support| 3937 3937 + |`w-screen`|✅ Full Support| 3938 3938 + |`w-auto`|🌐 Web only| 3939 3939 + |`w-min`|🌐 Web only| 3940 3940 + |`w-max`|🌐 Web only| 3941 3941 + |`w-fit`|🌐 Web only| 3942 3942 3943 3943 ## Will Change 3944 3944 ··· 3948 3948 3949 3949 ### Compatibility 3950 3950 3951 3951 - | Class | Support | 3952 3952 - | ----------------------- | ----------- | 3953 3953 - | `will-change-auto` | 🌐 Web only | 3954 3954 - | `will-change-scroll` | 🌐 Web only | 3955 3955 - | `will-change-contents` | 🌐 Web only | 3956 3956 - | `will-change-transform` | 🌐 Web only | 3951 3951 + |Class|Support| 3952 3952 + |-|-| 3953 3953 + |`will-change-auto`|🌐 Web only| 3954 3954 + |`will-change-scroll`|🌐 Web only| 3955 3955 + |`will-change-contents`|🌐 Web only| 3956 3956 + |`will-change-transform`|🌐 Web only| 3957 3957 3958 3958 ### Contributors 3959 3959 ··· 3975 3975 3976 3976 ### Compatibility 3977 3977 3978 3978 - | Class | Support | 3979 3979 - | -------------- | --------------- | 3980 3980 - | `fill-{n}` | ✅ Full Support | 3981 3981 - | `fill-[n]` | ✅ Full Support | 3982 3982 - | `fill-inherit` | 🌐 Web only | 3983 3983 - | `fill-current` | 🌐 Web only | 3978 3978 + |Class|Support| 3979 3979 + |-|-| 3980 3980 + |`fill-{n}`|✅ Full Support| 3981 3981 + |`fill-[n]`|✅ Full Support| 3982 3982 + |`fill-inherit`|🌐 Web only| 3983 3983 + |`fill-current`|🌐 Web only| 3984 3984 3985 3985 ## Content 3986 3986 ··· 3990 3990 3991 3991 ### Compatibility 3992 3992 3993 3993 - | Class | Support | 3994 3994 - | -------------- | ----------- | 3995 3995 - | `content-none` | 🌐 Web only | 3993 3993 + |Class|Support| 3994 3994 + |-|-| 3995 3995 + |`content-none`|🌐 Web only| 3996 3996 3997 3997 ## Stroke 3998 3998 ··· 4004 4004 4005 4005 ### Compatibility 4006 4006 4007 4007 - | Class | Support | 4008 4008 - | ---------------- | --------------- | 4009 4009 - | `stroke-{n}` | ✅ Full Support | 4010 4010 - | `stroke-[n]` | ✅ Full Support | 4011 4011 - | `stroke-inherit` | 🌐 Web only | 4012 4012 - | `stroke-current` | 🌐 Web only | 4007 4007 + |Class|Support| 4008 4008 + |-|-| 4009 4009 + |`stroke-{n}`|✅ Full Support| 4010 4010 + |`stroke-[n]`|✅ Full Support| 4011 4011 + |`stroke-inherit`|🌐 Web only| 4012 4012 + |`stroke-current`|🌐 Web only| 4013 4013 4014 4014 ```typescript 4015 4015 // Example TypeScript typings for stroke classes ··· 4031 4031 4032 4032 ### Compatibility 4033 4033 4034 4034 - | Class | Support | 4035 4035 - | ------------ | --------------- | 4036 4036 - | `stroke-{n}` | ✅ Full Support | 4037 4037 - | `stroke-[n]` | ✅ Full Support | 4034 4034 + |Class|Support| 4035 4035 + |-|-| 4036 4036 + |`stroke-{n}`|✅ Full Support| 4037 4037 + |`stroke-[n]`|✅ Full Support| 4038 4038 4039 4039 ## Object Fit 4040 4040 ··· 4044 4044 4045 4045 ### Compatibility 4046 4046 4047 4047 - | Class | Support | 4048 4048 - | ------------------- | ----------- | 4049 4049 - | `object-contain` | 🌐 Web only | 4050 4050 - | `object-cover` | 🌐 Web only | 4051 4051 - | `object-fill` | 🌐 Web only | 4052 4052 - | `object-none` | 🌐 Web only | 4053 4053 - | `object-scale-down` | 🌐 Web only | 4047 4047 + |Class|Support| 4048 4048 + |-|-| 4049 4049 + |`object-contain`|🌐 Web only| 4050 4050 + |`object-cover`|🌐 Web only| 4051 4051 + |`object-fill`|🌐 Web only| 4052 4052 + |`object-none`|🌐 Web only| 4053 4053 + |`object-scale-down`|🌐 Web only| 4054 4054 4055 4055 ### Contributors 4056 4056 ··· 4095 4095 4096 4096 ### Compatibility 4097 4097 4098 4098 - | Class | Support | 4099 4099 - | ------------ | --------------- | 4100 4100 - | `font-sans` | ✅ Full Support | 4101 4101 - | `font-serif` | ✅ Full Support | 4102 4102 - | `font-mono` | ✅ Full Support | 4103 4103 - | `font-[n]` | ✅ Full Support | 4104 4104 - | `font-{n}` | ✅ Full Support | 4098 4098 + |Class|Support| 4099 4099 + |-|-| 4100 4100 + |`font-sans`|✅ Full Support| 4101 4101 + |`font-serif`|✅ Full Support| 4102 4102 + |`font-mono`|✅ Full Support| 4103 4103 + |`font-[n]`|✅ Full Support| 4104 4104 + |`font-{n}`|✅ Full Support| 4105 4105 4106 4106 ## Font Size 4107 4107 ··· 4202 4202 4203 4203 ### Compatibility 4204 4204 4205 4205 - | Class | Support | 4206 4206 - | ----------- | --------------- | 4207 4207 - | `text-{n}` | ✅ Full Support | 4208 4208 - | `text-[n]` | ✅ Full Support | 4209 4209 - | `text-base` | ✅ Full Support | 4205 4205 + |Class|Support| 4206 4206 + |-|-| 4207 4207 + |`text-{n}`|✅ Full Support| 4208 4208 + |`text-[n]`|✅ Full Support| 4209 4209 + |`text-base`|✅ Full Support| 4210 4210 4211 4211 ## Object Position 4212 4212 ··· 4218 4218 4219 4219 The following table outlines the compatibility of various classes: 4220 4220 4221 4221 - | Class | Support | 4222 4222 - | --------------------- | ----------- | 4223 4223 - | `object-bottom` | 🌐 Web only | 4224 4224 - | `object-center` | 🌐 Web only | 4225 4225 - | `object-left` | 🌐 Web only | 4226 4226 - | `object-left-bottom` | 🌐 Web only | 4227 4227 - | `object-left-top` | 🌐 Web only | 4228 4228 - | `object-right` | 🌐 Web only | 4229 4229 - | `object-right-bottom` | 🌐 Web only | 4230 4230 - | `object-right-top` | 🌐 Web only | 4231 4231 - | `object-top` | 🌐 Web only | 4221 4221 + |Class|Support| 4222 4222 + |-|-| 4223 4223 + |`object-bottom`|🌐 Web only| 4224 4224 + |`object-center`|🌐 Web only| 4225 4225 + |`object-left`|🌐 Web only| 4226 4226 + |`object-left-bottom`|🌐 Web only| 4227 4227 + |`object-left-top`|🌐 Web only| 4228 4228 + |`object-right`|🌐 Web only| 4229 4229 + |`object-right-bottom`|🌐 Web only| 4230 4230 + |`object-right-top`|🌐 Web only| 4231 4231 + |`object-top`|🌐 Web only| 4232 4232 4233 4233 ## Font Smoothing 4234 4234 ··· 4238 4238 4239 4239 ### Compatibility 4240 4240 4241 4241 - | Class | Support | 4242 4242 - | ---------------------- | --------------- | 4243 4243 - | `antialiased` | ✅ Full Support | 4244 4244 - | `subpixel-antialiased` | ✅ Full Support | 4241 4241 + |Class|Support| 4242 4242 + |-|-| 4243 4243 + |`antialiased`|✅ Full Support| 4244 4244 + |`subpixel-antialiased`|✅ Full Support| 4245 4245 4246 4246 ## Editor Setup 4247 4247 ··· 4279 4279 4280 4280 ### Compatibility 4281 4281 4282 4282 - | Class | Support | 4283 4283 - | -------------------- | --------------- | 4284 4284 - | `visible` | ✅ Full Support | 4285 4285 - | `hidden` | ✅ Full Support | 4286 4286 - | `scroll` | ✅ Full Support | 4287 4287 - | `overflow-auto` | 🌐 Web only | 4288 4288 - | `overflow-clip` | 🌐 Web only | 4289 4289 - | `overflow-x-auto` | 🌐 Web only | 4290 4290 - | `overflow-y-auto` | 🌐 Web only | 4291 4291 - | `overflow-x-hidden` | 🌐 Web only | 4292 4292 - | `overflow-y-hidden` | 🌐 Web only | 4293 4293 - | `overflow-x-clip` | 🌐 Web only | 4294 4294 - | `overflow-y-clip` | 🌐 Web only | 4295 4295 - | `overflow-x-visible` | 🌐 Web only | 4296 4296 - | `overflow-y-visible` | 🌐 Web only | 4297 4297 - | `overflow-x-scroll` | 🌐 Web only | 4298 4298 - | `overflow-y-scroll` | 🌐 Web only | 4282 4282 + |Class|Support| 4283 4283 + |-|-| 4284 4284 + |`visible`|✅ Full Support| 4285 4285 + |`hidden`|✅ Full Support| 4286 4286 + |`scroll`|✅ Full Support| 4287 4287 + |`overflow-auto`|🌐 Web only| 4288 4288 + |`overflow-clip`|🌐 Web only| 4289 4289 + |`overflow-x-auto`|🌐 Web only| 4290 4290 + |`overflow-y-auto`|🌐 Web only| 4291 4291 + |`overflow-x-hidden`|🌐 Web only| 4292 4292 + |`overflow-y-hidden`|🌐 Web only| 4293 4293 + |`overflow-x-clip`|🌐 Web only| 4294 4294 + |`overflow-y-clip`|🌐 Web only| 4295 4295 + |`overflow-x-visible`|🌐 Web only| 4296 4296 + |`overflow-y-visible`|🌐 Web only| 4297 4297 + |`overflow-x-scroll`|🌐 Web only| 4298 4298 + |`overflow-y-scroll`|🌐 Web only| 4299 4299 4300 4300 ## Font Style 4301 4301 ··· 4305 4305 4306 4306 ### Compatibility 4307 4307 4308 4308 - | Class | Support | 4309 4309 - | ------------ | --------------- | 4310 4310 - | `italic` | ✅ Full Support | 4311 4311 - | `not-italic` | ✅ Full Support | 4308 4308 + |Class|Support| 4309 4309 + |-|-| 4310 4310 + |`italic`|✅ Full Support| 4311 4311 + |`not-italic`|✅ Full Support| 4312 4312 4313 4313 ## Font Variant Numeric 4314 4314 ··· 4318 4318 4319 4319 ### Compatibility 4320 4320 4321 4321 - | Class | Support | 4322 4322 - | -------------------- | --------------- | 4323 4323 - | `normal-nums` | ✅ Full Support | 4324 4324 - | `ordinal` | ✅ Full Support | 4325 4325 - | `slashed-zero` | ✅ Full Support | 4326 4326 - | `lining-nums` | ✅ Full Support | 4327 4327 - | `oldstyle-nums` | ✅ Full Support | 4328 4328 - | `proportional-nums` | ✅ Full Support | 4329 4329 - | `tabular-nums` | ✅ Full Support | 4330 4330 - | `diagonal-fractions` | ✅ Full Support | 4331 4331 - | `stacked-fractions` | ✅ Full Support | 4321 4321 + |Class|Support| 4322 4322 + |-|-| 4323 4323 + |`normal-nums`|✅ Full Support| 4324 4324 + |`ordinal`|✅ Full Support| 4325 4325 + |`slashed-zero`|✅ Full Support| 4326 4326 + |`lining-nums`|✅ Full Support| 4327 4327 + |`oldstyle-nums`|✅ Full Support| 4328 4328 + |`proportional-nums`|✅ Full Support| 4329 4329 + |`tabular-nums`|✅ Full Support| 4330 4330 + |`diagonal-fractions`|✅ Full Support| 4331 4331 + |`stacked-fractions`|✅ Full Support| 4332 4332 4333 4333 ## Font Weight 4334 4334 ··· 4338 4338 4339 4339 ### Compatibility 4340 4340 4341 4341 - | Class | Support | 4342 4342 - | ----------------- | --------------- | 4343 4343 - | `font-thin` | ✅ Full Support | 4344 4344 - | `font-extralight` | ✅ Full Support | 4345 4345 - | `font-light` | ✅ Full Support | 4346 4346 - | `font-normal` | ✅ Full Support | 4347 4347 - | `font-medium` | ✅ Full Support | 4348 4348 - | `font-semibold` | ✅ Full Support | 4349 4349 - | `font-bold` | ✅ Full Support | 4350 4350 - | `font-extrabold` | ✅ Full Support | 4351 4351 - | `font-black` | ✅ Full Support | 4341 4341 + |Class|Support| 4342 4342 + |-|-| 4343 4343 + |`font-thin`|✅ Full Support| 4344 4344 + |`font-extralight`|✅ Full Support| 4345 4345 + |`font-light`|✅ Full Support| 4346 4346 + |`font-normal`|✅ Full Support| 4347 4347 + |`font-medium`|✅ Full Support| 4348 4348 + |`font-semibold`|✅ Full Support| 4349 4349 + |`font-bold`|✅ Full Support| 4350 4350 + |`font-extrabold`|✅ Full Support| 4351 4351 + |`font-black`|✅ Full Support| 4352 4352 4353 4353 ## Theme 4354 4354 ··· 4541 4541 4542 4542 The following table outlines the support for various overscroll behavior classes: 4543 4543 4544 4544 - | Class | Support | 4545 4545 - | ---------------------- | ----------- | 4546 4546 - | `overscroll-auto` | 🌐 Web only | 4547 4547 - | `overscroll-contain` | 🌐 Web only | 4548 4548 - | `overscroll-none` | 🌐 Web only | 4549 4549 - | `overscroll-y-auto` | 🌐 Web only | 4550 4550 - | `overscroll-y-contain` | 🌐 Web only | 4551 4551 - | `overscroll-y-none` | 🌐 Web only | 4552 4552 - | `overscroll-x-auto` | 🌐 Web only | 4553 4553 - | `overscroll-x-contain` | 🌐 Web only | 4554 4554 - | `overscroll-x-none` | 🌐 Web only | 4544 4544 + |Class|Support| 4545 4545 + |-|-| 4546 4546 + |`overscroll-auto`|🌐 Web only| 4547 4547 + |`overscroll-contain`|🌐 Web only| 4548 4548 + |`overscroll-none`|🌐 Web only| 4549 4549 + |`overscroll-y-auto`|🌐 Web only| 4550 4550 + |`overscroll-y-contain`|🌐 Web only| 4551 4551 + |`overscroll-y-none`|🌐 Web only| 4552 4552 + |`overscroll-x-auto`|🌐 Web only| 4553 4553 + |`overscroll-x-contain`|🌐 Web only| 4554 4554 + |`overscroll-x-none`|🌐 Web only| 4555 4555 4556 4556 ## Hyphens 4557 4557 ··· 4561 4561 4562 4562 ### Compatibility 4563 4563 4564 4564 - | Class | Support | 4565 4565 - | ---------------- | ----------- | 4566 4566 - | `hyphens-none` | 🌐 Web only | 4567 4567 - | `hyphens-manual` | 🌐 Web only | 4568 4568 - | `hyphens-auto` | 🌐 Web only | 4564 4564 + |Class|Support| 4565 4565 + |-|-| 4566 4566 + |`hyphens-none`|🌐 Web only| 4567 4567 + |`hyphens-manual`|🌐 Web only| 4568 4568 + |`hyphens-auto`|🌐 Web only| 4569 4569 4570 4570 ## Letter Spacing 4571 4571 ··· 4575 4575 4576 4576 ### Compatibility 4577 4577 4578 4578 - | Class | Support | 4579 4579 - | ------------------ | --------------- | 4580 4580 - | `tracking-tighter` | ✅ Full Support | 4581 4581 - | `tracking-tight` | ✅ Full Support | 4582 4582 - | `tracking-normal` | ✅ Full Support | 4583 4583 - | `tracking-wide` | ✅ Full Support | 4584 4584 - | `tracking-wider` | ✅ Full Support | 4585 4585 - | `tracking-widest` | ✅ Full Support | 4578 4578 + |Class|Support| 4579 4579 + |-|-| 4580 4580 + |`tracking-tighter`|✅ Full Support| 4581 4581 + |`tracking-tight`|✅ Full Support| 4582 4582 + |`tracking-normal`|✅ Full Support| 4583 4583 + |`tracking-wide`|✅ Full Support| 4584 4584 + |`tracking-wider`|✅ Full Support| 4585 4585 + |`tracking-widest`|✅ Full Support| 4586 4586 4587 4587 ## Position 4588 4588 ··· 4592 4592 4593 4593 ### Compatibility 4594 4594 4595 4595 - | Class | Support | 4596 4596 - | ---------- | --------------- | 4597 4597 - | `absolute` | ✅ Full Support | 4598 4598 - | `relative` | ✅ Full Support | 4599 4599 - | `fixed` | 🌐 Web only | 4600 4600 - | `sticky` | 🌐 Web only | 4595 4595 + |Class|Support| 4596 4596 + |-|-| 4597 4597 + |`absolute`|✅ Full Support| 4598 4598 + |`relative`|✅ Full Support| 4599 4599 + |`fixed`|🌐 Web only| 4600 4600 + |`sticky`|🌐 Web only| 4601 4601 4602 4602 ## Line Clamp 4603 4603 ··· 4607 4607 4608 4608 ### Compatibility 4609 4609 4610 4610 - | Class | Support | 4611 4611 - | ----------------- | --------------- | 4612 4612 - | `line-clamp-1` | ✅ Full Support | 4613 4613 - | `line-clamp-2` | ✅ Full Support | 4614 4614 - | `line-clamp-3` | ✅ Full Support | 4615 4615 - | `line-clamp-4` | ✅ Full Support | 4616 4616 - | `line-clamp-5` | ✅ Full Support | 4617 4617 - | `line-clamp-6` | ✅ Full Support | 4618 4618 - | `line-clamp-none` | ✅ Full Support | 4610 4610 + |Class|Support| 4611 4611 + |-|-| 4612 4612 + |`line-clamp-1`|✅ Full Support| 4613 4613 + |`line-clamp-2`|✅ Full Support| 4614 4614 + |`line-clamp-3`|✅ Full Support| 4615 4615 + |`line-clamp-4`|✅ Full Support| 4616 4616 + |`line-clamp-5`|✅ Full Support| 4617 4617 + |`line-clamp-6`|✅ Full Support| 4618 4618 + |`line-clamp-none`|✅ Full Support| 4619 4619 4620 4620 ## Line Height 4621 4621 ··· 4627 4627 4628 4628 React Native does not support relative line height utilities due to its lack of `em` unit support. 4629 4629 4630 4630 - | Class | Support | 4631 4631 - | ----------------- | --------------- | 4632 4632 - | `leading-{n}` | ✅ Full Support | 4633 4633 - | `leading-[n]` | ✅ Full Support | 4634 4634 - | `leading-none` | 🌐 Web only | 4635 4635 - | `leading-tight` | 🌐 Web only | 4636 4636 - | `leading-snug` | 🌐 Web only | 4637 4637 - | `leading-normal` | 🌐 Web only | 4638 4638 - | `leading-relaxed` | 🌐 Web only | 4639 4639 - | `leading-loose` | 🌐 Web only | 4630 4630 + |Class|Support| 4631 4631 + |-|-| 4632 4632 + |`leading-{n}`|✅ Full Support| 4633 4633 + |`leading-[n]`|✅ Full Support| 4634 4634 + |`leading-none`|🌐 Web only| 4635 4635 + |`leading-tight`|🌐 Web only| 4636 4636 + |`leading-snug`|🌐 Web only| 4637 4637 + |`leading-normal`|🌐 Web only| 4638 4638 + |`leading-relaxed`|🌐 Web only| 4639 4639 + |`leading-loose`|🌐 Web only| 4640 4640 4641 4641 ## Using Nativewind with Monorepos 4642 4642 ··· 4711 4711 4712 4712 ### Compatibility 4713 4713 4714 4714 - | Class | Support | 4715 4715 - | -------------- | --------------- | 4716 4716 - | `inset-{n}` | ✅ Full Support | 4717 4717 - | `inset-[n]` | ✅ Full Support | 4718 4718 - | `inset-x-{n}` | ✅ Full Support | 4719 4719 - | `inset-y-[n]` | ✅ Full Support | 4720 4720 - | `top-{n}` | ✅ Full Support | 4721 4721 - | `top-[n]` | ✅ Full Support | 4722 4722 - | `bottom-{n}` | ✅ Full Support | 4723 4723 - | `bottom-[n]` | ✅ Full Support | 4724 4724 - | `left-{n}` | ✅ Full Support | 4725 4725 - | `left-[n]` | ✅ Full Support | 4726 4726 - | `right-{n}` | ✅ Full Support | 4727 4727 - | `right-[n]` | ✅ Full Support | 4728 4728 - | `inset-auto` | 🌐 Web only | 4729 4729 - | `inset-x-auto` | 🌐 Web only | 4730 4730 - | `inset-y-auto` | 🌐 Web only | 4731 4731 - | `top-auto` | 🌐 Web only | 4732 4732 - | `bottom-auto` | 🌐 Web only | 4733 4733 - | `left-auto` | 🌐 Web only | 4734 4734 - | `right-auto` | 🌐 Web only | 4714 4714 + |Class|Support| 4715 4715 + |-|-| 4716 4716 + |`inset-{n}`|✅ Full Support| 4717 4717 + |`inset-[n]`|✅ Full Support| 4718 4718 + |`inset-x-{n}`|✅ Full Support| 4719 4719 + |`inset-y-[n]`|✅ Full Support| 4720 4720 + |`top-{n}`|✅ Full Support| 4721 4721 + |`top-[n]`|✅ Full Support| 4722 4722 + |`bottom-{n}`|✅ Full Support| 4723 4723 + |`bottom-[n]`|✅ Full Support| 4724 4724 + |`left-{n}`|✅ Full Support| 4725 4725 + |`left-[n]`|✅ Full Support| 4726 4726 + |`right-{n}`|✅ Full Support| 4727 4727 + |`right-[n]`|✅ Full Support| 4728 4728 + |`inset-auto`|🌐 Web only| 4729 4729 + |`inset-x-auto`|🌐 Web only| 4730 4730 + |`inset-y-auto`|🌐 Web only| 4731 4731 + |`top-auto`|🌐 Web only| 4732 4732 + |`bottom-auto`|🌐 Web only| 4733 4733 + |`left-auto`|🌐 Web only| 4734 4734 + |`right-auto`|🌐 Web only| 4735 4735 4736 4736 ## List Style Image 4737 4737 ··· 4741 4741 4742 4742 ### Compatibility 4743 4743 4744 4744 - | Class | Support | 4745 4745 - | ----------------- | --------------- | 4746 4746 - | `list-image-none` | ✅ Full Support | 4744 4744 + |Class|Support| 4745 4745 + |-|-| 4746 4746 + |`list-image-none`|✅ Full Support| 4747 4747 4748 4748 - --- 4748 4748 + *** 4749 4749 4750 4750 This reformatted content maintains the original structure and information while ensuring clarity and consistency in presentation. 4751 4751 ··· 4759 4759 4760 4760 ### Compatibility 4761 4761 4762 4762 - | Class | Support | 4763 4763 - | ----------- | --------------- | 4764 4764 - | `visible` | ✅ Full Support | 4765 4765 - | `invisible` | ✅ Full Support | 4766 4766 - | `collapse` | 🌐 Web only | 4762 4762 + |Class|Support| 4763 4763 + |-|-| 4764 4764 + |`visible`|✅ Full Support| 4765 4765 + |`invisible`|✅ Full Support| 4766 4766 + |`collapse`|🌐 Web only| 4767 4767 4768 4768 ```typescript 4769 4769 // Example TypeScript typings for visibility classes ··· 4780 4780 4781 4781 ### Compatibility 4782 4782 4783 4783 - | Class | Support | 4784 4784 - | -------------- | --------------- | 4785 4785 - | `list-inside` | ✅ Full Support | 4786 4786 - | `list-outside` | ✅ Full Support | 4783 4783 + |Class|Support| 4784 4784 + |-|-| 4785 4785 + |`list-inside`|✅ Full Support| 4786 4786 + |`list-outside`|✅ Full Support| 4787 4787 4788 4788 ## List Style Type 4789 4789 ··· 4793 4793 4794 4794 ### Compatibility 4795 4795 4796 4796 - | Class | Support | 4797 4797 - | -------------- | --------------- | 4798 4798 - | `list-none` | ✅ Full Support | 4799 4799 - | `list-disc` | ✅ Full Support | 4800 4800 - | `list-decimal` | ✅ Full Support | 4796 4796 + |Class|Support| 4797 4797 + |-|-| 4798 4798 + |`list-none`|✅ Full Support| 4799 4799 + |`list-disc`|✅ Full Support| 4800 4800 + |`list-decimal`|✅ Full Support| 4801 4801 4802 4802 ## Built on Tailwind CSS 4803 4803 ··· 4825 4825 4826 4826 ### Compatibility 4827 4827 4828 4828 - | Class | Support | 4829 4829 - | ------------- | --------------- | 4830 4830 - | `uppercase` | ✅ Full Support | 4831 4831 - | `lowercase` | ✅ Full Support | 4832 4832 - | `capitalize` | ✅ Full Support | 4833 4833 - | `normal-case` | 🌐 Web only | 4828 4828 + |Class|Support| 4829 4829 + |-|-| 4830 4830 + |`uppercase`|✅ Full Support| 4831 4831 + |`lowercase`|✅ Full Support| 4832 4832 + |`capitalize`|✅ Full Support| 4833 4833 + |`normal-case`|🌐 Web only| 4834 4834 4835 4835 ## Z-Index 4836 4836 ··· 4840 4840 4841 4841 ### Compatibility 4842 4842 4843 4843 - | Class | Support | 4844 4844 - | -------- | --------------- | 4845 4845 - | `z-{n}` | ✅ Full Support | 4846 4846 - | `z-[n]` | ✅ Full Support | 4847 4847 - | `z-auto` | 🌐 Web only | 4843 4843 + |Class|Support| 4844 4844 + |-|-| 4845 4845 + |`z-{n}`|✅ Full Support| 4846 4846 + |`z-[n]`|✅ Full Support| 4847 4847 + |`z-auto`|🌐 Web only| 4848 4848 4849 4849 ## Text Color 4850 4850 ··· 4854 4854 4855 4855 ### Compatibility 4856 4856 4857 4857 - | Class | Support | 4858 4858 - | -------------- | --------------- | 4859 4859 - | `text-{n}` | ✅ Full Support | 4860 4860 - | `text-[n]` | ✅ Full Support | 4861 4861 - | `text-inherit` | 🌐 Web only | 4862 4862 - | `text-current` | 🌐 Web only | 4857 4857 + |Class|Support| 4858 4858 + |-|-| 4859 4859 + |`text-{n}`|✅ Full Support| 4860 4860 + |`text-[n]`|✅ Full Support| 4861 4861 + |`text-inherit`|🌐 Web only| 4862 4862 + |`text-current`|🌐 Web only| 4863 4863 4864 4864 ### textOpacity (Native Only) 4865 4865 ··· 4884 4884 4885 4885 ### Compatibility 4886 4886 4887 4887 - | Class | Support | 4888 4888 - | -------------- | --------------- | 4889 4889 - | `underline` | ✅ Full Support | 4890 4890 - | `line-through` | ✅ Full Support | 4891 4891 - | `no-underline` | ✅ Full Support | 4892 4892 - | `overline` | 🌐 Web only | 4887 4887 + |Class|Support| 4888 4888 + |-|-| 4889 4889 + |`underline`|✅ Full Support| 4890 4890 + |`line-through`|✅ Full Support| 4891 4891 + |`no-underline`|✅ Full Support| 4892 4892 + |`overline`|🌐 Web only|

+204 -208

out/llms-full-react-native-gesture-handler.txt

reviewed

··· 28 28 29 29 The `react-native-gesture-handler` library supports the three most recent minor versions of `react-native`. Below is a compatibility table: 30 30 31 31 - | Gesture Handler Version | React Native Version | 32 32 - | ----------------------- | -------------------- | 33 33 - | 2.24.0+ | 0.75.0+ | 34 34 - | 2.21.0+ | 0.74.0+ | 35 35 - | 2.18.0+ | 0.73.0+ | 36 36 - | 2.16.0+ | 0.68.0+ | 37 37 - | 2.14.0+ | 0.67.0+ | 38 38 - | 2.10.0+ | 0.64.0+ | 39 39 - | 2.0.0+ | 0.63.0+ | 31 31 + |Gesture Handler Version|React Native Version| 32 32 + |-|-| 33 33 + |2.24.0+|0.75.0+| 34 34 + |2.21.0+|0.74.0+| 35 35 + |2.18.0+|0.73.0+| 36 36 + |2.16.0+|0.68.0+| 37 37 + |2.14.0+|0.67.0+| 38 38 + |2.10.0+|0.64.0+| 39 39 + |2.0.0+|0.63.0+| 40 40 41 41 To fully leverage touch events, ensure you are using `react-native-reanimated` version 2.3.0 or newer. 42 42 ··· 356 356 357 357 #### Properties Common to All Gestures: 358 358 359 359 - | Property | Description | 360 360 - | --- | --- | 361 361 - | `enabled(value: boolean)` | Indicates whether the handler should analyze touch events. Default is `true`. If set to `false`, the handler's state will never become `ACTIVE`. | 362 362 - | `shouldCancelWhenOutside(value: boolean)` | When `true`, cancels or fails recognition if a finger leaves the view area. Defaults vary by gesture type; most are `false` except for `LongPressGesture` and `TapGesture`, which default to `true`. | 363 363 - | `hitSlop(settings)` | Controls the activation area of the gesture within the connected view. Negative numbers reduce bounds evenly, while objects can specify reductions per side or edge. Positive values on Android expand beyond view bounds but not past parent view bounds. Use React Native's View hitSlop for cross-platform support. | 364 364 - | `withRef(ref)` | Sets a ref to the gesture object for interoperability with older APIs. | 365 365 - | `withTestId(testID)` | Assigns a `testID` property for querying in tests. | 366 366 - | `cancelsTouchesInView(value)` (**iOS only**) | When `true`, cancels touches for native UI components when active. Default is `true`. | 367 367 - | `runOnJS(value: boolean)` | Determines if callbacks run on the JS thread (`true`) or UI thread (`false`). Defaults to `false` with `react-native-reanimated`. | 368 368 - | `simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)` | Marks gestures for simultaneous recognition without composing them. Requires additional detectors for recognition. | 369 369 - | `requireExternalGestureToFail(otherGesture1, otherGesture2, ...)` | Adds a relation requiring another gesture to fail before activation. Does not compose gestures; requires additional detectors. | 370 370 - | `blocksExternalGesture(otherGesture1, otherGesture2, ...)` | Makes other gestures wait until this one fails or doesn't start. Marks relations without composing gestures; requires additional detectors. | 371 371 - | `activeCursor(value)` (**Web only**) | Specifies the cursor when the gesture activates. Supports CSS cursor values (e.g., `"grab"`, `"zoom-in"`). Default is `"auto"`. | 359 359 + |Property|Description| 360 360 + |-|-| 361 361 + |`enabled(value: boolean)`|Indicates whether the handler should analyze touch events. Default is `true`. If set to `false`, the handler's state will never become `ACTIVE`.| 362 362 + |`shouldCancelWhenOutside(value: boolean)`|When `true`, cancels or fails recognition if a finger leaves the view area. Defaults vary by gesture type; most are `false` except for `LongPressGesture` and `TapGesture`, which default to `true`.| 363 363 + |`hitSlop(settings)`|Controls the activation area of the gesture within the connected view. Negative numbers reduce bounds evenly, while objects can specify reductions per side or edge. Positive values on Android expand beyond view bounds but not past parent view bounds. Use React Native's View hitSlop for cross-platform support.| 364 364 + |`withRef(ref)`|Sets a ref to the gesture object for interoperability with older APIs.| 365 365 + |`withTestId(testID)`|Assigns a `testID` property for querying in tests.| 366 366 + |`cancelsTouchesInView(value)` (**iOS only**)|When `true`, cancels touches for native UI components when active. Default is `true`.| 367 367 + |`runOnJS(value: boolean)`|Determines if callbacks run on the JS thread (`true`) or UI thread (`false`). Defaults to `false` with `react-native-reanimated`.| 368 368 + |`simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)`|Marks gestures for simultaneous recognition without composing them. Requires additional detectors for recognition.| 369 369 + |`requireExternalGestureToFail(otherGesture1, otherGesture2, ...)`|Adds a relation requiring another gesture to fail before activation. Does not compose gestures; requires additional detectors.| 370 370 + |`blocksExternalGesture(otherGesture1, otherGesture2, ...)`|Makes other gestures wait until this one fails or doesn't start. Marks relations without composing gestures; requires additional detectors.| 371 371 + |`activeCursor(value)` (**Web only**)|Specifies the cursor when the gesture activates. Supports CSS cursor values (e.g., `"grab"`, `"zoom-in"`). Default is `"auto"`.| 372 372 373 373 #### Properties Common to All Continuous Gestures: 374 374 ··· 378 378 379 379 #### Callbacks Common to All Gestures: 380 380 381 381 - | Callback | Description | 382 382 - | --- | --- | 383 383 - | `onBegin(callback)` | Called when the gesture handler starts receiving touches but is not yet active. | 384 384 - | `onStart(callback)` | Called when the gesture is recognized and transitions to an active state. | 385 385 - | `onEnd(callback)` | Called when a recognized gesture finishes, provided it was previously active. | 386 386 - | `onFinalize(callback)` | Called when handling finalizes—either recognition completes or fails. | 387 387 - | `onTouchesDown(callback)` | Triggered every time a finger is placed on the screen. | 388 388 - | `onTouchesMove(callback)` | Triggered every time a finger moves on the screen. | 389 389 - | `onTouchesUp(callback)` | Triggered every time a finger is lifted from the screen. | 390 390 - | `onTouchesCancelled(callback)` | Triggered when a finger stops being tracked, such as when a gesture finishes. | 381 381 + |Callback|Description| 382 382 + |-|-| 383 383 + |`onBegin(callback)`|Called when the gesture handler starts receiving touches but is not yet active.| 384 384 + |`onStart(callback)`|Called when the gesture is recognized and transitions to an active state.| 385 385 + |`onEnd(callback)`|Called when a recognized gesture finishes, provided it was previously active.| 386 386 + |`onFinalize(callback)`|Called when handling finalizes—either recognition completes or fails.| 387 387 + |`onTouchesDown(callback)`|Triggered every time a finger is placed on the screen.| 388 388 + |`onTouchesMove(callback)`|Triggered every time a finger moves on the screen.| 389 389 + |`onTouchesUp(callback)`|Triggered every time a finger is lifted from the screen.| 390 390 + |`onTouchesCancelled(callback)`|Triggered when a finger stops being tracked, such as when a gesture finishes.| 391 391 392 392 #### Callbacks Common to All Continuous Gestures: 393 393 ··· 398 398 399 399 #### Attributes Specific to `PinchGesture`: 400 400 401 401 - | Attribute | Description | 402 402 - | --- | --- | 403 403 - | `scale` | Scale factor relative to touch points in screen coordinates. | 404 404 - | `velocity` | Velocity of the gesture at the current moment, expressed as scale factor per second. | 405 405 - | `focalX` | X-axis position of the center anchor point of the gesture in points. | 406 406 - | `focalY` | Y-axis position of the center anchor point of the gesture in points. | 401 401 + |Attribute|Description| 402 402 + |-|-| 403 403 + |`scale`|Scale factor relative to touch points in screen coordinates.| 404 404 + |`velocity`|Velocity of the gesture at the current moment, expressed as scale factor per second.| 405 405 + |`focalX`|X-axis position of the center anchor point of the gesture in points.| 406 406 + |`focalY`|Y-axis position of the center anchor point of the gesture in points.| 407 407 408 408 #### Attributes Common to All Gestures: 409 409 410 410 - | Attribute | Description | 411 411 - | --- | --- | 412 412 - | `state` | Current state of the handler, expressed as a constant from the `State` object. | 413 413 - | `numberOfPointers` | Number of pointers (fingers) currently on the screen. | 414 414 - | `pointerType` | Type of pointer device in use, represented by the `PointerType` enum: `TOUCH`, `STYLUS`, `MOUSE`, `KEY`, or `OTHER`. | 410 410 + |Attribute|Description| 411 411 + |-|-| 412 412 + |`state`|Current state of the handler, expressed as a constant from the `State` object.| 413 413 + |`numberOfPointers`|Number of pointers (fingers) currently on the screen.| 414 414 + |`pointerType`|Type of pointer device in use, represented by the `PointerType` enum: `TOUCH`, `STYLUS`, `MOUSE`, `KEY`, or `OTHER`.| 415 415 416 416 ## Force Touch Gesture 417 417 ··· 441 441 442 442 #### Properties Specific to `ForceTouchGesture`: 443 443 444 444 - | Property | Description | 445 445 - | --- | --- | 446 446 - | `minForce(value: number)` | Minimal pressure required for activation. Range `[0.0, 1.0]`. Default is `0.2`. | 447 447 - | `maxForce(value: number)` | Maximal pressure before gesture fails. Range `[0.0, 1.0]`. | 448 448 - | `feedbackOnActivation(value: boolean)` | Defines if haptic feedback occurs on activation. | 444 444 + |Property|Description| 445 445 + |-|-| 446 446 + |`minForce(value: number)`|Minimal pressure required for activation. Range `[0.0, 1.0]`. Default is `0.2`.| 447 447 + |`maxForce(value: number)`|Maximal pressure before gesture fails. Range `[0.0, 1.0]`.| 448 448 + |`feedbackOnActivation(value: boolean)`|Defines if haptic feedback occurs on activation.| 449 449 450 450 #### Properties Common to All Gestures: 451 451 452 452 - | Property | Description | 453 453 - | --- | --- | 454 454 - | `enabled(value: boolean)` | Indicates whether the handler analyzes touch events. Default is `true`. | 455 455 - | `shouldCancelWhenOutside(value: boolean)` | Cancels recognition if finger leaves view area. Defaults vary by handler type. | 456 456 - | `hitSlop(settings)` | Controls gesture activation area within the view. Supports negative values for reduction. | 457 457 - | `withRef(ref)` | Sets a ref to the gesture object for interoperability with old API. | 458 458 - | `withTestId(testID)` | Sets a `testID` property for querying in tests. | 459 459 - | `cancelsTouchesInView(value)` (**iOS only**) | Cancels touches for native UI components when active. Default is `true`. | 460 460 - | `runOnJS(value: boolean)` | Runs callbacks on JS thread if true, otherwise on the UI thread. Defaults to `false`. | 461 461 - | `simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)` | Marks relation for simultaneous recognition with other gestures. | 462 462 - | `requireExternalGestureToFail(otherGesture1, otherGesture2, ...)` | Requires another gesture to fail before activation. | 463 463 - | `blocksExternalGesture(otherGesture1, otherGesture2, ...)` | Makes other gestures wait until this one fails or doesn't start. | 464 464 - | `activeCursor(value)` (**Web only**) | Specifies cursor when gesture activates. Supports CSS cursor values. Default is `"auto"`. | 452 452 + |Property|Description| 453 453 + |-|-| 454 454 + |`enabled(value: boolean)`|Indicates whether the handler analyzes touch events. Default is `true`.| 455 455 + |`shouldCancelWhenOutside(value: boolean)`|Cancels recognition if finger leaves view area. Defaults vary by handler type.| 456 456 + |`hitSlop(settings)`|Controls gesture activation area within the view. Supports negative values for reduction.| 457 457 + |`withRef(ref)`|Sets a ref to the gesture object for interoperability with old API.| 458 458 + |`withTestId(testID)`|Sets a `testID` property for querying in tests.| 459 459 + |`cancelsTouchesInView(value)` (**iOS only**)|Cancels touches for native UI components when active. Default is `true`.| 460 460 + |`runOnJS(value: boolean)`|Runs callbacks on JS thread if true, otherwise on the UI thread. Defaults to `false`.| 461 461 + |`simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)`|Marks relation for simultaneous recognition with other gestures.| 462 462 + |`requireExternalGestureToFail(otherGesture1, otherGesture2, ...)`|Requires another gesture to fail before activation.| 463 463 + |`blocksExternalGesture(otherGesture1, otherGesture2, ...)`|Makes other gestures wait until this one fails or doesn't start.| 464 464 + |`activeCursor(value)` (**Web only**)|Specifies cursor when gesture activates. Supports CSS cursor values. Default is `"auto"`.| 465 465 466 466 #### Properties Common to All Continuous Gestures: 467 467 468 468 - | Property | Description | 469 469 - | --- | --- | 470 470 - | `manualActivation(value: boolean)` | When true, the handler does not activate automatically; state must be manipulated manually. | 468 468 + |Property|Description| 469 469 + |-|-| 470 470 + |`manualActivation(value: boolean)`|When true, the handler does not activate automatically; state must be manipulated manually.| 471 471 472 472 ### Callbacks 473 473 474 474 #### Callbacks Common to All Gestures: 475 475 476 476 - | Callback | Description | 477 477 - | --- | --- | 478 478 - | `onBegin(callback)` | Called when gesture handling starts receiving touches. | 479 479 - | `onStart(callback)` | Called when the gesture is recognized and transitions to active state. | 480 480 - | `onEnd(callback)` | Called when a recognized gesture finishes, if previously in active state. | 481 481 - | `onFinalize(callback)` | Called when gesture handling finalizes (recognized or failed). | 482 482 - | `onTouchesDown(callback)` | Called every time a finger is placed on the screen. | 483 483 - | `onTouchesMove(callback)` | Called every time a finger moves on the screen. | 484 484 - | `onTouchesUp(callback)` | Called every time a finger is lifted from the screen. | 485 485 - | `onTouchesCancelled(callback)` | Called when a finger stops being tracked, e.g., gesture finishes. | 476 476 + |Callback|Description| 477 477 + |-|-| 478 478 + |`onBegin(callback)`|Called when gesture handling starts receiving touches.| 479 479 + |`onStart(callback)`|Called when the gesture is recognized and transitions to active state.| 480 480 + |`onEnd(callback)`|Called when a recognized gesture finishes, if previously in active state.| 481 481 + |`onFinalize(callback)`|Called when gesture handling finalizes (recognized or failed).| 482 482 + |`onTouchesDown(callback)`|Called every time a finger is placed on the screen.| 483 483 + |`onTouchesMove(callback)`|Called every time a finger moves on the screen.| 484 484 + |`onTouchesUp(callback)`|Called every time a finger is lifted from the screen.| 485 485 + |`onTouchesCancelled(callback)`|Called when a finger stops being tracked, e.g., gesture finishes.| 486 486 487 487 #### Callbacks Common to All Continuous Gestures: 488 488 489 489 - | Callback | Description | 490 490 - | --- | --- | 491 491 - | `onUpdate(callback)` | Called every time the gesture receives an update while active. | 492 492 - | `onChange(callback)` | Called with information about changes in value relative to the last event. | 489 489 + |Callback|Description| 490 490 + |-|-| 491 491 + |`onUpdate(callback)`|Called every time the gesture receives an update while active.| 492 492 + |`onChange(callback)`|Called with information about changes in value relative to the last event.| 493 493 494 494 ### Event Data 495 495 496 496 #### Attributes Specific to `ForceTouchGesture`: 497 497 498 498 - | Attribute | Description | 499 499 - | --------- | ------------------------ | 500 500 - | `force` | The pressure of a touch. | 498 498 + |Attribute|Description| 499 499 + |-|-| 500 500 + |`force`|The pressure of a touch.| 501 501 502 502 #### Attributes Common to All Gestures: 503 503 504 504 - | Attribute | Description | 505 505 - | --- | --- | 506 506 - | `state` | Current state of the handler, expressed as one of the constants in the `State` object. | 507 507 - | `numberOfPointers` | Number of pointers (fingers) currently on the screen. | 508 508 - | `pointerType` | Type of pointer device in use, represented by the `PointerType` enum (`TOUCH`, `STYLUS`, etc.). | 504 504 + |Attribute|Description| 505 505 + |-|-| 506 506 + |`state`|Current state of the handler, expressed as one of the constants in the `State` object.| 507 507 + |`numberOfPointers`|Number of pointers (fingers) currently on the screen.| 508 508 + |`pointerType`|Type of pointer device in use, represented by the `PointerType` enum (`TOUCH`, `STYLUS`, etc.).| 509 509 510 510 ## Buttons 511 511 ··· 1482 1482 1483 1483 #### Properties Specific to `FlingGesture`: 1484 1484 1485 1485 - | Property | Description | | | 1486 1486 - | --- | --- | --- | --- | 1487 1487 - | `direction(value: Directions)` | Specifies allowed movement directions. Use constants from the `Directions` object, combining multiple directions with \` | `. Example: `fling.direction(Directions.RIGHT | Directions.LEFT);`or`fling.direction(Directions.DOWN);\` | 1488 1488 - | `numberOfPointers(value: number)` | Sets the exact number of pointers required for gesture recognition. | | | 1489 1489 - | `mouseButton(value: MouseButton)` (Web & Android only) | Chooses which mouse button to respond to, using predefined fields in `MouseButton`: `LEFT`, `RIGHT`, `MIDDLE`, `BUTTON_4`, `BUTTON_5`, `ALL`. Combine with \` | `operator; default is`LEFT\`. | | 1485 1485 + |Property|Description||| 1486 1486 + |-|-|-|-| 1487 1487 + |`direction(value: Directions)`|Specifies allowed movement directions. Use constants from the `Directions` object, combining multiple directions with \`|`. Example: `fling.direction(Directions.RIGHT|Directions.LEFT);`or`fling.direction(Directions.DOWN);\`| 1488 1488 + |`numberOfPointers(value: number)`|Sets the exact number of pointers required for gesture recognition.||| 1489 1489 + |`mouseButton(value: MouseButton)` (Web & Android only)|Chooses which mouse button to respond to, using predefined fields in `MouseButton`: `LEFT`, `RIGHT`, `MIDDLE`, `BUTTON_4`, `BUTTON_5`, `ALL`. Combine with \`|`operator; default is`LEFT\`.|| 1490 1490 1491 1491 #### Properties Common to All Gestures: 1492 1492 1493 1493 - | Property | Description | 1494 1494 - | --- | --- | 1495 1495 - | `enabled(value: boolean)` | Determines if the handler analyzes touch events. Default is `true`. Disabling during recognition changes state to `FAILED` or `CANCELLED`. | 1496 1496 - | `shouldCancelWhenOutside(value: boolean)` | Cancels/fails recognition when a finger leaves the view area. Defaults vary by gesture type; most are `false`, except for `LongPressGesture` and `TapGesture` which default to `true`. | 1497 1497 - | `hitSlop(settings)` | Controls the active area for gesture recognition, reducing or expanding bounds as specified. Supports negative numbers, objects with specific side reductions, and `width`/`height` attributes. | 1498 1498 - | `withRef(ref)` | Sets a ref for interoperability with older APIs. | 1499 1499 - | `withTestId(testID)` | Assigns a `testID` for querying in tests. | 1500 1500 - | `cancelsTouchesInView(value)` (**iOS only**) | When `true`, cancels touches for native UI components when active. Default is `true`. | 1501 1501 - | `runOnJS(value: boolean)` | Determines if callbacks run on the JS thread (`true`) or UI thread (`false`). Defaults to `false` with `react-native-reanimated`. | 1502 1502 - | `simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)` | Marks gestures for simultaneous recognition without composing them. Requires separate detectors. | 1503 1503 - | `requireExternalGestureToFail(otherGesture1, otherGesture2, ...)` | Requires another gesture to fail before activation. Does not compose gestures; requires separate detectors. | 1504 1504 - | `blocksExternalGesture(otherGesture1, otherGesture2, ...)` | Delays other gestures until this one fails or doesn't start. Marks relations without composing; requires separate detectors. | 1493 1493 + |Property|Description| 1494 1494 + |-|-| 1495 1495 + |`enabled(value: boolean)`|Determines if the handler analyzes touch events. Default is `true`. Disabling during recognition changes state to `FAILED` or `CANCELLED`.| 1496 1496 + |`shouldCancelWhenOutside(value: boolean)`|Cancels/fails recognition when a finger leaves the view area. Defaults vary by gesture type; most are `false`, except for `LongPressGesture` and `TapGesture` which default to `true`.| 1497 1497 + |`hitSlop(settings)`|Controls the active area for gesture recognition, reducing or expanding bounds as specified. Supports negative numbers, objects with specific side reductions, and `width`/`height` attributes.| 1498 1498 + |`withRef(ref)`|Sets a ref for interoperability with older APIs.| 1499 1499 + |`withTestId(testID)`|Assigns a `testID` for querying in tests.| 1500 1500 + |`cancelsTouchesInView(value)` (**iOS only**)|When `true`, cancels touches for native UI components when active. Default is `true`.| 1501 1501 + |`runOnJS(value: boolean)`|Determines if callbacks run on the JS thread (`true`) or UI thread (`false`). Defaults to `false` with `react-native-reanimated`.| 1502 1502 + |`simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)`|Marks gestures for simultaneous recognition without composing them. Requires separate detectors.| 1503 1503 + |`requireExternalGestureToFail(otherGesture1, otherGesture2, ...)`|Requires another gesture to fail before activation. Does not compose gestures; requires separate detectors.| 1504 1504 + |`blocksExternalGesture(otherGesture1, otherGesture2, ...)`|Delays other gestures until this one fails or doesn't start. Marks relations without composing; requires separate detectors.| 1505 1505 1506 1506 ### Callbacks 1507 1507 1508 1508 #### Common to All Gestures: 1509 1509 1510 1510 - | Callback | Description | 1511 1511 - | --- | --- | 1512 1512 - | `onBegin(callback)` | Called when the gesture handler starts receiving touches but hasn't yet recognized the gesture. | 1513 1513 - | `onStart(callback)` | Triggered when the gesture is recognized and transitions to active state. | 1514 1514 - | `onEnd(callback)` | Invoked when a recognized gesture finishes, only if previously active. | 1515 1515 - | `onFinalize(callback)` | Called upon finalizing gesture handling—either recognition or failure. | 1516 1516 - | `onTouchesDown(callback)` | Executed every time a finger touches the screen. | 1517 1517 - | `onTouchesMove(callback)` | Triggered with each finger movement on the screen. | 1518 1518 - | `onTouchesUp(callback)` | Invoked when a finger is lifted from the screen. | 1519 1519 - | `onTouchesCancelled(callback)` | Called when a finger stops being tracked, such as gesture completion. | 1510 1510 + |Callback|Description| 1511 1511 + |-|-| 1512 1512 + |`onBegin(callback)`|Called when the gesture handler starts receiving touches but hasn't yet recognized the gesture.| 1513 1513 + |`onStart(callback)`|Triggered when the gesture is recognized and transitions to active state.| 1514 1514 + |`onEnd(callback)`|Invoked when a recognized gesture finishes, only if previously active.| 1515 1515 + |`onFinalize(callback)`|Called upon finalizing gesture handling—either recognition or failure.| 1516 1516 + |`onTouchesDown(callback)`|Executed every time a finger touches the screen.| 1517 1517 + |`onTouchesMove(callback)`|Triggered with each finger movement on the screen.| 1518 1518 + |`onTouchesUp(callback)`|Invoked when a finger is lifted from the screen.| 1519 1519 + |`onTouchesCancelled(callback)`|Called when a finger stops being tracked, such as gesture completion.| 1520 1520 1521 1521 ### Event Data 1522 1522 1523 1523 #### Specific to `FlingGesture`: 1524 1524 1525 1525 - | Attribute | Description | 1526 1526 - | --- | --- | 1527 1527 - | `x` | X coordinate of the pointer relative to the attached view (in points). | 1528 1528 - | `y` | Y coordinate of the pointer relative to the attached view (in points). | 1529 1529 - | `absoluteX` | X coordinate of the pointer relative to the window, recommended for transformed views. | 1530 1530 - | `absoluteY` | Y coordinate of the pointer relative to the window, recommended for transformed views. | 1525 1525 + |Attribute|Description| 1526 1526 + |-|-| 1527 1527 + |`x`|X coordinate of the pointer relative to the attached view (in points).| 1528 1528 + |`y`|Y coordinate of the pointer relative to the attached view (in points).| 1529 1529 + |`absoluteX`|X coordinate of the pointer relative to the window, recommended for transformed views.| 1530 1530 + |`absoluteY`|Y coordinate of the pointer relative to the window, recommended for transformed views.| 1531 1531 1532 1532 #### Common to All Gestures: 1533 1533 1534 1534 - | Attribute | Description | 1535 1535 - | --- | --- | 1536 1536 - | `state` | Current handler state, expressed as constants from the `State` object. | 1537 1537 - | `numberOfPointers` | Number of pointers currently on the screen. | 1538 1538 - | `pointerType` | Type of pointer device, using `PointerType`: `TOUCH`, `STYLUS`, `MOUSE`, `KEY`, `OTHER`. | 1534 1534 + |Attribute|Description| 1535 1535 + |-|-| 1536 1536 + |`state`|Current handler state, expressed as constants from the `State` object.| 1537 1537 + |`numberOfPointers`|Number of pointers currently on the screen.| 1538 1538 + |`pointerType`|Type of pointer device, using `PointerType`: `TOUCH`, `STYLUS`, `MOUSE`, `KEY`, `OTHER`.| 1539 1539 1540 1540 ## Common Handler Properties 1541 1541 ··· 3092 3092 3093 3093 - **Description:** Represents the number of pointers (fingers) currently on the screen. 3094 3094 3095 3095 - ````markdown 3096 3096 - # Gestures (Version: 2.x) 3095 3095 + ## Gestures (Version: 2.x) 3097 3096 3098 3098 - ## GestureDetector 3097 3097 + ### GestureDetector 3099 3098 3100 3099 The `GestureDetector` serves as the core component within RNGH2, tasked with creating and updating native gesture handlers based on the configuration of provided gestures. A key enhancement over previous versions is its ability to recognize multiple gestures simultaneously through gesture composition. It's important to note that `GestureDetector` does not support integration with the Animated API or Reanimated 1. 3101 3100 3102 3102 - ## Gesture 3101 3101 + ### Gesture 3103 3102 3104 3103 A `Gesture` object facilitates the creation and combination of various gestures, enabling more complex interactions. 3105 3104 3106 3106 - ## Pan Gesture 3105 3105 + ### Pan Gesture 3107 3106 3108 3107 ```typescript 3109 3108 <InteractiveExample /> 3110 3109 ``` 3111 3111 - ```` 3112 3110 3113 3111 ### Tap Gesture 3114 3112 ··· 3170 3168 3171 3169 The `GestureStateManager` allows manual control over gesture states. Note that react-native-reanimated is required for its use, as it enables synchronous execution of methods within worklets. 3172 3170 3173 3173 - ```` 3171 3171 + ## Touch Events 3174 3172 3175 3175 - # Touch Events 3176 3176 - 3177 3177 - ## Touch Event Attributes 3173 3173 + ### Touch Event Attributes 3178 3174 3179 3175 - **eventType**: Indicates the type of event, such as finger placement on the screen, movement, lifting, or cancellation. 3180 3176 ··· 3186 3182 3187 3183 > **Caution**: Do not rely on the order of items in `touches` as it may change during a gesture. Use the `id` attribute to track individual touches across events. 3188 3184 3189 3189 - ## PointerData Attributes 3185 3185 + ### PointerData Attributes 3190 3186 3191 3187 - **id**: A unique number representing the touch's ID, used for tracking the touch between events since the ID remains constant while being tracked. 3192 3188 ··· 3198 3194 3199 3195 - **absoluteY**: The Y coordinate of the current position of the touch relative to the window, expressed in point units. Recommended for use when the original view can be transformed due to a gesture. 3200 3196 3201 3201 - # Gesture State Manager 3197 3197 + ## Gesture State Manager 3202 3198 3203 3199 The `GestureStateManager` provides manual control over gesture states, requiring `react-native-reanimated` for synchronous execution of methods within worklets. 3204 3200 3205 3205 - ## Methods Overview 3201 3201 + ### Methods Overview 3206 3202 3207 3207 - ### `begin()` 3203 3203 + #### `begin()` 3208 3204 3209 3205 - **Purpose**: Transition the gesture to the `BEGAN` state. 3210 3206 - **Effectiveness**: Ineffective if the gesture is already active or has finished. 3211 3207 3212 3212 - ### `activate()` 3208 3208 + #### `activate()` 3213 3209 3214 3210 - **Purpose**: Transition the gesture to the `ACTIVE` state. 3215 3211 - **Effectiveness**: Ineffective if the handler is currently active or has finished. Activation may be delayed for gestures marked as `exclusive` until a higher-priority gesture fails. 3216 3212 3217 3217 - ### `end()` 3213 3213 + #### `end()` 3218 3214 3219 3215 - **Purpose**: Transition the gesture to the `END` state. 3220 3216 - **Effectiveness**: Ineffective if the handler has already completed its process. 3221 3217 3222 3222 - ### `fail()` 3218 3218 + #### `fail()` 3223 3219 3224 3220 - **Purpose**: Transition the gesture to the `FAILED` state. 3225 3221 - **Effectiveness**: Ineffective if the handler has already finished. 3226 3222 3227 3227 - # Touch Events 3223 3223 + ## Touch Events 3228 3224 3229 3229 - ## Touch Event Attributes 3225 3225 + ### Touch Event Attributes 3230 3226 3231 3227 - **eventType**: Indicates the type of event, such as finger placement on the screen, movement, lifting, or cancellation. 3232 3228 ··· 3238 3234 3239 3235 > **Caution**: Do not rely on the order of items in `touches` as it may change during a gesture. Use the `id` attribute to track individual touches across events. 3240 3236 3241 3241 - ## PointerData Attributes 3237 3237 + ### PointerData Attributes 3242 3238 3243 3239 - **id**: A unique number representing the touch's ID, used for tracking the touch between events since the ID remains constant while being tracked. 3244 3240 ··· 3250 3246 3251 3247 - **absoluteY**: The Y coordinate of the current position of the touch relative to the window, expressed in point units. Recommended for use when the original view can be transformed due to a gesture. 3252 3248 3253 3253 - # Gesture State Manager 3249 3249 + ## Gesture State Manager 3254 3250 3255 3251 The `GestureStateManager` provides manual control over gesture states, requiring `react-native-reanimated` for synchronous execution of methods within worklets. 3256 3252 3257 3257 - ## Methods Overview 3253 3253 + ### Methods Overview 3258 3254 3259 3259 - ### `begin()` 3255 3255 + #### `begin()` 3260 3256 3261 3257 - **Purpose**: Transition the gesture to the `BEGAN` state. 3262 3258 - **Effectiveness**: Ineffective if the gesture is already active or has finished. 3263 3259 3264 3264 - ### `activate()` 3260 3260 + #### `activate()` 3265 3261 3266 3262 - **Purpose**: Transition the gesture to the `ACTIVE` state. 3267 3263 - **Effectiveness**: Ineffective if the handler is currently active or has finished. Activation may be delayed for gestures marked as `exclusive` until a higher-priority gesture fails. 3268 3264 3269 3269 - ### `end()` 3265 3265 + #### `end()` 3270 3266 3271 3267 - **Purpose**: Transition the gesture to the `END` state. 3272 3268 - **Effectiveness**: Ineffective if the handler has already completed its process. 3273 3269 3274 3274 - ### `fail()` 3270 3270 + #### `fail()` 3275 3271 3276 3272 - **Purpose**: Transition the gesture to the `FAILED` state. 3277 3273 - **Effectiveness**: Ineffective if the handler has already finished. 3278 3274 3279 3279 - # GestureDetector 3275 3275 + ## GestureDetector 3280 3276 3281 3277 The `GestureDetector` is a key component within RNGH2, tasked with creating and updating native gesture handlers based on the configuration of provided gestures. A notable advancement over previous gesture handlers is its ability to recognize multiple gestures simultaneously through gesture composition. It's important to note that `GestureDetector` does not support the Animated API or Reanimated 1. 3282 3278 3283 3283 - ## Reference 3279 3279 + ### Reference 3284 3280 3285 3281 ```typescript 3286 3282 import { Gesture, GestureDetector } from 'react-native-gesture-handler'; ··· 3293 3289 </GestureDetector> 3294 3290 ); 3295 3291 } 3296 3296 - ```` 3292 3292 + ``` 3297 3293 3298 3294 ### Properties 3299 3295 ··· 3807 3803 3808 3804 ### Properties 3809 3805 3810 3810 - | Property | Description | 3811 3811 - | --- | --- | 3812 3812 - | `children` | Accepts either children or a render function that receives a boolean indicating if the component is currently pressed. | 3813 3813 - | `style` | Can be view styles or a function receiving a boolean reflecting the press state and returning view styles. | 3814 3814 - | `onPress` | Triggered after `onPressOut` when a single tap gesture is detected. | 3815 3815 - | `onPressIn` | Called before `onPress` when a touch is engaged. | 3816 3816 - | `onPressOut` | Called before `onPress` when a touch is released. | 3817 3817 - | `onLongPress` | Triggered immediately after the pointer has been down for at least `delayLongPress` milliseconds (default: 500 ms). After this, `onPressOut` will be called upon pointer lift and `onPress` won't trigger. | 3818 3818 - | `cancelable` | Determines if a press gesture can be interrupted by a parent gesture like scrolling. Defaults to `true`. | 3819 3819 - | `onHoverIn` (Web only) | Called when the pointer hovers over the element. | 3820 3820 - | `onHoverOut` (Web only) | Triggered when the pointer stops hovering over the element. | 3821 3821 - | `delayHoverIn` (Web only) | Duration to wait after hover in before calling `onHoverIn`. | 3822 3822 - | `delayHoverOut` (Web only) | Duration to wait after hover out before calling `onHoverOut`. | 3823 3823 - | `delayLongPress` | Time in milliseconds from `onPressIn` before `onLongPress` is called. | 3824 3824 - | `disabled` | Disables the `Pressable` behavior if set to true. | 3825 3825 - | `hitSlop` (Android & iOS only) | Additional distance outside of the view where a press is detected and `onPressIn` is triggered. Accepts `number` or `Rect`. | 3826 3826 - | `pressRetentionOffset` (Android & iOS only) | Extra distance outside of the view (or `hitSlop` if present) to consider a touch as a press before `onPressOut` is triggered. Accepts `number` or `Rect`. | 3827 3827 - | `android_disableSound` (Android only) | If true, prevents system sound on touch. | 3828 3828 - | `android_ripple` (Android only) | Enables the Android ripple effect and configures its color, radius, etc. Accepts `RippleConfig`. | 3829 3829 - | `testOnly_pressed` | Used for documentation or testing purposes (e.g., snapshot testing). | 3830 3830 - | `unstable_pressDelay` | Duration in milliseconds to wait after press down before calling `onPressIn`. | 3806 3806 + |Property|Description| 3807 3807 + |-|-| 3808 3808 + |`children`|Accepts either children or a render function that receives a boolean indicating if the component is currently pressed.| 3809 3809 + |`style`|Can be view styles or a function receiving a boolean reflecting the press state and returning view styles.| 3810 3810 + |`onPress`|Triggered after `onPressOut` when a single tap gesture is detected.| 3811 3811 + |`onPressIn`|Called before `onPress` when a touch is engaged.| 3812 3812 + |`onPressOut`|Called before `onPress` when a touch is released.| 3813 3813 + |`onLongPress`|Triggered immediately after the pointer has been down for at least `delayLongPress` milliseconds (default: 500 ms). After this, `onPressOut` will be called upon pointer lift and `onPress` won't trigger.| 3814 3814 + |`cancelable`|Determines if a press gesture can be interrupted by a parent gesture like scrolling. Defaults to `true`.| 3815 3815 + |`onHoverIn` (Web only)|Called when the pointer hovers over the element.| 3816 3816 + |`onHoverOut` (Web only)|Triggered when the pointer stops hovering over the element.| 3817 3817 + |`delayHoverIn` (Web only)|Duration to wait after hover in before calling `onHoverIn`.| 3818 3818 + |`delayHoverOut` (Web only)|Duration to wait after hover out before calling `onHoverOut`.| 3819 3819 + |`delayLongPress`|Time in milliseconds from `onPressIn` before `onLongPress` is called.| 3820 3820 + |`disabled`|Disables the `Pressable` behavior if set to true.| 3821 3821 + |`hitSlop` (Android & iOS only)|Additional distance outside of the view where a press is detected and `onPressIn` is triggered. Accepts `number` or `Rect`.| 3822 3822 + |`pressRetentionOffset` (Android & iOS only)|Extra distance outside of the view (or `hitSlop` if present) to consider a touch as a press before `onPressOut` is triggered. Accepts `number` or `Rect`.| 3823 3823 + |`android_disableSound` (Android only)|If true, prevents system sound on touch.| 3824 3824 + |`android_ripple` (Android only)|Enables the Android ripple effect and configures its color, radius, etc. Accepts `RippleConfig`.| 3825 3825 + |`testOnly_pressed`|Used for documentation or testing purposes (e.g., snapshot testing).| 3826 3826 + |`unstable_pressDelay`|Duration in milliseconds to wait after press down before calling `onPressIn`.| 3831 3827 3832 3828 ### Example 3833 3829 ··· 4223 4219 - **`BACK`**: Drawer appears below the content view, revealed by sliding away the content view. 4224 4220 - **`SLIDE`**: Drawer slides with the content view. 4225 4221 4226 4226 - | `FRONT` | `BACK` | `SLIDE` | 4227 4227 - | ------- | ------ | ------- | 4222 4222 + |`FRONT`|`BACK`|`SLIDE`| 4223 4223 + |-|-|-| 4228 4224 4229 4225 #### `edgeWidth` 4230 4226 ··· 4683 4679 4684 4680 ### Properties 4685 4681 4686 4686 - | Property | Description | 4687 4687 - | --- | --- | 4688 4688 - | `friction` | A number specifying the delay in visual interaction relative to gesture distance. E.g., `1` means no delay, `2` doubles it. | 4689 4689 - | `leftThreshold` | Distance from the left edge for panel animation to open or close state. Defaults to half of the panel's width. | 4690 4690 - | `rightThreshold` | Distance from the right edge for panel animation to open or close state. Defaults to half of the panel's width. | 4691 4691 - | `dragOffsetFromLeftEdge` | Minimum drag distance from the left edge to consider a swipe (default: 10). | 4692 4692 - | `dragOffsetFromRightEdge` | Minimum drag distance from the right edge to consider a swipe (default: 10). | 4693 4693 - | `overshootLeft` | Boolean indicating if swiping beyond the left action panel's width is allowed. Defaults to `true` if `renderLeftActions` is provided. | 4694 4694 - | `overshootRight` | Boolean indicating if swiping beyond the right action panel's width is allowed. Defaults to `true` if `renderRightActions` is provided. | 4695 4695 - | `overshootFriction` | Number specifying delay in visual interaction at overshoot (default: 1). For a native feel, try `8` or above. | 4682 4682 + |Property|Description| 4683 4683 + |-|-| 4684 4684 + |`friction`|A number specifying the delay in visual interaction relative to gesture distance. E.g., `1` means no delay, `2` doubles it.| 4685 4685 + |`leftThreshold`|Distance from the left edge for panel animation to open or close state. Defaults to half of the panel's width.| 4686 4686 + |`rightThreshold`|Distance from the right edge for panel animation to open or close state. Defaults to half of the panel's width.| 4687 4687 + |`dragOffsetFromLeftEdge`|Minimum drag distance from the left edge to consider a swipe (default: 10).| 4688 4688 + |`dragOffsetFromRightEdge`|Minimum drag distance from the right edge to consider a swipe (default: 10).| 4689 4689 + |`overshootLeft`|Boolean indicating if swiping beyond the left action panel's width is allowed. Defaults to `true` if `renderLeftActions` is provided.| 4690 4690 + |`overshootRight`|Boolean indicating if swiping beyond the right action panel's width is allowed. Defaults to `true` if `renderRightActions` is provided.| 4691 4691 + |`overshootFriction`|Number specifying delay in visual interaction at overshoot (default: 1). For a native feel, try `8` or above.| 4696 4692 4697 4693 ### Callbacks 4698 4694 ··· 4829 4825 4830 4826 ### Properties 4831 4827 4832 4832 - | Property | Description | 4833 4833 - | --- | --- | 4834 4834 - | `friction` | A number specifying how much the visual interaction will be delayed compared to the gesture distance. For example, a value of `1` means the swipeable panel follows the gesture exactly; `2` makes it two times "slower". | 4835 4835 - | `leftThreshold` | Distance from the left edge at which the released panel animates to the open state (or vice versa). Default is half of the panel's width. | 4836 4836 - | `rightThreshold` | Distance from the right edge for similar behavior as `leftThreshold`. Default is also half of the panel's width. | 4837 4837 - | `dragOffsetFromLeftEdge` | Minimum distance that must be dragged from the left edge to consider it a swipe. Default value: `10`. | 4838 4838 - | `dragOffsetFromRightEdge` | Similar to `dragOffsetFromLeftEdge`, but for the right edge. Default value: `10`. | 4839 4839 - | `overshootLeft` | Boolean indicating if the panel can be pulled further than the left actions panel's width. Defaults to `true` if a left panel render method is present. | 4840 4840 - | `overshootRight` | Similar to `overshootLeft`, but for the right side. Defaults to `true` if a right panel render method is present. | 4841 4841 - | `overshootFriction` | Number specifying visual interaction delay at overshoot. Default value: `1`. For a native feel, try `8` or above. | 4828 4828 + |Property|Description| 4829 4829 + |-|-| 4830 4830 + |`friction`|A number specifying how much the visual interaction will be delayed compared to the gesture distance. For example, a value of `1` means the swipeable panel follows the gesture exactly; `2` makes it two times "slower".| 4831 4831 + |`leftThreshold`|Distance from the left edge at which the released panel animates to the open state (or vice versa). Default is half of the panel's width.| 4832 4832 + |`rightThreshold`|Distance from the right edge for similar behavior as `leftThreshold`. Default is also half of the panel's width.| 4833 4833 + |`dragOffsetFromLeftEdge`|Minimum distance that must be dragged from the left edge to consider it a swipe. Default value: `10`.| 4834 4834 + |`dragOffsetFromRightEdge`|Similar to `dragOffsetFromLeftEdge`, but for the right edge. Default value: `10`.| 4835 4835 + |`overshootLeft`|Boolean indicating if the panel can be pulled further than the left actions panel's width. Defaults to `true` if a left panel render method is present.| 4836 4836 + |`overshootRight`|Similar to `overshootLeft`, but for the right side. Defaults to `true` if a right panel render method is present.| 4837 4837 + |`overshootFriction`|Number specifying visual interaction delay at overshoot. Default value: `1`. For a native feel, try `8` or above.| 4842 4838 4843 4839 **Deprecated Callbacks:** 4844 4840 4845 4841 - `onSwipeableLeftOpen`: Deprecated; use `onSwipeableOpen(direction)`. 4846 4842 - `onSwipeableRightOpen`: Deprecated; use `onSwipeableOpen(direction)`. 4847 4843 4848 4848 - | Property | Description | 4849 4849 - | --- | --- | 4850 4850 - | `onSwipeableOpen` | Called when an action panel gets open (either right or left). Takes swipe direction as an argument. | 4851 4851 - | `onSwipeableClose` | Called when the action panel is closed, with swipe direction as an argument. | 4852 4852 - | `onSwipeableWillOpen` | Called when an action panel starts animating on open (either right or left), taking swipe direction as an argument. | 4853 4853 - | `onSwipeableWillClose` | Called when an action panel starts animating on close, with swipe direction as an argument. | 4844 4844 + |Property|Description| 4845 4845 + |-|-| 4846 4846 + |`onSwipeableOpen`|Called when an action panel gets open (either right or left). Takes swipe direction as an argument.| 4847 4847 + |`onSwipeableClose`|Called when the action panel is closed, with swipe direction as an argument.| 4848 4848 + |`onSwipeableWillOpen`|Called when an action panel starts animating on open (either right or left), taking swipe direction as an argument.| 4849 4849 + |`onSwipeableWillClose`|Called when an action panel starts animating on close, with swipe direction as an argument.| 4854 4850 4855 4851 **Rendering Methods:** 4856 4852 ··· 4888 4884 4889 4885 Using a reference to `Swipeable`, you can trigger actions: 4890 4886 4891 4891 - | Method | Description | 4892 4892 - | ----------- | ------------------------------------------------------- | 4893 4893 - | `close` | Closes the component with animation. | 4894 4894 - | `openLeft` | Opens the component on the left side. | 4895 4895 - | `openRight` | Opens the component on the right side. | 4896 4896 - | `reset` | Resets swiping states without triggering any animation. | 4887 4887 + |Method|Description| 4888 4888 + |-|-| 4889 4889 + |`close`|Closes the component with animation.| 4890 4890 + |`openLeft`|Opens the component on the left side.| 4891 4891 + |`openRight`|Opens the component on the right side.| 4892 4892 + |`reset`|Resets swiping states without triggering any animation.| 4897 4893 4898 4894 ### Example 4899 4895

+307 -307

out/llms-full-react-native-reanimated.txt

reviewed

··· 217 217 218 218 ### Platform Compatibility 219 219 220 220 - | Android | iOS | Web | 221 221 - | ------- | --- | --- | 222 222 - | ✅ | ✅ | ✅ | 220 220 + |Android|iOS|Web| 221 221 + |-|-|-| 222 222 + |✅|✅|✅| 223 223 224 224 ## useAnimatedScrollHandler 225 225 ··· 281 281 282 282 ### Platform Compatibility 283 283 284 284 - | Android | iOS | Web | 285 285 - | ------- | --- | --- | 286 286 - | ✅ | ✅ | ✅ | 284 284 + |Android|iOS|Web| 285 285 + |-|-|-| 286 286 + |✅|✅|✅| 287 287 288 288 ## useEvent Hook Overview 289 289 ··· 338 338 339 339 ### Platform Compatibility 340 340 341 341 - | Android | iOS | Web | 342 342 - | ------- | --- | --- | 343 343 - | ✅ | ✅ | ✅ | 341 341 + |Android|iOS|Web| 342 342 + |-|-|-| 343 343 + |✅|✅|✅| 344 344 345 345 This overview provides a concise guide to using the `useEvent` hook effectively within React Native Reanimated projects. 346 346 ··· 406 406 407 407 ### Platform Compatibility 408 408 409 409 - | Android | iOS | Web | 410 410 - | ------- | --- | --- | 411 411 - | ✅ | ✅ | ✅ | 409 409 + |Android|iOS|Web| 410 410 + |-|-|-| 411 411 + |✅|✅|✅| 412 412 413 413 This documentation provides a comprehensive overview of how to utilize the `useHandler` hook within React Native Reanimated for creating custom event handlers. 414 414 ··· 480 480 481 481 ### Platform Compatibility 482 482 483 483 - | Android | iOS | Web | 484 484 - | ------- | --- | --- | 485 485 - | ✅ | ✅ | ✅ | 483 483 + |Android|iOS|Web| 484 484 + |-|-|-| 485 485 + |✅|✅|✅| 486 486 487 487 ## Troubleshooting 488 488 ··· 904 904 905 905 ### Platform Compatibility 906 906 907 907 - | Android | iOS | Web | 908 908 - | ------- | --- | --- | 909 909 - | ✅ | ✅ | ❌ | 907 907 + |Android|iOS|Web| 908 908 + |-|-|-| 909 909 + |✅|✅|❌| 910 910 911 911 ## useAnimatedScrollHandler 912 912 ··· 968 968 969 969 ### Platform Compatibility 970 970 971 971 - | Android | iOS | Web | 972 972 - | ------- | --- | --- | 973 973 - | ✅ | ✅ | ✅ | 971 971 + |Android|iOS|Web| 972 972 + |-|-|-| 973 973 + |✅|✅|✅| 974 974 975 975 ## scrollTo Function in React Native Reanimated 976 976 ··· 1018 1018 1019 1019 ### Platform Compatibility 1020 1020 1021 1021 - | Android | iOS | Web | 1022 1022 - | ------- | --- | --- | 1023 1023 - | ✅ | ✅ | ✅ | 1021 1021 + |Android|iOS|Web| 1022 1022 + |-|-|-| 1023 1023 + |✅|✅|✅| 1024 1024 1025 1025 ## getRelativeCoords Functionality 1026 1026 ··· 1071 1071 1072 1072 ### Platform Compatibility 1073 1073 1074 1074 - | Android | iOS | Web | 1075 1075 - | ------- | --- | --- | 1076 1076 - | ✅ | ✅ | ✅ | 1074 1074 + |Android|iOS|Web| 1075 1075 + |-|-|-| 1076 1076 + |✅|✅|✅| 1077 1077 1078 1078 ## useAnimatedGestureHandler 1079 1079 ··· 1132 1132 1133 1133 ### Platform Compatibility 1134 1134 1135 1135 - | Android | iOS | Web | 1136 1136 - | ------- | --- | --- | 1137 1137 - | ✅ | ✅ | ⚠️ | 1135 1135 + |Android|iOS|Web| 1136 1136 + |-|-|-| 1137 1137 + |✅|✅|⚠️| 1138 1138 1139 1139 - On the Web, it is necessary to pass the returned handler object to both `onGestureEvent` and `onHandlerStateChange` parameters. 1140 1140 ··· 1183 1183 1184 1184 ### Platform Compatibility 1185 1185 1186 1186 - | Android | iOS | Web | 1187 1187 - | ------- | --- | --- | 1188 1188 - | ✅ | ✅ | ✅ | 1186 1186 + |Android|iOS|Web| 1187 1187 + |-|-|-| 1188 1188 + |✅|✅|✅| 1189 1189 1190 1190 ```markdown 1191 1191 # Advanced APIs - Version 3.x ··· 1417 1417 1418 1418 ### Platform Compatibility 1419 1419 1420 1420 - | Android | iOS | Web | 1421 1421 - | ------- | --- | --- | 1422 1422 - | ✅ | ✅ | ✅ | 1420 1420 + |Android|iOS|Web| 1421 1421 + |-|-|-| 1422 1422 + |✅|✅|✅| 1423 1423 1424 1424 ## Measure Functionality in React Native Reanimated 1425 1425 ··· 1455 1455 1456 1456 The `measure` function returns an object containing: 1457 1457 1458 1458 - | Field | Description | 1459 1459 - | --- | --- | 1460 1460 - | `x` | A number representing the X coordinate relative to the parent component. | 1461 1461 - | `y` | A number representing the Y coordinate relative to the parent component. | 1462 1462 - | `width` | A number representing the width of the component. | 1463 1463 - | `height` | A number representing the height of the component. | 1464 1464 - | `pageX` | A number representing the X coordinate relative to the screen. | 1465 1465 - | `pageY` | A number representing the Y coordinate relative to the screen. | 1458 1458 + |Field|Description| 1459 1459 + |-|-| 1460 1460 + |`x`|A number representing the X coordinate relative to the parent component.| 1461 1461 + |`y`|A number representing the Y coordinate relative to the parent component.| 1462 1462 + |`width`|A number representing the width of the component.| 1463 1463 + |`height`|A number representing the height of the component.| 1464 1464 + |`pageX`|A number representing the X coordinate relative to the screen.| 1465 1465 + |`pageY`|A number representing the Y coordinate relative to the screen.| 1466 1466 1467 1467 Alternatively, it returns `null` if the measurement could not be performed. 1468 1468 ··· 1510 1510 1511 1511 ### Platform Compatibility 1512 1512 1513 1513 - | Android | iOS | Web | 1514 1514 - | ------- | --- | --- | 1515 1515 - | ✅ | ✅ | ✅ | 1513 1513 + |Android|iOS|Web| 1514 1514 + |-|-|-| 1515 1515 + |✅|✅|✅| 1516 1516 1517 1517 ## useAnimatedReaction 1518 1518 ··· 1601 1601 1602 1602 ### Platform Compatibility 1603 1603 1604 1604 - | Android | iOS | Web | 1605 1605 - | ------- | --- | --- | 1606 1606 - | ✅ | ✅ | ✅ | 1604 1604 + |Android|iOS|Web| 1605 1605 + |-|-|-| 1606 1606 + |✅|✅|✅| 1607 1607 1608 1608 ````markdown 1609 1609 # withSequence ··· 1640 1640 1641 1641 ### Platform Compatibility 1642 1642 1643 1643 - | Android | iOS | Web | 1644 1644 - | ------- | --- | --- | 1645 1645 - | ✅ | ✅ | ✅ | 1643 1643 + |Android|iOS|Web| 1644 1644 + |-|-|-| 1645 1645 + |✅|✅|✅| 1646 1646 1647 1647 ```` 1648 1648 ··· 1700 1700 1701 1701 ### Platform Compatibility 1702 1702 1703 1703 - | Android | iOS | Web | 1704 1704 - | ------- | --- | --- | 1705 1705 - | ✅ | ✅ | ✅ | 1703 1703 + |Android|iOS|Web| 1704 1704 + |-|-|-| 1705 1705 + |✅|✅|✅| 1706 1706 1707 1707 - Reference 1708 1708 - Arguments ··· 1909 1909 1910 1910 - **`delayedAnimation`**: The animation that will be delayed. 1911 1911 1912 1912 - - **`reduceMotion`** _(Optional)_: Determines how the animation responds to the device's reduced motion accessibility setting. 1912 1912 + - **`reduceMotion`** *(Optional)*: Determines how the animation responds to the device's reduced motion accessibility setting. 1913 1913 1914 1914 #### Returns 1915 1915 ··· 1917 1917 1918 1918 ### Example 1919 1919 1920 1920 - _(Example content would go here)_ 1920 1920 + *(Example content would go here)* 1921 1921 1922 1922 ### Platform Compatibility 1923 1923 1924 1924 - | Android | iOS | Web | 1925 1925 - | ------- | --- | --- | 1926 1926 - | ✅ | ✅ | ✅ | 1924 1924 + |Android|iOS|Web| 1925 1925 + |-|-|-| 1926 1926 + |✅|✅|✅| 1927 1927 1928 1928 - --- 1928 1928 + *** 1929 1929 1930 1930 ## useAnimatedKeyboard in React Native Reanimated (Version: 3.x) 1931 1931 ··· 1963 1963 1964 1964 The `useAnimatedKeyboard` hook returns an object with the following fields: 1965 1965 1966 1966 - | Name | Type | Description | 1967 1967 - | --- | --- | --- | 1968 1968 - | height | `SharedValue<number>` | A shared value representing the current height of the keyboard. | 1969 1969 - | state | `SharedValue<KeyboardState>` | A shared value indicating the current state of the keyboard. Possible states: `{ CLOSED, OPEN, CLOSING, OPENING }` | 1966 1966 + |Name|Type|Description| 1967 1967 + |-|-|-| 1968 1968 + |height|`SharedValue<number>`|A shared value representing the current height of the keyboard.| 1969 1969 + |state|`SharedValue<KeyboardState>`|A shared value indicating the current state of the keyboard. Possible states: `{ CLOSED, OPEN, CLOSING, OPENING }`| 1970 1970 1971 1971 ### Remarks 1972 1972 ··· 1990 1990 1991 1991 ### Platform Compatibility 1992 1992 1993 1993 - | Android | iOS | Web | 1994 1994 - | ------- | --- | --- | 1995 1995 - | ✅ | ✅ | ❌ | 1993 1993 + |Android|iOS|Web| 1994 1994 + |-|-|-| 1995 1995 + |✅|✅|❌| 1996 1996 1997 1997 - **Reference** 1998 1998 ··· 2060 2060 2061 2061 ### Platform Compatibility 2062 2062 2063 2063 - | Android | iOS | Web | 2064 2064 - | ------- | --- | --- | 2065 2065 - | ✅ | ✅ | ✅ | 2063 2063 + |Android|iOS|Web| 2064 2064 + |-|-|-| 2065 2065 + |✅|✅|✅| 2066 2066 2067 2067 ## dispatchCommand 2068 2068 ··· 2114 2114 2115 2115 ### Platform Compatibility 2116 2116 2117 2117 - | Android | iOS | Web | 2118 2118 - | ------- | --- | --- | 2119 2119 - | ✅ | ✅ | ❌ | 2117 2117 + |Android|iOS|Web| 2118 2118 + |-|-|-| 2119 2119 + |✅|✅|❌| 2120 2120 2121 2121 ## withClamp 2122 2122 ··· 2139 2139 2140 2140 An object containing the following properties: 2141 2141 2142 2142 - | Name | Type | Description | 2143 2143 - | ---- | ------ | ----------------------------------------------------- | 2144 2144 - | min | number | Optional. The lowest value your animation can reach. | 2145 2145 - | max | number | Optional. The highest value your animation can reach. | 2142 2142 + |Name|Type|Description| 2143 2143 + |-|-|-| 2144 2144 + |min|number|Optional. The lowest value your animation can reach.| 2145 2145 + |max|number|Optional. The highest value your animation can reach.| 2146 2146 2147 2147 ##### `animation` 2148 2148 ··· 2160 2160 2161 2161 `withClamp` returns an animation object. This can be directly assigned to a shared value or used as a style value in `useAnimatedStyle`. 2162 2162 2163 2163 - | Platform | Supported | 2164 2164 - | -------- | --------- | 2165 2165 - | Android | ✅ | 2166 2166 - | iOS | ✅ | 2167 2167 - | Web | ✅ | 2163 2163 + |Platform|Supported| 2164 2164 + |-|-| 2165 2165 + |Android|✅| 2166 2166 + |iOS|✅| 2167 2167 + |Web|✅| 2168 2168 2169 2169 ## useAnimatedSensor 2170 2170 ··· 2206 2206 2207 2207 ##### `config` (Optional) 2208 2208 2209 2209 - | Name | Type | Default | Description | 2210 2210 - | --- | --- | --- | --- | 2211 2211 - | interval | `number \| "auto"` | `"auto"` | Time between sensor readings in milliseconds. `"auto"` matches the device's screen refresh rate. | 2212 2212 - | adjustToInterfaceOrientation | `boolean` | `true` | Adjusts measurements to the current interface orientation. | 2213 2213 - | iosReferenceFrame | `IOSReferenceFrame` | `IOSReferenceFrame.Auto` | Frame of reference for iOS sensors. | 2209 2209 + |Name|Type|Default|Description| 2210 2210 + |-|-|-|-| 2211 2211 + |interval|`number \| "auto"`|`"auto"`|Time between sensor readings in milliseconds. `"auto"` matches the device's screen refresh rate.| 2212 2212 + |adjustToInterfaceOrientation|`boolean`|`true`|Adjusts measurements to the current interface orientation.| 2213 2213 + |iosReferenceFrame|`IOSReferenceFrame`|`IOSReferenceFrame.Auto`|Frame of reference for iOS sensors.| 2214 2214 2215 2215 Available `IOSReferenceFrame` options: 2216 2216 ··· 2224 2224 2225 2225 `useAnimatedSensor` returns an object: 2226 2226 2227 2227 - | Name | Type | Description | 2228 2228 - | --- | --- | --- | 2229 2229 - | sensor | `SharedValue<Value3D \| ValueRotation>` | Shared value with sensor measurements. | 2230 2230 - | unregister | `() => void` | Stops listening to sensor updates when called. | 2231 2231 - | isAvailable | `boolean` | Indicates if the sensor is available for use. | 2232 2232 - | config | `SensorConfig` | Contains sensor configuration details. | 2227 2227 + |Name|Type|Description| 2228 2228 + |-|-|-| 2229 2229 + |sensor|`SharedValue<Value3D \| ValueRotation>`|Shared value with sensor measurements.| 2230 2230 + |unregister|`() => void`|Stops listening to sensor updates when called.| 2231 2231 + |isAvailable|`boolean`|Indicates if the sensor is available for use.| 2232 2232 + |config|`SensorConfig`|Contains sensor configuration details.| 2233 2233 2234 2234 The shared value from the **rotation sensor** includes: 2235 2235 ··· 2278 2278 2279 2279 ### Platform Compatibility 2280 2280 2281 2281 - | Android | iOS | Web | 2282 2282 - | ------- | --- | --- | 2283 2283 - | ✅ | ✅ | ✅ | 2281 2281 + |Android|iOS|Web| 2282 2282 + |-|-|-| 2283 2283 + |✅|✅|✅| 2284 2284 2285 2285 ## setNativeProps 2286 2286 ··· 2325 2325 2326 2326 ### Platform Compatibility 2327 2327 2328 2328 - | Android | iOS | Web | 2329 2329 - | ------- | --- | --- | 2330 2330 - | ✅ | ✅ | ✅ | 2328 2328 + |Android|iOS|Web| 2329 2329 + |-|-|-| 2330 2330 + |✅|✅|✅| 2331 2331 2332 2332 - --- 2332 2332 + *** 2333 2333 2334 2334 ## React Native Reanimated: useReducedMotion Hook (Version 3.x) 2335 2335 ··· 2382 2382 2383 2383 ### Platform Compatibility 2384 2384 2385 2385 - | Android | iOS | Web | 2386 2386 - | ------- | --- | --- | 2387 2387 - | ✅ | ✅ | ✅ | 2385 2385 + |Android|iOS|Web| 2386 2386 + |-|-|-| 2387 2387 + |✅|✅|✅| 2388 2388 2389 2389 This hook is compatible across Android, iOS, and Web platforms. 2390 2390 ··· 2418 2418 2419 2419 ### Remarks 2420 2420 2421 2421 - **Info:** The term _mutable value_ refers to an object created by `makeMutable`, distinguishing it from a _shared value_, which is essentially a mutable value with automatic cleanup. 2421 2421 + **Info:** The term *mutable value* refers to an object created by `makeMutable`, distinguishing it from a *shared value*, which is essentially a mutable value with automatic cleanup. 2422 2422 2423 2423 - All remarks applicable to the `useSharedValue` hook are relevant to `makeMutable`. 2424 2424 - Avoid invoking `makeMutable` directly within component scope. Component re-renders will generate a new object, potentially resetting the initial value and losing previous state. ··· 2477 2477 2478 2478 #### Comparison with `useSharedValue` 2479 2479 2480 2480 - | Feature | `makeMutable` | `useSharedValue` | 2481 2481 - | --- | --- | --- | 2482 2482 - | Object Creation | Creates a new object on each call | Reuses the same object on each call | 2483 2483 - | Initial Value Change | A new object is created if `initial` changes | The initially created object remains unchanged if `initialValue` changes | 2484 2484 - | Scope Usage | Can be used outside of component scope | Limited to use within component scope | 2485 2485 - | Loop Usage | Usable in loops with variable iterations | Usable in loops only if the number of hooks (`useSharedValue` calls) is constant | 2486 2486 - | Animation Cancellation | Does not automatically cancel animations on unmount | Automatically cancels animations when the component unmounts | 2480 2480 + |Feature|`makeMutable`|`useSharedValue`| 2481 2481 + |-|-|-| 2482 2482 + |Object Creation|Creates a new object on each call|Reuses the same object on each call| 2483 2483 + |Initial Value Change|A new object is created if `initial` changes|The initially created object remains unchanged if `initialValue` changes| 2484 2484 + |Scope Usage|Can be used outside of component scope|Limited to use within component scope| 2485 2485 + |Loop Usage|Usable in loops with variable iterations|Usable in loops only if the number of hooks (`useSharedValue` calls) is constant| 2486 2486 + |Animation Cancellation|Does not automatically cancel animations on unmount|Automatically cancels animations when the component unmounts| 2487 2487 2488 2488 ### Platform Compatibility 2489 2489 2490 2490 - | Android | iOS | Web | 2491 2491 - | ------- | --- | --- | 2492 2492 - | ✅ | ✅ | ✅ | 2490 2490 + |Android|iOS|Web| 2491 2491 + |-|-|-| 2492 2492 + |✅|✅|✅| 2493 2493 2494 2494 ## Accurate Call Stacks 2495 2495 ··· 2502 2502 } 2503 2503 ``` 2504 2504 2505 2505 - | Aspect | Description | 2506 2506 - | --- | --- | 2507 2507 - | **Issue** | Misleading call stacks in error or warning messages. | 2508 2508 - | **Cause** | Call stacks often highlight Reanimated's internal code rather than API misuse. | 2509 2509 - | **Impact** | Difficulty in identifying the true source of problems during debugging. | 2505 2505 + |Aspect|Description| 2506 2506 + |-|-| 2507 2507 + |**Issue**|Misleading call stacks in error or warning messages.| 2508 2508 + |**Cause**|Call stacks often highlight Reanimated's internal code rather than API misuse.| 2509 2509 + |**Impact**|Difficulty in identifying the true source of problems during debugging.| 2510 2510 2511 2511 Understanding this behavior is crucial for effectively diagnosing and resolving issues within Reanimated projects. 2512 2512 ··· 2700 2700 2701 2701 ### Platform Compatibility 2702 2702 2703 2703 - | Android | iOS | Web | 2704 2704 - | ------- | --- | --- | 2705 2705 - | ✅ | ✅ | ✅ | 2703 2703 + |Android|iOS|Web| 2704 2704 + |-|-|-| 2705 2705 + |✅|✅|✅| 2706 2706 2707 2707 - Reference 2708 2708 - Arguments ··· 2734 2734 2735 2735 The example below illustrates the difference in call stacks before and after applying the Reanimated Metro config wrapper. The **Before** scenario shows Reanimated source code as the error origin, while the **After** scenario reveals the actual incorrect code that caused the error. 2736 2736 2737 2737 - | Before | After | 2738 2738 - | ------ | ----- | 2739 2739 - | | | 2737 2737 + |Before|After| 2738 2738 + |-|-| 2739 2739 + ||| 2740 2740 2741 2741 ### Remarks 2742 2742 2743 2743 - `wrapWithReanimatedMetroConfig` does not remove any stack frames; it only collapses irrelevant ones from Reanimated. To inspect these, you can expand collapsed stack frames by clicking on the **See N more frames** text at the bottom of the **Call Stack**. 2744 2744 2745 2745 - | Collapsed | Expanded | 2746 2746 - | --------- | -------- | 2747 2747 - | | | 2745 2745 + |Collapsed|Expanded| 2746 2746 + |-|-| 2747 2747 + ||| 2748 2748 2749 2749 - Some errors, especially those arising from asynchronous code, may still point to Reanimated internals instead of the exact problematic line in your code. This happens because stack traces can lose track of the original code that initiated the asynchronous operation. In such cases, manual debugging based on the error message is necessary to identify the potential cause of the problem. 2750 2750 ··· 2787 2787 2788 2788 ### Platform Compatibility 2789 2789 2790 2790 - | Android | iOS | Web | 2791 2791 - | ------- | --- | --- | 2792 2792 - | ✅ | ✅ | ✅ | 2790 2790 + |Android|iOS|Web| 2791 2791 + |-|-|-| 2792 2792 + |✅|✅|✅| 2793 2793 2794 2794 ```markdown 2795 2795 # Guides ··· 3315 3315 - **Expo SDK**: Match major and minor versions with Expo SDK. 3316 3316 - Example: Expo SDK 52 supports `~3.16.x`. Update to the latest patch, e.g., `3.16.7`. 3317 3317 3318 3318 - | Expo SDK Version | Reanimated Version | 3319 3319 - | ---------------- | ------------------ | 3320 3320 - | `52` | `~3.16.1` | 3321 3321 - | `51` | `~3.10.1` | 3322 3322 - | `50` | `~3.6.2` | 3318 3318 + |Expo SDK Version|Reanimated Version| 3319 3319 + |-|-| 3320 3320 + |`52`|`~3.16.1`| 3321 3321 + |`51`|`~3.10.1`| 3322 3322 + |`50`|`~3.6.2`| 3323 3323 3324 3324 - **Expo Prebuild or React Native without Framework**: Use a version compatible with your React Native version according to the Compatibility table. 3325 3325 ··· 3370 3370 3371 3371 ### Currently Supported React Native Versions (Paper) 3372 3372 3373 3373 - | Version | 0.63 | 0.64 | 0.65 | 0.66 | 0.67 | 0.68 | 0.69 | 0.70 | 0.71 | 0.72 | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 3374 3374 - | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | 3375 3375 - | 3.18.0 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | yes | yes | 3376 3376 - | 3.17.4 - 3.17.5 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | yes | no | 3377 3377 - | 3.17.1 – 3.17.3 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | no | no | 3378 3378 - | 3.17.0 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | no | no | no | 3379 3379 - | 3.16.7 | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | no | no | no | 3380 3380 - | 3.16.0 – 3.16.6 | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | no | no | no | no | 3381 3381 - | 3.15.x | no | no | no | no | no | no | no | no | no | no | no | yes | yes | no | no | no | no | no | 3382 3382 - | 3.9.x – 3.14.x | no | no | no | no | no | no | no | no | no | no | no | yes | no | no | no | no | no | no | 3383 3383 - | 3.6.x – 3.8.x | no | no | no | yes | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | 3384 3384 - | 3.5.x | no | no | no | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | 3385 3385 - | 3.3.x – 3.4.x | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | 3386 3386 - | 3.0.x – 3.2.x | yes | yes | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | 3387 3387 - | 2.14.x – 2.17.x | yes | yes | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | 3388 3388 - | 2.11.x – 2.13.x | yes | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | no | 3389 3389 - | 2.10.x | yes | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | no | no | 3390 3390 - | 2.5.x – 2.9.x | yes | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | no | no | no | 3391 3391 - | 2.3.x – 2.4.x | yes | yes | yes | yes | yes | no | no | no | no | no | no | no | no | no | no | no | no | no | 3373 3373 + |Version|0.63|0.64|0.65|0.66|0.67|0.68|0.69|0.70|0.71|0.72|0.73|0.74|0.75|0.76|0.77|0.78|0.79|0.80| 3374 3374 + |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| 3375 3375 + |3.18.0|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|yes|yes| 3376 3376 + |3.17.4 - 3.17.5|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|yes|no| 3377 3377 + |3.17.1 – 3.17.3|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|no|no| 3378 3378 + |3.17.0|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|no|no|no| 3379 3379 + |3.16.7|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|no|no|no| 3380 3380 + |3.16.0 – 3.16.6|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|no|no|no|no| 3381 3381 + |3.15.x|no|no|no|no|no|no|no|no|no|no|no|yes|yes|no|no|no|no|no| 3382 3382 + |3.9.x – 3.14.x|no|no|no|no|no|no|no|no|no|no|no|yes|no|no|no|no|no|no| 3383 3383 + |3.6.x – 3.8.x|no|no|no|yes|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no| 3384 3384 + |3.5.x|no|no|no|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no| 3385 3385 + |3.3.x – 3.4.x|yes|yes|yes|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no| 3386 3386 + |3.0.x – 3.2.x|yes|yes|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no| 3387 3387 + |2.14.x – 2.17.x|yes|yes|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no| 3388 3388 + |2.11.x – 2.13.x|yes|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no|no| 3389 3389 + |2.10.x|yes|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no|no|no| 3390 3390 + |2.5.x – 2.9.x|yes|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no|no|no|no| 3391 3391 + |2.3.x – 2.4.x|yes|yes|yes|yes|yes|no|no|no|no|no|no|no|no|no|no|no|no|no| 3392 3392 3393 3393 **Note:** Reanimated 2 will not receive support for the newest React Native versions. To access the latest features and updates, upgrade to Reanimated 3. 3394 3394 ··· 3398 3398 3399 3399 Reanimated supports bridgeless mode. 3400 3400 3401 3401 - | Version | 0.63 | 0.64 | 0.65 | 0.66 | 0.67 | 0.68 | 0.69 | 0.70 | 0.71 | 0.72 | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 3402 3402 - | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | 3403 3403 - | 3.18.0 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | yes | yes | 3404 3404 - | 3.17.4 - 3.17.5 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | yes | no | 3405 3405 - | 3.17.1 – 3.17.3 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | no | no | 3406 3406 - | 3.17.0 | no | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | no | no | no | 3407 3407 - | 3.16.7 | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | yes | no | no | no | 3408 3408 - | 3.16.0 – 3.16.6 | no | no | no | no | no | no | no | no | no | no | no | yes | yes | yes | no | no | no | no | 3409 3409 - | 3.15.x | no | no | no | no | no | no | no | no | no | no | no | yes | yes | no | no | no | no | no | 3410 3410 - | 3.9.x – 3.14.x | no | no | no | no | no | no | no | no | no | no | no | yes | no | no | no | no | no | no | 3411 3411 - | 3.6.x – 3.8.x | no | no | no | no | no | no | no | no | no | yes | yes | no | no | no | no | no | no | no | 3412 3412 - | 3.1.x – 3.5.x | no | no | no | no | no | no | no | no | no | yes | no | no | no | no | no | no | no | no | 3413 3413 - | 3.0.x | no | no | no | no | no | no | no | no | yes | no | no | no | no | no | no | no | no | no | 3401 3401 + |Version|0.63|0.64|0.65|0.66|0.67|0.68|0.69|0.70|0.71|0.72|0.73|0.74|0.75|0.76|0.77|0.78|0.79|0.80| 3402 3402 + |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| 3403 3403 + |3.18.0|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|yes|yes| 3404 3404 + |3.17.4 - 3.17.5|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|yes|no| 3405 3405 + |3.17.1 – 3.17.3|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|no|no| 3406 3406 + |3.17.0|no|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|no|no|no| 3407 3407 + |3.16.7|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|yes|no|no|no| 3408 3408 + |3.16.0 – 3.16.6|no|no|no|no|no|no|no|no|no|no|no|yes|yes|yes|no|no|no|no| 3409 3409 + |3.15.x|no|no|no|no|no|no|no|no|no|no|no|yes|yes|no|no|no|no|no| 3410 3410 + |3.9.x – 3.14.x|no|no|no|no|no|no|no|no|no|no|no|yes|no|no|no|no|no|no| 3411 3411 + |3.6.x – 3.8.x|no|no|no|no|no|no|no|no|no|yes|yes|no|no|no|no|no|no|no| 3412 3412 + |3.1.x – 3.5.x|no|no|no|no|no|no|no|no|no|yes|no|no|no|no|no|no|no|no| 3413 3413 + |3.0.x|no|no|no|no|no|no|no|no|yes|no|no|no|no|no|no|no|no|no| 3414 3414 3415 3415 ## Animating Styles and Props 3416 3416 ··· 3579 3579 3580 3580 ### Platform Compatibility 3581 3581 3582 3582 - | Android | iOS | Web | 3583 3583 - | ------- | --- | --- | 3584 3584 - | ✅ | ✅ | ✅ | 3582 3582 + |Android|iOS|Web| 3583 3583 + |-|-|-| 3584 3584 + |✅|✅|✅| 3585 3585 3586 3586 ## Contributing Guide for Reanimated 3587 3587 ··· 3982 3982 3983 3983 #### Platform Compatibility 3984 3984 3985 3985 - | Android | iOS | Web | 3986 3986 - | ------- | --- | --- | 3987 3987 - | ✅ | ✅ | ✅ | 3985 3985 + |Android|iOS|Web| 3986 3986 + |-|-|-| 3987 3987 + |✅|✅|✅| 3988 3988 3989 3989 This table indicates that all predefined transitions are compatible across Android, iOS, and web platforms. 3990 3990 ··· 4018 4018 4019 4019 ### Compatibility Summary 4020 4020 4021 4021 - | Tool | Platform | JSC | Hermes | V8 | 4022 4022 - | ------------------------- | -------- | ------ | ------ | ------ | 4023 4023 - | Chrome Debugger | Android | ⚛️ ✅¹ | ⚛️ ✅¹ | ⚛️ ✅¹ | 4024 4024 - | | iOS | ⚛️ ✅¹ | ⚛️ ✅¹ | N/A | 4025 4025 - | Chrome DevTools | Android | N/A | ⚛️ ✅² | ⚛️ | 4026 4026 - | | iOS | N/A | ⚛️ ✅² | N/A | 4027 4027 - | Flipper (Hermes debugger) | Android | N/A | ⚛️ ✅² | ⚛️ | 4028 4028 - | | iOS | N/A | ⚛️ ✅² | N/A | 4029 4029 - | Safari DevTools | Android | N/A | N/A | N/A | 4030 4030 - | | iOS | ⚛️ ✅ | N/A | N/A | 4031 4031 - | React Developer Tools | Android | ⚛️ | ⚛️ | ⚛️ | 4032 4032 - | | iOS | ⚛️ | ⚛️ | N/A | 4021 4021 + |Tool|Platform|JSC|Hermes|V8| 4022 4022 + |-|-|-|-|-| 4023 4023 + |Chrome Debugger|Android|⚛️ ✅¹|⚛️ ✅¹|⚛️ ✅¹| 4024 4024 + ||iOS|⚛️ ✅¹|⚛️ ✅¹|N/A| 4025 4025 + |Chrome DevTools|Android|N/A|⚛️ ✅²|⚛️| 4026 4026 + ||iOS|N/A|⚛️ ✅²|N/A| 4027 4027 + |Flipper (Hermes debugger)|Android|N/A|⚛️ ✅²|⚛️| 4028 4028 + ||iOS|N/A|⚛️ ✅²|N/A| 4029 4029 + |Safari DevTools|Android|N/A|N/A|N/A| 4030 4030 + ||iOS|⚛️ ✅|N/A|N/A| 4031 4031 + |React Developer Tools|Android|⚛️|⚛️|⚛️| 4032 4032 + ||iOS|⚛️|⚛️|N/A| 4033 4033 4034 4034 ¹ - Functions use web implementations, running worklets on the JS thread. Measure and Layout Animations are unavailable. ² - Experimental feature. 4035 4035 ··· 4045 4045 4046 4046 #### Chrome Debugger 4047 4047 4048 4048 - | Platform | JSC | Hermes | V8 | 4049 4049 - | -------- | ----- | ------ | ----- | 4050 4050 - | Android | ⚛️ ✅ | ⚛️ ✅ | ⚛️ ✅ | 4051 4051 - | iOS | ⚛️ ✅ | ⚛️ ✅ | N/A | 4048 4048 + |Platform|JSC|Hermes|V8| 4049 4049 + |-|-|-|-| 4050 4050 + |Android|⚛️ ✅|⚛️ ✅|⚛️ ✅| 4051 4051 + |iOS|⚛️ ✅|⚛️ ✅|N/A| 4052 4052 4053 4053 **Summary:** Functions use web implementations, running on the JS thread. Measure and Layout Animations are unavailable. 4054 4054 4055 4055 #### Chrome DevTools 4056 4056 4057 4057 - | Platform | JSC | Hermes | V8 | 4058 4058 - | -------- | --- | ------ | --- | 4059 4059 - | Android | N/A | ⚛️ ✅² | ⚛️ | 4060 4060 - | iOS | N/A | ⚛️ ✅² | N/A | 4057 4057 + |Platform|JSC|Hermes|V8| 4058 4058 + |-|-|-|-| 4059 4059 + |Android|N/A|⚛️ ✅²|⚛️| 4060 4060 + |iOS|N/A|⚛️ ✅²|N/A| 4061 4061 4062 4062 **Summary:** Both contexts can be debugged. This is an experimental feature. 4063 4063 4064 4064 #### Flipper (Hermes Debugger) 4065 4065 4066 4066 - | Platform | JSC | Hermes | V8 | 4067 4067 - | -------- | --- | ------ | --- | 4068 4068 - | Android | N/A | ⚛️ ✅² | ⚛️ | 4069 4069 - | iOS | N/A | ⚛️ ✅² | N/A | 4066 4066 + |Platform|JSC|Hermes|V8| 4067 4067 + |-|-|-|-| 4068 4068 + |Android|N/A|⚛️ ✅²|⚛️| 4069 4069 + |iOS|N/A|⚛️ ✅²|N/A| 4070 4070 4071 4071 **Summary:** Both contexts can be debugged. This is an experimental feature. 4072 4072 4073 4073 #### Safari DevTools 4074 4074 4075 4075 - | Platform | JSC | Hermes | V8 | 4076 4076 - | -------- | ----- | ------ | --- | 4077 4077 - | Android | N/A | N/A | N/A | 4078 4078 - | iOS | ⚛️ ✅ | N/A | N/A | 4075 4075 + |Platform|JSC|Hermes|V8| 4076 4076 + |-|-|-|-| 4077 4077 + |Android|N/A|N/A|N/A| 4078 4078 + |iOS|⚛️ ✅|N/A|N/A| 4079 4079 4080 4080 **Summary:** Available only on iOS devices with the JSC engine. Worklet debugging is supported. 4081 4081 4082 4082 #### React Developer Tools 4083 4083 4084 4084 - | Platform | JSC | Hermes | V8 | 4085 4085 - | -------- | --- | ------ | --- | 4086 4086 - | Android | ⚛️ | ⚛️ | ⚛️ | 4087 4087 - | iOS | ⚛️ | ⚛️ | N/A | 4084 4084 + |Platform|JSC|Hermes|V8| 4085 4085 + |-|-|-|-| 4086 4086 + |Android|⚛️|⚛️|⚛️| 4087 4087 + |iOS|⚛️|⚛️|N/A| 4088 4088 4089 4089 **Summary:** Functions as expected, with profiler and layout inspector available. 4090 4090 ··· 4094 4094 4095 4095 - **Known Issues:** Include reload failures, breakpoint issues on iOS, unresponsive consoles without animations, and more. These do not affect release builds or debug builds where the debugger is disconnected during a reload. 4096 4096 4097 4097 - _Efforts are ongoing to enhance debugging experiences with Chrome DevTools and Flipper on Hermes._ 4097 4097 + *Efforts are ongoing to enhance debugging experiences with Chrome DevTools and Flipper on Hermes.* 4098 4098 4099 4099 ## Incremental Migration from Reanimated 1 to Reanimated 2 4100 4100 ··· 4114 4114 4115 4115 ## Getting Started 4116 4116 4117 4117 - The _Fundamentals_ section aims to establish a solid understanding of the core concepts of Reanimated, empowering you to explore more complex scenarios independently. This section includes interactive examples, code snippets, and detailed explanations. 4117 4117 + The *Fundamentals* section aims to establish a solid understanding of the core concepts of Reanimated, empowering you to explore more complex scenarios independently. This section includes interactive examples, code snippets, and detailed explanations. 4118 4118 4119 4119 ### What is React Native Reanimated? 4120 4120 ··· 4577 4577 4578 4578 ### Platform Compatibility 4579 4579 4580 4580 - | Android | iOS | Web | 4581 4581 - | ------- | --- | --- | 4582 4582 - | ✅ | ✅ | ❌ | 4580 4580 + |Android|iOS|Web| 4581 4581 + |-|-|-| 4582 4582 + |✅|✅|❌| 4583 4583 4584 4584 ## useAnimatedProps 4585 4585 ··· 4682 4682 4683 4683 ### Platform Compatibility 4684 4684 4685 4685 - | Android | iOS | Web | 4686 4686 - | ------- | --- | --- | 4687 4687 - | ✅ | ✅ | ✅ | 4685 4685 + |Android|iOS|Web| 4686 4686 + |-|-|-| 4687 4687 + |✅|✅|✅| 4688 4688 4689 4689 ## React Native Reanimated: LayoutAnimationConfig (Version 3.x) 4690 4690 ··· 4748 4748 4749 4749 ### Platform Compatibility 4750 4750 4751 4751 - | Android | iOS | Web | 4752 4752 - | ------- | --- | --- | 4753 4753 - | ✅ | ✅ | ❌ | 4751 4751 + |Android|iOS|Web| 4752 4752 + |-|-|-| 4753 4753 + |✅|✅|❌| 4754 4754 4755 4755 - **Reference** 4756 4756 - Arguments ··· 5019 5019 5020 5020 ### Platform Compatibility 5021 5021 5022 5022 - | Android | iOS | Web | 5023 5023 - | ------- | --- | --- | 5024 5024 - | ✅ | ✅ | ✅ | 5022 5022 + |Android|iOS|Web| 5023 5023 + |-|-|-| 5024 5024 + |✅|✅|✅| 5025 5025 5026 5026 - **Example** 5027 5027 - **Remarks** ··· 5067 5067 5068 5068 The configuration for timing animations. Available properties: 5069 5069 5070 5070 - | Name | Type | Default | Description | 5071 5071 - | --- | --- | --- | --- | 5072 5072 - | duration | `number` | 300 | Length of the animation in milliseconds. | 5073 5073 - | easing | `Easing` | `Easing.inOut(Easing.quad)` | An easing function defining the animation curve. | 5074 5074 - | reduceMotion | `ReduceMotion` | `ReduceMotion.System` | Determines how the animation responds to reduced motion settings on devices. | 5070 5070 + |Name|Type|Default|Description| 5071 5071 + |-|-|-|-| 5072 5072 + |duration|`number`|300|Length of the animation in milliseconds.| 5073 5073 + |easing|`Easing`|`Easing.inOut(Easing.quad)`|An easing function defining the animation curve.| 5074 5074 + |reduceMotion|`ReduceMotion`|`ReduceMotion.System`|Determines how the animation responds to reduced motion settings on devices.| 5075 5075 5076 5076 ###### `Easing` 5077 5077 ··· 5126 5126 5127 5127 ### Platform Compatibility 5128 5128 5129 5129 - | Android | iOS | Web | 5130 5130 - | ------- | --- | --- | 5131 5131 - | ✅ | ✅ | ✅ | 5129 5129 + |Android|iOS|Web| 5130 5130 + |-|-|-| 5131 5131 + |✅|✅|✅| 5132 5132 5133 5133 ## Getting Started 5134 5134 5135 5135 - The _Fundamentals_ section aims to establish a solid understanding of the core concepts of Reanimated, empowering you to explore more complex scenarios independently. This section includes interactive examples, code snippets, and detailed explanations. 5135 5135 + The *Fundamentals* section aims to establish a solid understanding of the core concepts of Reanimated, empowering you to explore more complex scenarios independently. This section includes interactive examples, code snippets, and detailed explanations. 5136 5136 5137 5137 ### What is React Native Reanimated? 5138 5138 ··· 5340 5340 5341 5341 ### Platform Compatibility 5342 5342 5343 5343 - | Android | iOS | Web | 5344 5344 - | ------- | --- | --- | 5345 5345 - | ✅ | ✅ | ✅ | 5343 5343 + |Android|iOS|Web| 5344 5344 + |-|-|-| 5345 5345 + |✅|✅|✅| 5346 5346 5347 5347 ```markdown 5348 5348 # Overview ··· 5387 5387 5388 5388 Unlike `withTiming`, `withSpring` is physics-based and simulates real-world spring dynamics, making animations appear more realistic. 5389 5389 5390 5390 - When adjusting springs, focus on these three properties: `mass`, `stiffness` (also known as _tension_), and `damping` (also known as _friction_). 5390 5390 + When adjusting springs, focus on these three properties: `mass`, `stiffness` (also known as *tension*), and `damping` (also known as *friction*). 5391 5391 5392 5392 ```typescript 5393 5393 import { withSpring } from "react-native-reanimated" ··· 5467 5467 5468 5468 **Physics-based Spring Configuration:** 5469 5469 5470 5470 - | Name | Type | Default | Description | 5471 5471 - | --- | --- | --- | --- | 5472 5472 - | mass (optional) | `number` | 1 | The weight of the spring. Lower values make the animation faster. | 5473 5473 - | damping (optional) | `number` | 10 | Controls how quickly a spring slows down; higher values result in quicker rest. | 5470 5470 + |Name|Type|Default|Description| 5471 5471 + |-|-|-|-| 5472 5472 + |mass (optional)|`number`|1|The weight of the spring. Lower values make the animation faster.| 5473 5473 + |damping (optional)|`number`|10|Controls how quickly a spring slows down; higher values result in quicker rest.| 5474 5474 5475 5475 **Duration-based Spring Configuration:** 5476 5476 5477 5477 - | Name | Type | Default | Description | 5478 5478 - | --- | --- | --- | --- | 5479 5479 - | duration (optional) | `number` | 2000 | Length of the animation in milliseconds. Available in Reanimated ≥ 3.2.x. | 5480 5480 - | dampingRatio (optional) | `number` | 0.5 | Determines how damped the spring is; `1` means critically damped, and values >1 mean overdamped. Available in Reanimated ≥ 3.2.x. | 5477 5477 + |Name|Type|Default|Description| 5478 5478 + |-|-|-|-| 5479 5479 + |duration (optional)|`number`|2000|Length of the animation in milliseconds. Available in Reanimated ≥ 3.2.x.| 5480 5480 + |dampingRatio (optional)|`number`|0.5|Determines how damped the spring is; `1` means critically damped, and values >1 mean overdamped. Available in Reanimated ≥ 3.2.x.| 5481 5481 5482 5482 **Note**: The `mass` and `damping` properties cannot be used simultaneously with `duration` and `dampingRatio`. When both are provided, `duration` and `dampingRatio` take precedence. 5483 5483 5484 5484 **Common Spring Configuration:** 5485 5485 5486 5486 - | Name | Type | Default | Description | 5487 5487 - | --- | --- | --- | --- | 5488 5488 - | stiffness (optional) | `number` | 100 | Determines the bounciness of the spring. | 5489 5489 - | velocity (optional) | `number` | 0 | Initial velocity applied to the spring equation. | 5490 5490 - | overshootClamping (optional) | `boolean` | false | Prevents the spring from bouncing over the `toValue`. | 5491 5491 - | restDisplacementThreshold (optional) | `number` | 0.01 | Displacement below which the spring will settle at `toValue`. | 5492 5492 - | restSpeedThreshold (optional) | `number` | 2 | Speed threshold in pixels per second for settling at `toValue`. | 5493 5493 - | reduceMotion (optional) | `ReduceMotion` | `ReduceMotion.System` | Determines animation response to reduced motion settings. Available in Reanimated ≥ 3.5.x. | 5494 5494 - | clamp (optional) | `[number, number]` | `undefined` | Limits the movement scope; reduces bounciness if exceeded. Available in Reanimated ≥ 3.6.x. | 5486 5486 + |Name|Type|Default|Description| 5487 5487 + |-|-|-|-| 5488 5488 + |stiffness (optional)|`number`|100|Determines the bounciness of the spring.| 5489 5489 + |velocity (optional)|`number`|0|Initial velocity applied to the spring equation.| 5490 5490 + |overshootClamping (optional)|`boolean`|false|Prevents the spring from bouncing over the `toValue`.| 5491 5491 + |restDisplacementThreshold (optional)|`number`|0.01|Displacement below which the spring will settle at `toValue`.| 5492 5492 + |restSpeedThreshold (optional)|`number`|2|Speed threshold in pixels per second for settling at `toValue`.| 5493 5493 + |reduceMotion (optional)|`ReduceMotion`|`ReduceMotion.System`|Determines animation response to reduced motion settings. Available in Reanimated ≥ 3.5.x.| 5494 5494 + |clamp (optional)|`[number, number]`|`undefined`|Limits the movement scope; reduces bounciness if exceeded. Available in Reanimated ≥ 3.6.x.| 5495 5495 5496 5496 ##### `callback` (Optional) 5497 5497 ··· 5509 5509 5510 5510 ### Platform Compatibility 5511 5511 5512 5512 - | Android | iOS | Web | 5513 5513 - | ------- | --- | --- | 5514 5514 - | ✅ | ✅ | ✅ | 5512 5512 + |Android|iOS|Web| 5513 5513 + |-|-|-| 5514 5514 + |✅|✅|✅| 5515 5515 5516 5516 ## useAnimatedRef 5517 5517 ··· 5588 5588 5589 5589 ### Platform Compatibility 5590 5590 5591 5591 - | Android | iOS | Web | 5592 5592 - | ------- | --- | --- | 5593 5593 - | ✅ | ✅ | ✅ | 5591 5591 + |Android|iOS|Web| 5592 5592 + |-|-|-| 5593 5593 + |✅|✅|✅| 5594 5594 5595 5595 ## createWorkletRuntime 5596 5596 ··· 5790 5790 5791 5791 ### Platform Compatibility 5792 5792 5793 5793 - | Android | iOS | Web | 5794 5794 - | ------- | --- | --- | 5795 5795 - | ✅ | ✅ | ✅ | 5793 5793 + |Android|iOS|Web| 5794 5794 + |-|-|-| 5795 5795 + |✅|✅|✅| 5796 5796 5797 5797 ## Run On JS 5798 5798 ··· 5845 5845 5846 5846 ### Platform Compatibility 5847 5847 5848 5848 - | Android | iOS | Web | 5849 5849 - | ------- | --- | --- | 5850 5850 - | ✅ | ✅ | ✅ | 5848 5848 + |Android|iOS|Web| 5849 5849 + |-|-|-| 5850 5850 + |✅|✅|✅| 5851 5851 5852 5852 ## runOnUI 5853 5853 ··· 5894 5894 5895 5895 ### Platform Compatibility 5896 5896 5897 5897 - | Android | iOS | Web | 5898 5898 - | ------- | --- | --- | 5899 5899 - | ✅ | ✅ | ✅ | 5897 5897 + |Android|iOS|Web| 5898 5898 + |-|-|-| 5899 5899 + |✅|✅|✅| 5900 5900 5901 5901 ## Your First Animation 5902 5902 ··· 6058 6058 6059 6059 Configuration for the decay animation. The following properties are available: 6060 6060 6061 6061 - | Name | Type | Default | Description | 6062 6062 - | --- | --- | --- | --- | 6063 6063 - | `velocity` (optional) | `number` | 0 | Initial velocity of the animation. | 6064 6064 - | `deceleration` (optional) | `number` | 0.998 | Rate at which the velocity decreases over time. | 6065 6065 - | `clamp` (optional)\* | `[number, number]` | \[] | Array specifying bounds to restrict the animation's range. The animation stops when either bound is reached unless `rubberBandEffect` is set to `true`. \*Required if `rubberBandEffect` is enabled. | 6066 6066 - | `velocityFactor` (optional) | `number` | 1 | Multiplier for velocity. | 6067 6067 - | `rubberBandEffect` (optional) | `boolean` | false | Enables bouncing over the limit specified in `clamp`. | 6068 6068 - | `rubberBandFactor` (optional) | `number` | 0.6 | Determines the strength of the rubber band effect. | 6069 6069 - | `reduceMotion` (optional) | `ReduceMotion` | `ReduceMotion.System` | Controls how the animation responds to the device's reduced motion accessibility setting. | 6061 6061 + |Name|Type|Default|Description| 6062 6062 + |-|-|-|-| 6063 6063 + |`velocity` (optional)|`number`|0|Initial velocity of the animation.| 6064 6064 + |`deceleration` (optional)|`number`|0.998|Rate at which the velocity decreases over time.| 6065 6065 + |`clamp` (optional)\*|`[number, number]`|\[]|Array specifying bounds to restrict the animation's range. The animation stops when either bound is reached unless `rubberBandEffect` is set to `true`. \*Required if `rubberBandEffect` is enabled.| 6066 6066 + |`velocityFactor` (optional)|`number`|1|Multiplier for velocity.| 6067 6067 + |`rubberBandEffect` (optional)|`boolean`|false|Enables bouncing over the limit specified in `clamp`.| 6068 6068 + |`rubberBandFactor` (optional)|`number`|0.6|Determines the strength of the rubber band effect.| 6069 6069 + |`reduceMotion` (optional)|`ReduceMotion`|`ReduceMotion.System`|Controls how the animation responds to the device's reduced motion accessibility setting.| 6070 6070 6071 6071 ##### `callback` (Optional) 6072 6072 ··· 6078 6078 6079 6079 ### Example 6080 6080 6081 6081 - _Note: An example section is mentioned but not provided in the original content._ 6081 6081 + *Note: An example section is mentioned but not provided in the original content.* 6082 6082 6083 6083 ### Remarks 6084 6084 ··· 6086 6086 6087 6087 ### Platform Compatibility 6088 6088 6089 6089 - | Android | iOS | Web | 6090 6090 - | ------- | --- | --- | 6091 6091 - | ✅ | ✅ | ✅ | 6089 6089 + |Android|iOS|Web| 6090 6090 + |-|-|-| 6091 6091 + |✅|✅|✅| 6092 6092 6093 6093 ## createAnimatedComponent 6094 6094 ··· 6127 6127 6128 6128 ### Platform Compatibility 6129 6129 6130 6130 - | Android | iOS | Web | 6131 6131 - | ------- | --- | --- | 6132 6132 - | ✅ | ✅ | ✅ | 6130 6130 + |Android|iOS|Web| 6131 6131 + |-|-|-| 6132 6132 + |✅|✅|✅| 6133 6133 6134 6134 ## runOnRuntime 6135 6135 ··· 6180 6180 6181 6181 ### Platform Compatibility 6182 6182 6183 6183 - | Android | iOS | Web | 6184 6184 - | ------- | --- | --- | 6185 6185 - | ✅ | ✅ | ❌ | 6183 6183 + |Android|iOS|Web| 6184 6184 + |-|-|-| 6185 6185 + |✅|✅|❌| 6186 6186 6187 6187 ## Canceling Animations with `cancelAnimation` 6188 6188 ··· 6220 6220 6221 6221 ### Platform Compatibility 6222 6222 6223 6223 - | Android | iOS | Web | 6224 6224 - | ------- | --- | --- | 6225 6225 - | ✅ | ✅ | ✅ | 6223 6223 + |Android|iOS|Web| 6224 6224 + |-|-|-| 6225 6225 + |✅|✅|✅| 6226 6226 6227 6227 This function is compatible across Android, iOS, and web platforms. 6228 6228 ··· 6276 6276 6277 6277 ### Platform Compatibility 6278 6278 6279 6279 - | Android | iOS | Web | 6280 6280 - | ------- | --- | --- | 6281 6281 - | ✅ | ✅ | ❌ | 6279 6279 + |Android|iOS|Web| 6280 6280 + |-|-|-| 6281 6281 + |✅|✅|❌| 6282 6282 6283 6283 ```markdown 6284 6284 # `useAnimatedGestureHandler` ··· 6547 6547 6548 6548 ### Platform Compatibility 6549 6549 6550 6550 - | Android | iOS | Web | 6551 6551 - | ------- | --- | --- | 6552 6552 - | ✅ | ✅ | ✅ | 6550 6550 + |Android|iOS|Web| 6551 6551 + |-|-|-| 6552 6552 + |✅|✅|✅| 6553 6553 6554 6554 ## Clamp Function in React Native Reanimated 6555 6555 ··· 6589 6589 6590 6590 ### Platform Compatibility 6591 6591 6592 6592 - | Android | iOS | Web | 6593 6593 - | ------- | --- | --- | 6594 6594 - | ✅ | ✅ | ✅ | 6592 6592 + |Android|iOS|Web| 6593 6593 + |-|-|-| 6594 6594 + |✅|✅|✅| 6595 6595 6596 6596 This function is compatible across Android, iOS, and Web platforms. 6597 6597 ··· 6631 6631 6632 6632 - **`output`**: An array of color strings (e.g., `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`) that define the output colors. It must have at least as many points as the input range. 6633 6633 6634 6634 - - **`colorSpace`** _(Optional)_: Specifies the color space for interpolation, either `'HSV'` or `'RGB'`. Defaults to `'RGB'`. 6634 6634 + - **`colorSpace`** *(Optional)*: Specifies the color space for interpolation, either `'HSV'` or `'RGB'`. Defaults to `'RGB'`. 6635 6635 6636 6636 - - **`options`** _(Optional)_: Additional parameters for color interpolation: 6636 6636 + - **`options`** *(Optional)*: Additional parameters for color interpolation: 6637 6637 6638 6638 - | Options | Type | Default | Description | 6639 6639 - | --- | --- | --- | --- | 6640 6640 - | `gamma` | `number` | 2.2 | Gamma parameter used in gamma correction. | 6641 6641 - | `useCorrectedHSVInterpolation` | `boolean` | true | Reduces the number of hues during interpolation by treating HSV as circular. | 6638 6638 + |Options|Type|Default|Description| 6639 6639 + |-|-|-|-| 6640 6640 + |`gamma`|`number`|2.2|Gamma parameter used in gamma correction.| 6641 6641 + |`useCorrectedHSVInterpolation`|`boolean`|true|Reduces the number of hues during interpolation by treating HSV as circular.| 6642 6642 6643 6643 #### Options Explanation 6644 6644 ··· 6656 6656 6657 6657 ### Platform Compatibility 6658 6658 6659 6659 - | Android | iOS | Web | 6660 6660 - | ------- | --- | --- | 6661 6661 - | ✅ | ✅ | ✅ | 6659 6659 + |Android|iOS|Web| 6660 6660 + |-|-|-| 6661 6661 + |✅|✅|✅| 6662 6662 6663 6663 This function is versatile and compatible across major platforms, making it ideal for cross-platform applications.

+737 -737

out/llms-full-react-native.txt

reviewed

··· 40 40 41 41 Menu paths are presented in bold and utilize carets for navigating submenus. Example: **Android Studio > Preferences** 42 42 43 43 - --- 43 43 + *** 44 44 45 45 With an understanding of how to navigate these guides, it's time to explore the foundation of React Native: Native Components. 46 46 ··· 169 169 170 170 Certain URL schemes are universally recognized across platforms: 171 171 172 172 - | Scheme | Description | iOS | Android | 173 173 - | --- | --- | --- | --- | 174 174 - | `mailto` | Opens mail app, e.g., `mailto:support@expo.io` | ✅ | ✅ | 175 175 - | `tel` | Opens phone app, e.g., `tel:+123456789` | ✅ | ✅ | 176 176 - | `sms` | Opens SMS app, e.g., `sms:+123456789` | ✅ | ✅ | 177 177 - | `https` / `http` | Opens web browser app, e.g., `https://expo.io` | ✅ | ✅ | 172 172 + |Scheme|Description|iOS|Android| 173 173 + |-|-|-|-| 174 174 + |`mailto`|Opens mail app, e.g., `mailto:support@expo.io`|✅|✅| 175 175 + |`tel`|Opens phone app, e.g., `tel:+123456789`|✅|✅| 176 176 + |`sms`|Opens SMS app, e.g., `sms:+123456789`|✅|✅| 177 177 + |`https` / `http`|Opens web browser app, e.g., `https://expo.io`|✅|✅| 178 178 179 179 ### Enabling Deep Links 180 180 ··· 941 941 942 942 ### Props 943 943 944 944 - | Prop Name | Description | Type | Required | 945 945 - | --- | --- | --- | --- | 946 946 - | **`onPress`** | Handler called when the user taps the button. | `({nativeEvent: PressEvent})` | Yes | 947 947 - | **`title`** | Text displayed inside the button. On Android, this title is converted to uppercase. | string | Yes | 948 948 - | `accessibilityLabel` | Text for blindness accessibility features. | string | No | 949 949 - | `accessibilityLanguage` | Language used by screen readers on iOS, following BCP 47 specification. | string | No | 950 950 - | `accessibilityActions` | List of actions for assistive technologies to invoke programmatically. | array | No | 951 951 - | `onAccessibilityAction` | Invoked when an accessibility action is performed by the user. | function | No | 952 952 - | `color` | Text color on iOS, background color on Android. | color | No | 953 953 - | | Default: | | | 954 954 - | | - Android: `'#2196F3'` | | | 955 955 - | | - iOS: `'#007AFF'` | | | 956 956 - | `disabled` | Disables all interactions if set to true. | bool | No | 957 957 - | | Default: | | | 958 958 - | | - false | | | 959 959 - | `hasTVPreferredFocus` | Indicates TV preferred focus. | bool | No | 960 960 - | | Default: | | | 961 961 - | | - false | | | 962 962 - | `nextFocusDown` | Next view to receive focus when navigating down on Android TV. | number | No | 963 963 - | `nextFocusForward` | Next view to receive focus when navigating forward on Android TV. | number | No | 964 964 - | `nextFocusLeft` | Next view to receive focus when navigating left on Android TV. | number | No | 965 965 - | `nextFocusRight` | Next view to receive focus when navigating right on Android TV. | number | No | 966 966 - | `nextFocusUp` | Next view to receive focus when navigating up on Android TV. | number | No | 967 967 - | `testID` | Identifier for locating this view in end-to-end tests. | string | No | 968 968 - | `touchSoundDisabled` | Disables system sound on touch if set to true (Android only). | boolean | No | 969 969 - | | Default: | | | 970 970 - | | - false | | | 944 944 + |Prop Name|Description|Type|Required| 945 945 + |-|-|-|-| 946 946 + |**`onPress`**|Handler called when the user taps the button.|`({nativeEvent: PressEvent})`|Yes| 947 947 + |**`title`**|Text displayed inside the button. On Android, this title is converted to uppercase.|string|Yes| 948 948 + |`accessibilityLabel`|Text for blindness accessibility features.|string|No| 949 949 + |`accessibilityLanguage`|Language used by screen readers on iOS, following BCP 47 specification.|string|No| 950 950 + |`accessibilityActions`|List of actions for assistive technologies to invoke programmatically.|array|No| 951 951 + |`onAccessibilityAction`|Invoked when an accessibility action is performed by the user.|function|No| 952 952 + |`color`|Text color on iOS, background color on Android.|color|No| 953 953 + ||Default:||| 954 954 + ||- Android: `'#2196F3'`||| 955 955 + ||- iOS: `'#007AFF'`||| 956 956 + |`disabled`|Disables all interactions if set to true.|bool|No| 957 957 + ||Default:||| 958 958 + ||- false||| 959 959 + |`hasTVPreferredFocus`|Indicates TV preferred focus.|bool|No| 960 960 + ||Default:||| 961 961 + ||- false||| 962 962 + |`nextFocusDown`|Next view to receive focus when navigating down on Android TV.|number|No| 963 963 + |`nextFocusForward`|Next view to receive focus when navigating forward on Android TV.|number|No| 964 964 + |`nextFocusLeft`|Next view to receive focus when navigating left on Android TV.|number|No| 965 965 + |`nextFocusRight`|Next view to receive focus when navigating right on Android TV.|number|No| 966 966 + |`nextFocusUp`|Next view to receive focus when navigating up on Android TV.|number|No| 967 967 + |`testID`|Identifier for locating this view in end-to-end tests.|string|No| 968 968 + |`touchSoundDisabled`|Disables system sound on touch if set to true (Android only).|boolean|No| 969 969 + ||Default:||| 970 970 + ||- false||| 971 971 972 972 This table summarizes the properties available for the Button component, detailing their purpose and default values where applicable. 973 973 ··· 1153 1153 1154 1154 **Parameters:** 1155 1155 1156 1156 - | Name | Type | Description | 1157 1157 - | -------------- | ------ | ----------- | 1158 1158 - | configRequired | object | Refer below | 1156 1156 + |Name|Type|Description| 1157 1157 + |-|-|-| 1158 1158 + |configRequired|object|Refer below| 1159 1159 1160 1160 The `config` object provides enhanced versions of all responder callbacks, including the `PanResponder` gesture state. Replace `onResponder*` with `onPanResponder*`. For example: 1161 1161 ··· 1234 1234 1235 1235 - Click "Apply" to install. 1236 1236 1237 1237 - #### 3. Configure the ANDROID_HOME Environment Variable 1237 1237 + #### 3. Configure the ANDROID\_HOME Environment Variable 1238 1238 1239 1239 Set up necessary environment variables for React Native tools: 1240 1240 ··· 1336 1336 1337 1337 ### Example Usage 1338 1338 1339 1339 - _Example section would typically include a demonstration of how to implement the `<ImageBackground>` component._ 1339 1339 + *Example section would typically include a demonstration of how to implement the `<ImageBackground>` component.* 1340 1340 1341 1341 ### Reference 1342 1342 1343 1343 - _Reference section would provide additional resources or links for further information about the `<ImageBackground>` component._ 1343 1343 + *Reference section would provide additional resources or links for further information about the `<ImageBackground>` component.* 1344 1344 1345 1345 ### Props 1346 1346 ··· 1369 1369 1370 1370 ### Example 1371 1371 1372 1372 - --- 1372 1372 + *** 1373 1373 1374 1374 ### Reference 1375 1375 ··· 1379 1379 1380 1380 Inherits properties from the View component. 1381 1381 1382 1382 - --- 1382 1382 + *** 1383 1383 1384 1384 #### `behavior` 1385 1385 1386 1386 Defines how the view should respond to the presence of the keyboard. Note that Android and iOS handle this prop differently, but setting `behavior` is recommended for both platforms. 1387 1387 1388 1388 - | Type | 1389 1389 - | ------------------------------------------- | 1390 1390 - | enum(`'height'`, `'position'`, `'padding'`) | 1388 1388 + |Type| 1389 1389 + |-| 1390 1390 + |enum(`'height'`, `'position'`, `'padding'`)| 1391 1391 1392 1392 - --- 1392 1392 + *** 1393 1393 1394 1394 #### `contentContainerStyle` 1395 1395 1396 1396 Specifies the style applied to the content container (View) when the behavior is set to `'position'`. 1397 1397 1398 1398 - | Type | 1399 1399 - | ---------- | 1400 1400 - | View Style | 1398 1398 + |Type| 1399 1399 + |-| 1400 1400 + |View Style| 1401 1401 1402 1402 - --- 1402 1402 + *** 1403 1403 1404 1404 #### `enabled` 1405 1405 1406 1406 Determines whether the `KeyboardAvoidingView` is active or inactive. 1407 1407 1408 1408 - | Type | Default | 1409 1409 - | ------- | ------- | 1410 1410 - | boolean | `true` | 1408 1408 + |Type|Default| 1409 1409 + |-|-| 1410 1410 + |boolean|`true`| 1411 1411 1412 1412 - --- 1412 1412 + *** 1413 1413 1414 1414 #### `keyboardVerticalOffset` 1415 1415 1416 1416 Represents the distance between the top of the user's screen and the React Native view. This value may be non-zero in certain scenarios. 1417 1417 1418 1418 - | Type | Default | 1419 1419 - | ------ | ------- | 1420 1420 - | number | `0` | 1418 1418 + |Type|Default| 1419 1419 + |-|-| 1420 1420 + |number|`0`| 1421 1421 1422 1422 ## Modal Component 1423 1423 ··· 1425 1425 1426 1426 ### Example 1427 1427 1428 1428 - --- 1428 1428 + *** 1429 1429 1430 1430 ### Reference 1431 1431 ··· 1435 1435 1436 1436 Inherits properties from the View component. 1437 1437 1438 1438 - --- 1438 1438 + *** 1439 1439 1440 1440 #### `animationType` 1441 1441 ··· 1447 1447 - `fade`: Fades into view. 1448 1448 - `none`: Appears without any animation. 1449 1449 1450 1450 - | Type | Default | 1451 1451 - | ----------------------------------- | ------- | 1452 1452 - | enum(`'none'`, `'slide'`, `'fade'`) | `none` | 1450 1450 + |Type|Default| 1451 1451 + |-|-| 1452 1452 + |enum(`'none'`, `'slide'`, `'fade'`)|`none`| 1453 1453 1454 1454 - --- 1454 1454 + *** 1455 1455 1456 1456 #### `backdropColor` 1457 1457 1458 1458 Sets the background color of the modal's container. Defaults to `white` unless `transparent` is set to `true`. 1459 1459 1460 1460 - | Type | Default | 1461 1461 - | ----- | ------- | 1462 1462 - | color | white | 1460 1460 + |Type|Default| 1461 1461 + |-|-| 1462 1462 + |color|white| 1463 1463 1464 1464 - --- 1464 1464 + *** 1465 1465 1466 1466 #### `hardwareAccelerated` (Android) 1467 1467 1468 1468 Determines if hardware acceleration should be forced for the underlying window. 1469 1469 1470 1470 - | Type | Default | 1471 1471 - | ---- | ------- | 1472 1472 - | bool | `false` | 1470 1470 + |Type|Default| 1471 1471 + |-|-| 1472 1472 + |bool|`false`| 1473 1473 1474 1474 - --- 1474 1474 + *** 1475 1475 1476 1476 #### `navigationBarTranslucent` (Android) 1477 1477 1478 1478 Decides whether the modal appears under the system navigation bar. Requires `statusBarTranslucent` to also be `true`. 1479 1479 1480 1480 - | Type | Default | 1481 1481 - | ---- | ------- | 1482 1482 - | bool | `false` | 1480 1480 + |Type|Default| 1481 1481 + |-|-| 1482 1482 + |bool|`false`| 1483 1483 1484 1484 - --- 1484 1484 + *** 1485 1485 1486 1486 #### `onDismiss` (iOS) 1487 1487 1488 1488 Allows a function to be called when the modal is dismissed. 1489 1489 1490 1490 - | Type | 1491 1491 - | -------- | 1492 1492 - | function | 1490 1490 + |Type| 1491 1491 + |-| 1492 1492 + |function| 1493 1493 1494 1494 - --- 1494 1494 + *** 1495 1495 1496 1496 #### `onOrientationChange` (iOS) 1497 1497 1498 1498 Triggered when the orientation changes while the modal is displayed. The callback provides 'portrait' or 'landscape'. It also fires on initial render, regardless of current orientation. 1499 1499 1500 1500 - | Type | 1501 1501 - | -------- | 1502 1502 - | function | 1500 1500 + |Type| 1501 1501 + |-| 1502 1502 + |function| 1503 1503 1504 1504 - --- 1504 1504 + *** 1505 1505 1506 1506 #### `onRequestClose` 1507 1507 1508 1508 Invoked when the user presses the hardware back button on Android or the menu button on Apple TV. Note that `BackHandler` events are suppressed while the modal is open. On iOS, it's called during a drag gesture dismissal with `presentationStyle` set to `pageSheet` or `formSheet`. 1509 1509 1510 1510 - | Type | 1511 1511 - | ------------------------------------------ | 1512 1512 - | functionRequiredAndroidTV\*\*\*functioniOS | 1510 1510 + |Type| 1511 1511 + |-| 1512 1512 + |functionRequiredAndroidTV\*\*\*functioniOS| 1513 1513 1514 1514 - --- 1514 1514 + *** 1515 1515 1516 1516 #### `onShow` 1517 1517 1518 1518 Allows a function to be executed once the modal is displayed. 1519 1519 1520 1520 - | Type | 1521 1521 - | -------- | 1522 1522 - | function | 1520 1520 + |Type| 1521 1521 + |-| 1522 1522 + |function| 1523 1523 1524 1524 - --- 1524 1524 + *** 1525 1525 1526 1526 #### `presentationStyle` (iOS) 1527 1527 ··· 1534 1534 - `formSheet`: Centers a narrow-width view (on larger devices). 1535 1535 - `overFullScreen`: Covers the screen completely but allows transparency. 1536 1536 1537 1537 - | Type | Default | 1538 1538 - | --- | --- | 1539 1539 - | enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`\*\*\*`overFullScreen` if `transparent={true}` | 1537 1537 + |Type|Default| 1538 1538 + |-|-| 1539 1539 + |enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`)|`fullScreen` if `transparent={false}`\*\*\*`overFullScreen` if `transparent={true}`| 1540 1540 1541 1541 - --- 1541 1541 + *** 1542 1542 1543 1543 #### `statusBarTranslucent` (Android) 1544 1544 1545 1545 Determines whether the modal appears under the system status bar. 1546 1546 1547 1547 - | Type | Default | 1548 1548 - | ---- | ------- | 1549 1549 - | bool | `false` | 1547 1547 + |Type|Default| 1548 1548 + |-|-| 1549 1549 + |bool|`false`| 1550 1550 1551 1551 - --- 1551 1551 + *** 1552 1552 1553 1553 #### `supportedOrientations` (iOS) 1554 1554 ··· 1556 1556 1557 1557 > Ignored when using `presentationStyle` of `pageSheet` or `formSheet`. 1558 1558 1559 1559 - | Type | Default | 1560 1560 - | --- | --- | 1561 1561 - | array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` | 1559 1559 + |Type|Default| 1560 1560 + |-|-| 1561 1561 + |array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`)|`['portrait']`| 1562 1562 1563 1563 - --- 1563 1563 + *** 1564 1564 1565 1565 #### `transparent` 1566 1566 1567 1567 Determines if the modal will cover the entire view with a transparent background. 1568 1568 1569 1569 - | Type | Default | 1570 1570 - | ---- | ------- | 1571 1571 - | bool | `false` | 1569 1569 + |Type|Default| 1570 1570 + |-|-| 1571 1571 + |bool|`false`| 1572 1572 1573 1573 - --- 1573 1573 + *** 1574 1574 1575 1575 #### `visible` 1576 1576 1577 1577 Controls whether the modal is visible or not. 1578 1578 1579 1579 - | Type | Default | 1580 1580 - | ---- | ------- | 1581 1581 - | bool | `true` | 1579 1579 + |Type|Default| 1580 1580 + |-|-| 1581 1581 + |bool|`true`| 1582 1582 1583 1583 To integrate React Native into an existing iOS application, follow these steps carefully. This guide assumes you have a basic understanding of both iOS development using Xcode and JavaScript/React Native. 1584 1584 ··· 1853 1853 1854 1854 Configuration object for the `android_ripple` property. 1855 1855 1856 1856 - | Name | Type | Required | Description | 1857 1857 - | --- | --- | --- | --- | 1858 1858 - | color | color | No | Defines the color of the ripple effect. | 1859 1859 - | borderless | boolean | No | Determines if the ripple effect should exclude borders. | 1860 1860 - | radius | number | No | Sets the radius of the ripple effect. | 1861 1861 - | foreground | boolean | No | If true, adds the ripple effect to the view's foreground instead of the background. Useful when child views have their own backgrounds or images are displayed, preventing the ripple from being obscured. | 1856 1856 + |Name|Type|Required|Description| 1857 1857 + |-|-|-|-| 1858 1858 + |color|color|No|Defines the color of the ripple effect.| 1859 1859 + |borderless|boolean|No|Determines if the ripple effect should exclude borders.| 1860 1860 + |radius|number|No|Sets the radius of the ripple effect.| 1861 1861 + |foreground|boolean|No|If true, adds the ripple effect to the view's foreground instead of the background. Useful when child views have their own backgrounds or images are displayed, preventing the ripple from being obscured.| 1862 1862 1863 1863 ## RefreshControl Component 1864 1864 ··· 2105 2105 2106 2106 Support for TV devices, specifically Apple TV and Android TV, was integrated into React Native applications with the goal of enabling these apps to function on such platforms with minimal modifications required in their JavaScript code. 2107 2107 2108 2108 - > **Deprecated Notice:** The support for TV devices has been transitioned to a separate repository named "React Native for TV." For detailed guidance on projects targeting Apple TV or Android TV, please refer to the _README_ file within that repository. 2108 2108 + > **Deprecated Notice:** The support for TV devices has been transitioned to a separate repository named "React Native for TV." For detailed guidance on projects targeting Apple TV or Android TV, please refer to the *README* file within that repository. 2109 2109 2110 2110 The provided documentation outlines various properties and methods associated with a ScrollView component, likely from a mobile development framework such as React Native. Below is a summary of the key features: 2111 2111 ··· 2237 2237 2238 2238 ### Props 2239 2239 2240 2240 - | Prop Name | Type | Required | Default | Description | 2241 2241 - | --- | --- | --- | --- | --- | 2242 2242 - | `animated` | boolean | No | `false` | Determines if transitions between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle`, and `hidden`. | 2243 2243 - | `backgroundColor` (Android) | color | No | Default system StatusBar background color or `'black'` if not defined | The background color of the status bar. **Warning:** Deprecated in API level 35 due to edge-to-edge enforcement introduced in Android 15. | 2244 2244 - | `barStyle` | StatusBarStyle | No | `'default'` | Sets the color of the status bar text. On Android, this affects only API versions 23 and above. | 2245 2245 - | `hidden` | boolean | No | `false` | Determines if the status bar is hidden. | 2246 2246 - | `networkActivityIndicatorVisible` (iOS) | boolean | No | `false` | Controls visibility of the network activity indicator. | 2247 2247 - | `showHideTransition` (iOS) | StatusBarAnimation | No | `'fade'` | The transition effect when showing or hiding the status bar using the `hidden` prop. | 2248 2248 - | `translucent` (Android) | boolean | No | `false` | Determines if the status bar is translucent, allowing the app to draw under it. Useful with a semi-transparent status bar color. | 2240 2240 + |Prop Name|Type|Required|Default|Description| 2241 2241 + |-|-|-|-|-| 2242 2242 + |`animated`|boolean|No|`false`|Determines if transitions between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle`, and `hidden`.| 2243 2243 + |`backgroundColor` (Android)|color|No|Default system StatusBar background color or `'black'` if not defined|The background color of the status bar. **Warning:** Deprecated in API level 35 due to edge-to-edge enforcement introduced in Android 15.| 2244 2244 + |`barStyle`|StatusBarStyle|No|`'default'`|Sets the color of the status bar text. On Android, this affects only API versions 23 and above.| 2245 2245 + |`hidden`|boolean|No|`false`|Determines if the status bar is hidden.| 2246 2246 + |`networkActivityIndicatorVisible` (iOS)|boolean|No|`false`|Controls visibility of the network activity indicator.| 2247 2247 + |`showHideTransition` (iOS)|StatusBarAnimation|No|`'fade'`|The transition effect when showing or hiding the status bar using the `hidden` prop.| 2248 2248 + |`translucent` (Android)|boolean|No|`false`|Determines if the status bar is translucent, allowing the app to draw under it. Useful with a semi-transparent status bar color.| 2249 2249 2250 2250 ### Methods 2251 2251 ··· 2286 2286 2287 2287 **Parameters:** 2288 2288 2289 2289 - | Name | Type | Description | 2290 2290 - | --- | --- | --- | 2291 2291 - | **entry (Required)** | any | Entry returned from `pushStackEntry` to replace. | 2292 2292 - | **props (Required)** | any | Object containing the `StatusBar` props for the replacement stack entry. | 2289 2289 + |Name|Type|Description| 2290 2290 + |-|-|-| 2291 2291 + |**entry (Required)**|any|Entry returned from `pushStackEntry` to replace.| 2292 2292 + |**props (Required)**|any|Object containing the `StatusBar` props for the replacement stack entry.| 2293 2293 2294 2294 #### `setBackgroundColor()` (Android) 2295 2295 ··· 2303 2303 2304 2304 **Parameters:** 2305 2305 2306 2306 - | Name | Type | Description | 2307 2307 - | -------------------- | ------- | ------------------------- | 2308 2308 - | **color (Required)** | string | Background color. | 2309 2309 - | animated | boolean | Animate the style change. | 2306 2306 + |Name|Type|Description| 2307 2307 + |-|-|-| 2308 2308 + |**color (Required)**|string|Background color.| 2309 2309 + |animated|boolean|Animate the style change.| 2310 2310 2311 2311 #### `setBarStyle()` 2312 2312 ··· 2318 2318 2319 2319 **Parameters:** 2320 2320 2321 2321 - | Name | Type | Description | 2322 2322 - | -------------------- | -------------- | ------------------------- | 2323 2323 - | **style (Required)** | StatusBarStyle | Status bar style to set. | 2324 2324 - | animated | boolean | Animate the style change. | 2321 2321 + |Name|Type|Description| 2322 2322 + |-|-|-| 2323 2323 + |**style (Required)**|StatusBarStyle|Status bar style to set.| 2324 2324 + |animated|boolean|Animate the style change.| 2325 2325 2326 2326 #### `setHidden()` 2327 2327 ··· 2333 2333 2334 2334 **Parameters:** 2335 2335 2336 2336 - | Name | Type | Description | 2337 2337 - | --- | --- | --- | 2338 2338 - | **hidden (Required)** | boolean | Hide the status bar. | 2339 2339 - | animation (iOS) | StatusBarAnimation | Animation when changing the hidden property of the status bar. | 2336 2336 + |Name|Type|Description| 2337 2337 + |-|-|-| 2338 2338 + |**hidden (Required)**|boolean|Hide the status bar.| 2339 2339 + |animation (iOS)|StatusBarAnimation|Animation when changing the hidden property of the status bar.| 2340 2340 2341 2341 #### `setNetworkActivityIndicatorVisible()` (iOS) 2342 2342 ··· 2368 2368 2369 2369 Enum representing the status bar animation type for transitions on iOS. 2370 2370 2371 2371 - | Value | Type | Description | 2372 2372 - | --------- | ------ | ---------------- | 2373 2373 - | `'fade'` | string | Fade animation. | 2374 2374 - | `'slide'` | string | Slide animation. | 2375 2375 - | `'none'` | string | No animation. | 2371 2371 + |Value|Type|Description| 2372 2372 + |-|-|-| 2373 2373 + |`'fade'`|string|Fade animation.| 2374 2374 + |`'slide'`|string|Slide animation.| 2375 2375 + |`'none'`|string|No animation.| 2376 2376 2377 2377 #### StatusBarStyle 2378 2378 2379 2379 Enum representing the status bar style type. 2380 2380 2381 2381 - | Value | Type | Description | 2382 2382 - | --- | --- | --- | 2383 2383 - | `'default'` | string | Default status bar style (dark for iOS, light for Android). | 2384 2384 - | `'light-content'` | string | White texts and icons. | 2385 2385 - | `'dark-content'` | string | Dark texts and icons (requires API>=23 on Android). | 2381 2381 + |Value|Type|Description| 2382 2382 + |-|-|-| 2383 2383 + |`'default'`|string|Default status bar style (dark for iOS, light for Android).| 2384 2384 + |`'light-content'`|string|White texts and icons.| 2385 2385 + |`'dark-content'`|string|Dark texts and icons (requires API>=23 on Android).| 2386 2386 2387 2387 ## Enabling USB Debugging on Android Devices 2388 2388 ··· 2521 2521 2522 2522 ### Example 2523 2523 2524 2524 - _Example usage of the Switch component is not provided here._ 2524 2524 + *Example usage of the Switch component is not provided here.* 2525 2525 2526 2526 ### Reference 2527 2527 2528 2528 - _Reference details for the Switch component are not included here._ 2528 2528 + *Reference details for the Switch component are not included here.* 2529 2529 2530 2530 ### Props 2531 2531 ··· 2562 2562 #### `trackColor` 2563 2563 2564 2564 - **Description**: Defines custom colors for the switch track. 2565 2565 - - _iOS_: When the switch is off (`false`), the track contracts into its border. To modify the color of the background revealed by this contracted track, use `ios_backgroundColor`. 2565 2565 + - *iOS*: When the switch is off (`false`), the track contracts into its border. To modify the color of the background revealed by this contracted track, use `ios_backgroundColor`. 2566 2566 - **Type**: `object: { false: color, true: color }` 2567 2567 2568 2568 #### `value` ··· 3010 3010 3011 3011 ##### Specific to TouchableHighlight 3012 3012 3013 3013 - | Prop Name | Description | Type | 3014 3014 - | --- | --- | --- | 3015 3015 - | `activeOpacity` | Sets the opacity of the wrapped view during touch interaction. Must be between 0 and 1. Defaults to 0.85. Requires `underlayColor`. | number | 3016 3016 - | `onHideUnderlay` | Called immediately after the underlay is hidden. | function | 3017 3017 - | `onShowUnderlay` | Called immediately after the underlay is shown. | function | 3018 3018 - | `style` | Style properties for the view. | View\.style | 3019 3019 - | `underlayColor` | The color of the underlay that appears when touch is active. | color | 3013 3013 + |Prop Name|Description|Type| 3014 3014 + |-|-|-| 3015 3015 + |`activeOpacity`|Sets the opacity of the wrapped view during touch interaction. Must be between 0 and 1. Defaults to 0.85. Requires `underlayColor`.|number| 3016 3016 + |`onHideUnderlay`|Called immediately after the underlay is hidden.|function| 3017 3017 + |`onShowUnderlay`|Called immediately after the underlay is shown.|function| 3018 3018 + |`style`|Style properties for the view.|View\.style| 3019 3019 + |`underlayColor`|The color of the underlay that appears when touch is active.|color| 3020 3020 3021 3021 ##### iOS Specific Props 3022 3022 3023 3023 - - **hasTVPreferredFocus**: _(Apple TV only)_ Indicates TV preferred focus (refer to the View component documentation). 3023 3023 + - **hasTVPreferredFocus**: *(Apple TV only)* Indicates TV preferred focus (refer to the View component documentation). 3024 3024 - Type: bool 3025 3025 3026 3026 ##### Android Specific Props ··· 3038 3038 3039 3039 ##### Testing Prop 3040 3040 3041 3041 - - **testOnly_pressed**: Useful for snapshot tests. 3041 3041 + - **testOnly\_pressed**: Useful for snapshot tests. 3042 3042 - Type: bool 3043 3043 3044 3044 ## TouchableOpacity Component ··· 3180 3180 3181 3181 ### Props 3182 3182 3183 3183 - | Prop Name | Description | Type | 3184 3184 - | --- | --- | --- | 3185 3185 - | `accessibilityIgnoresInvertColors` (iOS) | Indicates whether the view should be inverted when color inversion is enabled. A value of `true` prevents inversion even if color inversion is turned on. See the Accessibility guide for more information. | Boolean | 3186 3186 - | `accessible` | When set to `true`, marks the view as an accessibility element. By default, all touchable elements are accessible. | bool | 3187 3187 - | `accessibilityLabel` | Overrides the text read by screen readers when interacting with the element. By default, it is constructed from all child `Text` nodes separated by spaces. | string | 3188 3188 - | `accessibilityLanguage` (iOS) | Specifies the language used by the screen reader for this element, following the BCP 47 specification. See the iOS `accessibilityLanguage` documentation for more information. | string | 3189 3189 - | `accessibilityHint` | Provides a hint to help users understand what will happen when they perform an action on the accessibility element if it's not clear from the label. | string | 3190 3190 - | `accessibilityRole` | Communicates the purpose of a component to assistive technology users. Possible values include `'none'`, `'button'`, `'link'`, `'search'`, `'image'`, `'keyboardkey'`, `'text'`, `'adjustable'`, and more. | string | 3191 3191 - | `accessibilityState` | Describes the current state of a component to assistive technology users. See the Accessibility guide for more information. | object: `{disabled, selected, checked, busy, expanded}` | 3192 3192 - | `accessibilityActions` | Allows assistive technologies to programmatically invoke actions on a component. Each action should include a name and label. See the Accessibility guide for more details. | array | 3193 3193 - | `aria-busy` | Indicates that an element is being modified and assistive technologies may want to wait until changes are complete before notifying the user. | boolean | 3194 3194 - | `aria-checked` | Represents the state of a checkable element, which can be either a boolean or `'mixed'`. | boolean, 'mixed' | 3195 3195 - | `aria-disabled` | Indicates that an element is perceivable but disabled and not editable or operable. | boolean | 3196 3196 - | `aria-expanded` | Shows whether an expandable element is currently expanded or collapsed. | boolean | 3197 3197 - | `aria-hidden` | Specifies if the accessibility elements within this element are hidden, affecting how assistive technologies like VoiceOver interact with sibling views. | boolean | 3198 3198 - | `aria-label` | Provides a string value that labels an interactive element. | string | 3199 3199 - | `aria-live` (Android) | Indicates updates to an element and describes the types of updates expected by user agents, assistive technologies, and users. Options include `'assertive'`, `'off'`, and `'polite'`. | enum: `'assertive'`, `'off'`, `'polite'` | 3200 3200 - | `aria-modal` (iOS) | Boolean indicating whether VoiceOver should ignore sibling elements within views. Takes precedence over the `accessibilityViewIsModal` prop. | boolean | 3201 3201 - | `aria-selected` | Indicates if a selectable element is currently selected. | boolean | 3202 3202 - | `onAccessibilityAction` | Invoked when an accessibility action is performed by the user. The function receives an event containing the name of the action to perform. See the Accessibility guide for more information. | function | 3203 3203 - | `accessibilityValue` | Represents a component's current value, either as a textual description or range information (min, max, now) for components like sliders and progress bars. | object: `{min, max, now, text}` | 3204 3204 - | `aria-valuemax` | Specifies the maximum value for range-based components, taking precedence over the `max` value in the `accessibilityValue` prop. | number | 3205 3205 - | `aria-valuemin` | Specifies the minimum value for range-based components, taking precedence over the `min` value in the `accessibilityValue` prop. | number | 3206 3206 - | `aria-valuenow` | Represents the current value for range-based components, taking precedence over the `now` value in the `accessibilityValue` prop. | number | 3207 3207 - | `aria-valuetext` | Provides a textual description of the component's value, taking precedence over the `text` value in the `accessibilityValue` prop. | string | 3208 3208 - | `delayLongPress` | Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. | number | 3209 3209 - | `delayPressIn` | Duration (in milliseconds) from the start of a touch until `onPressIn` is invoked. | number | 3210 3210 - | `delayPressOut` | Duration (in milliseconds) after releasing a touch before `onPressOut` is called. | number | 3211 3211 - | `disabled` | If set to true, disables all interactions for this component. | bool | 3212 3212 - | `hitSlop` | Defines how far from the button a touch can start. This value is added to `pressRetentionOffset` when moving off of the button. The touch area does not extend past parent view bounds and sibling views with higher Z-index take precedence if overlapping. | Rect or number | 3213 3213 - | `id` | Used to locate this view from native code, taking precedence over the `nativeID` prop. | string | 3214 3214 - | `onBlur` | Invoked when the item loses focus. | function | 3215 3215 - | `onFocus` | Invoked when the item receives focus. | function | 3216 3216 - | `onLayout` | Called on mount and during layout changes. | `({nativeEvent: LayoutEvent}) => void` | 3217 3217 - | `onLongPress` | Triggered if the time after `onPressIn` exceeds 370 milliseconds, customizable with `delayLongPress`. | function | 3218 3218 - | `onPress` | Called when a touch is released unless cancelled (e.g., by a scroll that steals the responder lock). The first argument is an event in form of PressEvent. | function | 3219 3219 - | `onPressIn` | Invoked as soon as the touchable element is pressed, even before `onPress`. Useful for tasks like network requests. The first argument is an event in form of PressEvent. | function | 3220 3220 - | `onPressOut` | Called immediately after a touch is released, prior to `onPress`. The first argument is an event in form of PressEvent. | function | 3221 3221 - | `pressRetentionOffset` | Defines how far a touch may move off the button before deactivating it when the scroll view is disabled. Re-activation occurs upon moving back over the button. Pass a constant to reduce memory allocations. | Rect or number | 3222 3222 - | `nativeID` | | string | 3223 3223 - | `testID` | Used to locate this view in end-to-end tests. | string | 3224 3224 - | `touchSoundDisabled` (Android) | If set to true, prevents the system sound from playing on touch. | Boolean | 3183 3183 + |Prop Name|Description|Type| 3184 3184 + |-|-|-| 3185 3185 + |`accessibilityIgnoresInvertColors` (iOS)|Indicates whether the view should be inverted when color inversion is enabled. A value of `true` prevents inversion even if color inversion is turned on. See the Accessibility guide for more information.|Boolean| 3186 3186 + |`accessible`|When set to `true`, marks the view as an accessibility element. By default, all touchable elements are accessible.|bool| 3187 3187 + |`accessibilityLabel`|Overrides the text read by screen readers when interacting with the element. By default, it is constructed from all child `Text` nodes separated by spaces.|string| 3188 3188 + |`accessibilityLanguage` (iOS)|Specifies the language used by the screen reader for this element, following the BCP 47 specification. See the iOS `accessibilityLanguage` documentation for more information.|string| 3189 3189 + |`accessibilityHint`|Provides a hint to help users understand what will happen when they perform an action on the accessibility element if it's not clear from the label.|string| 3190 3190 + |`accessibilityRole`|Communicates the purpose of a component to assistive technology users. Possible values include `'none'`, `'button'`, `'link'`, `'search'`, `'image'`, `'keyboardkey'`, `'text'`, `'adjustable'`, and more.|string| 3191 3191 + |`accessibilityState`|Describes the current state of a component to assistive technology users. See the Accessibility guide for more information.|object: `{disabled, selected, checked, busy, expanded}`| 3192 3192 + |`accessibilityActions`|Allows assistive technologies to programmatically invoke actions on a component. Each action should include a name and label. See the Accessibility guide for more details.|array| 3193 3193 + |`aria-busy`|Indicates that an element is being modified and assistive technologies may want to wait until changes are complete before notifying the user.|boolean| 3194 3194 + |`aria-checked`|Represents the state of a checkable element, which can be either a boolean or `'mixed'`.|boolean, 'mixed'| 3195 3195 + |`aria-disabled`|Indicates that an element is perceivable but disabled and not editable or operable.|boolean| 3196 3196 + |`aria-expanded`|Shows whether an expandable element is currently expanded or collapsed.|boolean| 3197 3197 + |`aria-hidden`|Specifies if the accessibility elements within this element are hidden, affecting how assistive technologies like VoiceOver interact with sibling views.|boolean| 3198 3198 + |`aria-label`|Provides a string value that labels an interactive element.|string| 3199 3199 + |`aria-live` (Android)|Indicates updates to an element and describes the types of updates expected by user agents, assistive technologies, and users. Options include `'assertive'`, `'off'`, and `'polite'`.|enum: `'assertive'`, `'off'`, `'polite'`| 3200 3200 + |`aria-modal` (iOS)|Boolean indicating whether VoiceOver should ignore sibling elements within views. Takes precedence over the `accessibilityViewIsModal` prop.|boolean| 3201 3201 + |`aria-selected`|Indicates if a selectable element is currently selected.|boolean| 3202 3202 + |`onAccessibilityAction`|Invoked when an accessibility action is performed by the user. The function receives an event containing the name of the action to perform. See the Accessibility guide for more information.|function| 3203 3203 + |`accessibilityValue`|Represents a component's current value, either as a textual description or range information (min, max, now) for components like sliders and progress bars.|object: `{min, max, now, text}`| 3204 3204 + |`aria-valuemax`|Specifies the maximum value for range-based components, taking precedence over the `max` value in the `accessibilityValue` prop.|number| 3205 3205 + |`aria-valuemin`|Specifies the minimum value for range-based components, taking precedence over the `min` value in the `accessibilityValue` prop.|number| 3206 3206 + |`aria-valuenow`|Represents the current value for range-based components, taking precedence over the `now` value in the `accessibilityValue` prop.|number| 3207 3207 + |`aria-valuetext`|Provides a textual description of the component's value, taking precedence over the `text` value in the `accessibilityValue` prop.|string| 3208 3208 + |`delayLongPress`|Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.|number| 3209 3209 + |`delayPressIn`|Duration (in milliseconds) from the start of a touch until `onPressIn` is invoked.|number| 3210 3210 + |`delayPressOut`|Duration (in milliseconds) after releasing a touch before `onPressOut` is called.|number| 3211 3211 + |`disabled`|If set to true, disables all interactions for this component.|bool| 3212 3212 + |`hitSlop`|Defines how far from the button a touch can start. This value is added to `pressRetentionOffset` when moving off of the button. The touch area does not extend past parent view bounds and sibling views with higher Z-index take precedence if overlapping.|Rect or number| 3213 3213 + |`id`|Used to locate this view from native code, taking precedence over the `nativeID` prop.|string| 3214 3214 + |`onBlur`|Invoked when the item loses focus.|function| 3215 3215 + |`onFocus`|Invoked when the item receives focus.|function| 3216 3216 + |`onLayout`|Called on mount and during layout changes.|`({nativeEvent: LayoutEvent}) => void`| 3217 3217 + |`onLongPress`|Triggered if the time after `onPressIn` exceeds 370 milliseconds, customizable with `delayLongPress`.|function| 3218 3218 + |`onPress`|Called when a touch is released unless cancelled (e.g., by a scroll that steals the responder lock). The first argument is an event in form of PressEvent.|function| 3219 3219 + |`onPressIn`|Invoked as soon as the touchable element is pressed, even before `onPress`. Useful for tasks like network requests. The first argument is an event in form of PressEvent.|function| 3220 3220 + |`onPressOut`|Called immediately after a touch is released, prior to `onPress`. The first argument is an event in form of PressEvent.|function| 3221 3221 + |`pressRetentionOffset`|Defines how far a touch may move off the button before deactivating it when the scroll view is disabled. Re-activation occurs upon moving back over the button. Pass a constant to reduce memory allocations.|Rect or number| 3222 3222 + |`nativeID`||string| 3223 3223 + |`testID`|Used to locate this view in end-to-end tests.|string| 3224 3224 + |`touchSoundDisabled` (Android)|If set to true, prevents the system sound from playing on touch.|Boolean| 3225 3225 3226 3226 - The provided text appears to be a detailed documentation of various properties and methods associated with a `View` component, likely from a mobile development framework such as React Native. Below is an organized summary of these properties and their descriptions: 3226 3226 + ## Text 3227 3227 3228 3228 #### Accessibility Properties 3229 3229 ··· 3743 3743 3744 3744 **Parameters:** 3745 3745 3746 3746 - | Name | Type | Required | Description | 3747 3747 - | -------------- | ------ | -------- | ----------------------- | 3748 3748 - | imageSizeLimit | number | Yes | Image cache size limit. | 3749 3749 - | totalCostLimit | number | Yes | Total cache cost limit. | 3746 3746 + |Name|Type|Required|Description| 3747 3747 + |-|-|-|-| 3748 3748 + |imageSizeLimit|number|Yes|Image cache size limit.| 3749 3749 + |totalCostLimit|number|Yes|Total cache cost limit.| 3750 3750 3751 3751 In the example above, the image size limit is set to 4 MB and the total cost limit to 200 MB. 3752 3752 ··· 3782 3782 3783 3783 ### Why Not Automatically Size Everything? 3784 3784 3785 3785 - _In the browser_, if no size is given to an image, the browser renders a 0x0 element, downloads the image, and then displays it with the correct size. The issue here is that your UI will jump around as images load, leading to a poor user experience known as Cumulative Layout Shift. 3785 3785 + *In the browser*, if no size is given to an image, the browser renders a 0x0 element, downloads the image, and then displays it with the correct size. The issue here is that your UI will jump around as images load, leading to a poor user experience known as Cumulative Layout Shift. 3786 3786 3787 3787 - _In React Native_, this behavior isn't implemented intentionally. It requires more work for developers to know the dimensions (or aspect ratio) of remote images in advance, but it leads to a better user experience. Static images loaded from the app bundle via `require('./my-icon.png')` can be automatically sized because their dimensions are available immediately at mounting time. 3787 3787 + *In React Native*, this behavior isn't implemented intentionally. It requires more work for developers to know the dimensions (or aspect ratio) of remote images in advance, but it leads to a better user experience. Static images loaded from the app bundle via `require('./my-icon.png')` can be automatically sized because their dimensions are available immediately at mounting time. 3788 3788 3789 3789 For example, the result of `require('./my-icon.png')` might be: 3790 3790 ··· 3907 3907 3908 3908 **Parameters:** 3909 3909 3910 3910 - | Name | Type | Required | Description | 3911 3911 - | --- | --- | --- | --- | 3912 3912 - | color | string | Yes | The ripple color | 3913 3913 - | borderless | boolean | Yes | Determines if the ripple can render outside bounds | 3914 3914 - | rippleRadius | ?number | No | Controls the radius of the ripple effect | 3910 3910 + |Name|Type|Required|Description| 3911 3911 + |-|-|-|-| 3912 3912 + |color|string|Yes|The ripple color| 3913 3913 + |borderless|boolean|Yes|Determines if the ripple can render outside bounds| 3914 3914 + |rippleRadius|?number|No|Controls the radius of the ripple effect| 3915 3915 3916 3916 #### `canUseNativeForeground()` 3917 3917 ··· 3933 3933 3934 3934 ##### `backgroundColor` 3935 3935 3936 3936 - | Type | 3937 3937 - | ----- | 3938 3938 - | color | 3936 3936 + |Type| 3937 3937 + |-| 3938 3938 + |color| 3939 3939 3940 3940 ##### `nativeID` 3941 3941 3942 3942 A unique identifier used to associate this `InputAccessoryView` with specific TextInput(s). 3943 3943 3944 3944 - | Type | 3945 3945 - | ------ | 3946 3946 - | string | 3944 3944 + |Type| 3945 3945 + |-| 3946 3946 + |string| 3947 3947 3948 3948 ##### `style` 3949 3949 3950 3950 - | Type | 3951 3951 - | ---------- | 3952 3952 - | View Style | 3950 3950 + |Type| 3951 3951 + |-| 3952 3952 + |View Style| 3953 3953 3954 3954 ### Known Issues 3955 3955 ··· 3994 3994 3995 3995 This property specifies whether the back face of a rotated image should be visible. 3996 3996 3997 3997 - | Type | Default | 3998 3998 - | ----------------------------- | ----------- | 3999 3999 - | enum(`'visible'`, `'hidden'`) | `'visible'` | 3997 3997 + |Type|Default| 3998 3998 + |-|-| 3999 3999 + |enum(`'visible'`, `'hidden'`)|`'visible'`| 4000 4000 4001 4001 - --- 4001 4001 + *** 4002 4002 4003 4003 #### `backgroundColor` 4004 4004 4005 4005 - | Type | 4006 4006 - | ----- | 4007 4007 - | color | 4005 4005 + |Type| 4006 4006 + |-| 4007 4007 + |color| 4008 4008 4009 4009 - --- 4009 4009 + *** 4010 4010 4011 4011 #### `borderBottomLeftRadius` 4012 4012 4013 4013 - | Type | 4014 4014 - | ------ | 4015 4015 - | number | 4013 4013 + |Type| 4014 4014 + |-| 4015 4015 + |number| 4016 4016 4017 4017 - --- 4017 4017 + *** 4018 4018 4019 4019 #### `borderBottomRightRadius` 4020 4020 4021 4021 - | Type | 4022 4022 - | ------ | 4023 4023 - | number | 4021 4021 + |Type| 4022 4022 + |-| 4023 4023 + |number| 4024 4024 4025 4025 - --- 4025 4025 + *** 4026 4026 4027 4027 #### `borderColor` 4028 4028 4029 4029 - | Type | 4030 4030 - | ----- | 4031 4031 - | color | 4029 4029 + |Type| 4030 4030 + |-| 4031 4031 + |color| 4032 4032 4033 4033 - --- 4033 4033 + *** 4034 4034 4035 4035 #### `borderRadius` 4036 4036 4037 4037 - | Type | 4038 4038 - | ------ | 4039 4039 - | number | 4037 4037 + |Type| 4038 4038 + |-| 4039 4039 + |number| 4040 4040 4041 4041 - --- 4041 4041 + *** 4042 4042 4043 4043 #### `borderTopLeftRadius` 4044 4044 4045 4045 - | Type | 4046 4046 - | ------ | 4047 4047 - | number | 4045 4045 + |Type| 4046 4046 + |-| 4047 4047 + |number| 4048 4048 4049 4049 - --- 4049 4049 + *** 4050 4050 4051 4051 #### `borderTopRightRadius` 4052 4052 4053 4053 - | Type | 4054 4054 - | ------ | 4055 4055 - | number | 4053 4053 + |Type| 4054 4054 + |-| 4055 4055 + |number| 4056 4056 4057 4057 - --- 4057 4057 + *** 4058 4058 4059 4059 #### `borderWidth` 4060 4060 4061 4061 - | Type | 4062 4062 - | ------ | 4063 4063 - | number | 4061 4061 + |Type| 4062 4062 + |-| 4063 4063 + |number| 4064 4064 4065 4065 - --- 4065 4065 + *** 4066 4066 4067 4067 #### `opacity` 4068 4068 4069 4069 Sets the opacity level for the image, with values ranging from `0.0` to `1.0`. 4070 4070 4071 4071 - | Type | Default | 4072 4072 - | ------ | ------- | 4073 4073 - | number | `1.0` | 4071 4071 + |Type|Default| 4072 4072 + |-|-| 4073 4073 + |number|`1.0`| 4074 4074 4075 4075 - --- 4075 4075 + *** 4076 4076 4077 4077 #### `overflow` 4078 4078 4079 4079 - | Type | Default | 4080 4080 - | ----------------------------- | ----------- | 4081 4081 - | enum(`'visible'`, `'hidden'`) | `'visible'` | 4079 4079 + |Type|Default| 4080 4080 + |-|-| 4081 4081 + |enum(`'visible'`, `'hidden'`)|`'visible'`| 4082 4082 4083 4083 - --- 4083 4083 + *** 4084 4084 4085 4085 #### `overlayColor` (Android) 4086 4086 ··· 4090 4090 4091 4091 For more details, refer to the Fresco documentation. 4092 4092 4093 4093 - | Type | 4094 4094 - | ------ | 4095 4095 - | string | 4093 4093 + |Type| 4094 4094 + |-| 4095 4095 + |string| 4096 4096 4097 4097 - --- 4097 4097 + *** 4098 4098 4099 4099 #### `resizeMode` 4100 4100 ··· 4113 4113 4114 4114 - **`center`:** Center the image along both dimensions. If larger than the view, scale it down uniformly to fit within the view. 4115 4115 4116 4116 - | Type | Default | 4117 4117 - | --- | --- | 4118 4118 - | enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`) | `'cover'` | 4116 4116 + |Type|Default| 4117 4117 + |-|-| 4118 4118 + |enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`)|`'cover'`| 4119 4119 4120 4120 - --- 4120 4120 + *** 4121 4121 4122 4122 #### `objectFit` 4123 4123 4124 4124 Specifies how an image should be resized when its frame dimensions do not match the raw image dimensions. 4125 4125 4126 4126 - | Type | Default | 4127 4127 - | ------------------------------------------------------ | --------- | 4128 4128 - | enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`) | `'cover'` | 4126 4126 + |Type|Default| 4127 4127 + |-|-| 4128 4128 + |enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`)|`'cover'`| 4129 4129 4130 4130 - --- 4130 4130 + *** 4131 4131 4132 4132 #### `tintColor` 4133 4133 4134 4134 Alters the color of all non-transparent pixels to the specified `tintColor`. 4135 4135 4136 4136 - | Type | 4137 4137 - | ----- | 4138 4138 - | color | 4136 4136 + |Type| 4137 4137 + |-| 4138 4138 + |color| 4139 4139 4140 4140 ## Shadow Properties in React Native 4141 4141 ··· 4187 4187 4188 4188 Sets the drop shadow color. This property functions only on Android API 28 and above. For similar effects on lower APIs, use the `elevation` property. 4189 4189 4190 4190 - | Type | 4191 4191 - | ----- | 4192 4192 - | color | 4190 4190 + |Type| 4191 4191 + |-| 4192 4192 + |color| 4193 4193 4194 4194 #### `shadowOffset` (iOS) 4195 4195 4196 4196 Defines the drop shadow offset. 4197 4197 4198 4198 - | Type | 4199 4199 - | ---------------------------------------- | 4200 4200 - | object: `{width: number,height: number}` | 4198 4198 + |Type| 4199 4199 + |-| 4200 4200 + |object: `{width: number,height: number}`| 4201 4201 4202 4202 #### `shadowOpacity` (iOS) 4203 4203 4204 4204 Determines the drop shadow opacity, factoring in the color's alpha component. 4205 4205 4206 4206 - | Type | 4207 4207 - | ------ | 4208 4208 - | number | 4206 4206 + |Type| 4207 4207 + |-| 4208 4208 + |number| 4209 4209 4210 4210 #### `shadowRadius` (iOS) 4211 4211 4212 4212 Specifies the drop shadow blur radius. 4213 4213 4214 4214 - | Type | 4215 4215 - | ------ | 4216 4216 - | number | 4214 4214 + |Type| 4215 4215 + |-| 4216 4216 + |number| 4217 4217 4218 4218 ## Text Style Properties 4219 4219 ··· 4520 4520 #### `boxShadow` 4521 4521 4522 4522 **Note:**\ 4523 4523 - `boxShadow` is only available on the New Architecture. Outset shadows are supported on Android 9+, and inset shadows on Android 10+. This prop adds a shadow effect to an element, allowing control over position, color, size, and blurriness of the shadow. It can be either outside or inside the border box depending on whether it is _inset_. This implementation follows web standards. 4523 4523 + `boxShadow` is only available on the New Architecture. Outset shadows are supported on Android 9+, and inset shadows on Android 10+. This prop adds a shadow effect to an element, allowing control over position, color, size, and blurriness of the shadow. It can be either outside or inside the border box depending on whether it is *inset*. This implementation follows web standards. 4524 4524 4525 4525 Multiple shadows can be combined into a single `boxShadow`. 4526 4526 ··· 4751 4751 4752 4752 The offset on the x-axis. This value can be either positive or negative, where a positive value indicates a rightward shift and a negative value indicates a leftward shift. 4753 4753 4754 4754 - | Type | Optional | 4755 4755 - | ---------------- | -------- | 4756 4756 - | number \| string | No | 4754 4754 + |Type|Optional| 4755 4755 + |-|-| 4756 4756 + |number \| string|No| 4757 4757 4758 4758 #### `offsetY` 4759 4759 4760 4760 The offset on the y-axis. Similar to `offsetX`, this value can be either positive or negative, with a positive value indicating an upward shift and a negative value indicating a downward shift. 4761 4761 4762 4762 - | Type | Optional | 4763 4763 - | ---------------- | -------- | 4764 4764 - | number \| string | No | 4762 4762 + |Type|Optional| 4763 4763 + |-|-| 4764 4764 + |number \| string|No| 4765 4765 4766 4766 #### `standardDeviation` 4767 4767 4768 4768 This represents the standard deviation used in the Gaussian blur algorithm. A larger value results in a blurrier shadow. Only non-negative values are valid, with the default being 0. 4769 4769 4770 4770 - | Type | Optional | 4771 4771 - | ---------------- | -------- | 4772 4772 - | number \| string | Yes | 4770 4770 + |Type|Optional| 4771 4771 + |-|-| 4772 4772 + |number \| string|Yes| 4773 4773 4774 4774 #### `color` 4775 4775 4776 4776 The color of the shadow. By default, this is set to `black`. 4777 4777 4778 4778 - | Type | Optional | 4779 4779 - | ----- | -------- | 4780 4780 - | color | Yes | 4778 4778 + |Type|Optional| 4779 4779 + |-|-| 4780 4780 + |color|Yes| 4781 4781 4782 4782 ### Used by 4783 4783 ··· 4807 4807 4808 4808 Represents the component's height after a layout change. 4809 4809 4810 4810 - | Type | Optional | 4811 4811 - | ------ | -------- | 4812 4812 - | number | No | 4810 4810 + |Type|Optional| 4811 4811 + |-|-| 4812 4812 + |number|No| 4813 4813 4814 4814 #### `width` 4815 4815 4816 4816 Indicates the component's width following a layout change. 4817 4817 4818 4818 - | Type | Optional | 4819 4819 - | ------ | -------- | 4820 4820 - | number | No | 4818 4818 + |Type|Optional| 4819 4819 + |-|-| 4820 4820 + |number|No| 4821 4821 4822 4822 #### `x` 4823 4823 4824 4824 Specifies the X coordinate of the component within its parent component. 4825 4825 4826 4826 - | Type | Optional | 4827 4827 - | ------ | -------- | 4828 4828 - | number | No | 4826 4826 + |Type|Optional| 4827 4827 + |-|-| 4828 4828 + |number|No| 4829 4829 4830 4830 #### `y` 4831 4831 4832 4832 Denotes the Y coordinate of the component inside its parent component. 4833 4833 4834 4834 - | Type | Optional | 4835 4835 - | ------ | -------- | 4836 4836 - | number | No | 4834 4834 + |Type|Optional| 4835 4835 + |-|-| 4836 4836 + |number|No| 4837 4837 4838 4838 #### `target` 4839 4839 4840 4840 Identifies the node ID of the element that receives the PressEvent. It can be a number, or it may be `null` or `undefined`. 4841 4841 4842 4842 - | Type | Optional | 4843 4843 - | --------------------------- | -------- | 4844 4844 - | number, `null`, `undefined` | No | 4842 4842 + |Type|Optional| 4843 4843 + |-|-| 4844 4844 + |number, `null`, `undefined`|No| 4845 4845 4846 4846 ### Components Utilizing LayoutEvent 4847 4847 ··· 4879 4879 4880 4880 An array containing all `PressEvents` that have changed since the last event. 4881 4881 4882 4882 - | Type | Optional | 4883 4883 - | -------------------- | -------- | 4884 4884 - | Array of PressEvents | No | 4882 4882 + |Type|Optional| 4883 4883 + |-|-| 4884 4884 + |Array of PressEvents|No| 4885 4885 4886 4886 #### `force` (iOS) 4887 4887 4888 4888 The amount of force used during a 3D Touch press, represented as a float value ranging from `0.0` to `1.0`. 4889 4889 4890 4890 - | Type | Optional | 4891 4891 - | ------ | -------- | 4892 4892 - | number | Yes | 4890 4890 + |Type|Optional| 4891 4891 + |-|-| 4892 4892 + |number|Yes| 4893 4893 4894 4894 #### `identifier` 4895 4895 4896 4896 A unique numeric identifier assigned to the event. 4897 4897 4898 4898 - | Type | Optional | 4899 4899 - | ------ | -------- | 4900 4900 - | number | No | 4898 4898 + |Type|Optional| 4899 4899 + |-|-| 4900 4900 + |number|No| 4901 4901 4902 4902 #### `locationX` 4903 4903 4904 4904 The X coordinate of the touch origin within the touchable area, relative to the element. 4905 4905 4906 4906 - | Type | Optional | 4907 4907 - | ------ | -------- | 4908 4908 - | number | No | 4906 4906 + |Type|Optional| 4907 4907 + |-|-| 4908 4908 + |number|No| 4909 4909 4910 4910 #### `locationY` 4911 4911 4912 4912 The Y coordinate of the touch origin within the touchable area, relative to the element. 4913 4913 4914 4914 - | Type | Optional | 4915 4915 - | ------ | -------- | 4916 4916 - | number | No | 4914 4914 + |Type|Optional| 4915 4915 + |-|-| 4916 4916 + |number|No| 4917 4917 4918 4918 #### `pageX` 4919 4919 4920 4920 The X coordinate of the touch origin on the screen, relative to the root view. 4921 4921 4922 4922 - | Type | Optional | 4923 4923 - | ------ | -------- | 4924 4924 - | number | No | 4922 4922 + |Type|Optional| 4923 4923 + |-|-| 4924 4924 + |number|No| 4925 4925 4926 4926 #### `pageY` 4927 4927 4928 4928 The Y coordinate of the touch origin on the screen, relative to the root view. 4929 4929 4930 4930 - | Type | Optional | 4931 4931 - | ------ | -------- | 4932 4932 - | number | No | 4930 4930 + |Type|Optional| 4931 4931 + |-|-| 4932 4932 + |number|No| 4933 4933 4934 4934 #### `target` 4935 4935 4936 4936 The node ID of the element receiving the `PressEvent`. It can be a number or `null`/`undefined`. 4937 4937 4938 4938 - | Type | Optional | 4939 4939 - | ----------------------- | -------- | 4940 4940 - | number, null, undefined | No | 4938 4938 + |Type|Optional| 4939 4939 + |-|-| 4940 4940 + |number, null, undefined|No| 4941 4941 4942 4942 #### `timestamp` 4943 4943 4944 4944 A timestamp value indicating when the `PressEvent` occurred, represented in milliseconds. 4945 4945 4946 4946 - | Type | Optional | 4947 4947 - | ------ | -------- | 4948 4948 - | number | No | 4946 4946 + |Type|Optional| 4947 4947 + |-|-| 4948 4948 + |number|No| 4949 4949 4950 4950 #### `touches` 4951 4951 4952 4952 An array containing all current `PressEvents` on the screen. 4953 4953 4954 4954 - | Type | Optional | 4955 4955 - | -------------------- | -------- | 4956 4956 - | Array of PressEvents | No | 4954 4954 + |Type|Optional| 4955 4955 + |-|-| 4956 4956 + |Array of PressEvents|No| 4957 4957 4958 4958 ### Used By 4959 4959 ··· 4988 4988 4989 4989 #### `bottom` 4990 4990 4991 4991 - | Type | Required | 4992 4992 - | --------------------------- | -------- | 4993 4993 - | number, `null`, `undefined` | No | 4991 4991 + |Type|Required| 4992 4992 + |-|-| 4993 4993 + |number, `null`, `undefined`|No| 4994 4994 4995 4995 #### `left` 4996 4996 4997 4997 - | Type | Required | 4998 4998 - | --------------------------- | -------- | 4999 4999 - | number, `null`, `undefined` | No | 4997 4997 + |Type|Required| 4998 4998 + |-|-| 4999 4999 + |number, `null`, `undefined`|No| 5000 5000 5001 5001 #### `right` 5002 5002 5003 5003 - | Type | Required | 5004 5004 - | --------------------------- | -------- | 5005 5005 - | number, `null`, `undefined` | No | 5003 5003 + |Type|Required| 5004 5004 + |-|-| 5005 5005 + |number, `null`, `undefined`|No| 5006 5006 5007 5007 #### `top` 5008 5008 5009 5009 - | Type | Required | 5010 5010 - | --------------------------- | -------- | 5011 5011 - | number, `null`, `undefined` | No | 5009 5009 + |Type|Required| 5010 5010 + |-|-| 5011 5011 + |number, `null`, `undefined`|No| 5012 5012 5013 5013 ### Used By 5014 5014 ··· 5483 5483 5484 5484 React Native includes numerous Core Components for various functionalities, from basic controls to activity indicators. These are documented in the API section. Key Core Components include: 5485 5485 5486 5486 - | React Native UI Component | Android View | iOS View | Web Analog | Description | 5487 5487 - | --- | --- | --- | --- | --- | 5488 5488 - | `<View>` | `<ViewGroup>` | `<UIView>` | A non-scrolling `<div>` | Acts as a container supporting layout with flexbox, style, touch handling, and accessibility controls. | 5489 5489 - | `<Text>` | `<TextView>` | `<UITextView>` | `<p>` | Displays, styles, nests text strings, and handles touch events. | 5490 5490 - | `<Image>` | `<ImageView>` | `<UIImageView>` | `<img>` | Used for displaying various types of images. | 5491 5491 - | `<ScrollView>` | `<ScrollView>` | `<UIScrollView>` | `<div>` | A generic scrolling container that can hold multiple components and views. | 5492 5492 - | `<TextInput>` | `<EditText>` | `<UITextField>` | `<input type="text">` | Enables user text input. | 5486 5486 + |React Native UI Component|Android View|iOS View|Web Analog|Description| 5487 5487 + |-|-|-|-|-| 5488 5488 + |`<View>`|`<ViewGroup>`|`<UIView>`|A non-scrolling `<div>`|Acts as a container supporting layout with flexbox, style, touch handling, and accessibility controls.| 5489 5489 + |`<Text>`|`<TextView>`|`<UITextView>`|`<p>`|Displays, styles, nests text strings, and handles touch events.| 5490 5490 + |`<Image>`|`<ImageView>`|`<UIImageView>`|`<img>`|Used for displaying various types of images.| 5491 5491 + |`<ScrollView>`|`<ScrollView>`|`<UIScrollView>`|`<div>`|A generic scrolling container that can hold multiple components and views.| 5492 5492 + |`<TextInput>`|`<EditText>`|`<UITextField>`|`<input type="text">`|Enables user text input.| 5493 5493 5494 5494 In the following sections, you will learn how to combine these Core Components to understand React's workings better. 5495 5495 ··· 5669 5669 5670 5670 > The `<>` and `</>` are JSX fragments. Adjacent JSX elements must be wrapped in an enclosing tag, which fragments allow without adding unnecessary wrapping elements like `View`. 5671 5671 5672 5672 - --- 5672 5672 + *** 5673 5673 5674 5674 Having covered React and React Native’s Core Components, let's explore handling `<TextInput>` further. 5675 5675 ··· 5796 5796 5797 5797 Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted key-value store. Each app operates in its own sandbox environment, preventing cross-app data access. 5798 5798 5799 5799 - | **Use Async Storage When** | **Avoid Using Async Storage For** | 5800 5800 - | --- | --- | 5801 5801 - | Persisting non-sensitive data across app runs | Token storage | 5802 5802 - | Persisting Redux state | Secrets | 5803 5803 - | Persisting GraphQL state | | 5804 5804 - | Storing global app-wide variables | | 5799 5799 + |**Use Async Storage When**|**Avoid Using Async Storage For**| 5800 5800 + |-|-| 5801 5801 + |Persisting non-sensitive data across app runs|Token storage| 5802 5802 + |Persisting Redux state|Secrets| 5803 5803 + |Persisting GraphQL state|| 5804 5804 + |Storing global app-wide variables|| 5805 5805 5806 5806 ##### Developer Notes 5807 5807 ··· 6456 6456 6457 6457 ### Remote JavaScript Debugging (Removed) 6458 6458 6459 6459 - _Note: This feature has been removed._ 6459 6459 + *Note: This feature has been removed.* 6460 6460 6461 6461 - --- 6461 6461 + *** 6462 6462 6463 6463 **Previous:** Debugging Release Builds\ 6464 6464 **Next:** Testing ··· 6536 6536 - [Appium](#) 6537 6537 - [Maestro](#) 6538 6538 6539 6539 - _This guide was authored by Vojtech Novak._ 6539 6539 + *This guide was authored by Vojtech Novak.* 6540 6540 6541 6541 ## Performance Overview 6542 6542 ··· 6761 6761 6762 6762 #### removeClippedSubviews 6763 6763 6764 6764 - | Type | Default | 6765 6765 - | ------- | ------- | 6766 6766 - | Boolean | False | 6764 6764 + |Type|Default| 6765 6765 + |-|-| 6766 6766 + |Boolean|False| 6767 6767 6768 6768 **Description:** When set to `true`, views outside of the viewport are detached from the native view hierarchy. 6769 6769 ··· 6773 6773 6774 6774 #### maxToRenderPerBatch 6775 6775 6776 6776 - | Type | Default | 6777 6777 - | ------ | ------- | 6778 6778 - | Number | 10 | 6776 6776 + |Type|Default| 6777 6777 + |-|-| 6778 6778 + |Number|10| 6779 6779 6780 6780 **Description:** Controls the number of items rendered per batch during scrolling. 6781 6781 ··· 6785 6785 6786 6786 #### updateCellsBatchingPeriod 6787 6787 6788 6788 - | Type | Default | 6789 6789 - | ------ | ------- | 6790 6790 - | Number | 50 | 6788 6788 + |Type|Default| 6789 6789 + |-|-| 6790 6790 + |Number|50| 6791 6791 6792 6792 **Description:** Sets the delay in milliseconds between batch renders for `VirtualizedList`. 6793 6793 ··· 6797 6797 6798 6798 #### initialNumToRender 6799 6799 6800 6800 - | Type | Default | 6801 6801 - | ------ | ------- | 6802 6802 - | Number | 10 | 6800 6800 + |Type|Default| 6801 6801 + |-|-| 6802 6802 + |Number|10| 6803 6803 6804 6804 **Description:** Specifies the number of items to render initially. 6805 6805 ··· 6809 6809 6810 6810 #### windowSize 6811 6811 6812 6812 - | Type | Default | 6813 6813 - | ------ | ------- | 6814 6814 - | Number | 21 | 6812 6812 + |Type|Default| 6813 6813 + |-|-| 6814 6814 + |Number|21| 6815 6815 6816 6816 **Description:** Measured in units where 1 equals the viewport height. The default is 21 (10 viewports above, 10 below, and one in between). 6817 6817 ··· 6916 6916 6917 6917 **Parameters:** 6918 6918 6919 6919 - | Name | Type | Description | 6920 6920 - | --- | --- | --- | 6921 6921 - | titleRequired | string | The dialog's title. Passing `null` or an empty string will hide the title. | 6922 6922 - | message | string | An optional message displayed below the title. | 6923 6923 - | buttons | AlertButton\[] | Optional array for button configurations. | 6924 6924 - | options | AlertOptions | Optional configuration for the alert. | 6919 6919 + |Name|Type|Description| 6920 6920 + |-|-|-| 6921 6921 + |titleRequired|string|The dialog's title. Passing `null` or an empty string will hide the title.| 6922 6922 + |message|string|An optional message displayed below the title.| 6923 6923 + |buttons|AlertButton\[]|Optional array for button configurations.| 6924 6924 + |options|AlertOptions|Optional configuration for the alert.| 6925 6925 6926 6926 ##### `prompt()` (iOS Only) 6927 6927 ··· 6940 6940 6941 6941 **Parameters:** 6942 6942 6943 6943 - | Name | Type | Description | 6944 6944 - | --- | --- | --- | 6945 6945 - | titleRequired | string | The dialog's title. | 6946 6946 - | message | string | An optional message displayed above the text input. | 6947 6947 - | callbackOrButtons | function \| AlertButton\[] | If a function, it is invoked with the prompt's value `(text: string) => void` when 'OK' is tapped.\*\*\*If an array, buttons are configured based on its content. | 6948 6948 - | type | AlertType | Configures the text input. | 6949 6949 - | defaultValue | string | Default text in the input field. | 6950 6950 - | keyboardType | string | Keyboard type for the first text field (if present). One of `TextInput` keyboard types. | 6951 6951 - | options | AlertOptions | Optional configuration for the alert. | 6943 6943 + |Name|Type|Description| 6944 6944 + |-|-|-| 6945 6945 + |titleRequired|string|The dialog's title.| 6946 6946 + |message|string|An optional message displayed above the text input.| 6947 6947 + |callbackOrButtons|function \| AlertButton\[]|If a function, it is invoked with the prompt's value `(text: string) => void` when 'OK' is tapped.\*\*\*If an array, buttons are configured based on its content.| 6948 6948 + |type|AlertType|Configures the text input.| 6949 6949 + |defaultValue|string|Default text in the input field.| 6950 6950 + |keyboardType|string|Keyboard type for the first text field (if present). One of `TextInput` keyboard types.| 6951 6951 + |options|AlertOptions|Optional configuration for the alert.| 6952 6952 6953 6953 #### Type Definitions 6954 6954 ··· 6958 6958 6959 6959 **Constants:** 6960 6960 6961 6961 - | Value | Description | 6962 6962 - | --------------- | ------------------------- | 6963 6963 - | `'default'` | Default button style. | 6964 6964 - | `'cancel'` | Cancel button style. | 6965 6965 - | `'destructive'` | Destructive button style. | 6961 6961 + |Value|Description| 6962 6962 + |-|-| 6963 6963 + |`'default'`|Default button style.| 6964 6964 + |`'cancel'`|Cancel button style.| 6965 6965 + |`'destructive'`|Destructive button style.| 6966 6966 6967 6967 ##### `AlertType` (iOS Only) 6968 6968 ··· 6970 6970 6971 6971 **Constants:** 6972 6972 6973 6973 - | Value | Description | 6974 6974 - | ------------------ | ---------------------------- | 6975 6975 - | `'default'` | Default alert with no inputs | 6976 6976 - | `'plain-text'` | Plain text input alert | 6977 6977 - | `'secure-text'` | Secure text input alert | 6978 6978 - | `'login-password'` | Login and password alert | 6973 6973 + |Value|Description| 6974 6974 + |-|-| 6975 6975 + |`'default'`|Default alert with no inputs| 6976 6976 + |`'plain-text'`|Plain text input alert| 6977 6977 + |`'secure-text'`|Secure text input alert| 6978 6978 + |`'login-password'`|Login and password alert| 6979 6979 6980 6980 ##### `AlertButton` 6981 6981 ··· 6983 6983 6984 6984 **Properties:** 6985 6985 6986 6986 - | Name | Type | Description | 6987 6987 - | --- | --- | --- | 6988 6988 - | text | string | Button label. | 6989 6989 - | onPress | function | Callback when the button is pressed. | 6990 6990 - | styleiOS | AlertButtonStyle | Button style, ignored on Android. | 6991 6991 - | isPreferrediOS | boolean | Whether to emphasize the button, ignored on Android. | 6986 6986 + |Name|Type|Description| 6987 6987 + |-|-|-| 6988 6988 + |text|string|Button label.| 6989 6989 + |onPress|function|Callback when the button is pressed.| 6990 6990 + |styleiOS|AlertButtonStyle|Button style, ignored on Android.| 6991 6991 + |isPreferrediOS|boolean|Whether to emphasize the button, ignored on Android.| 6992 6992 6993 6993 ##### `AlertOptions` 6994 6994 ··· 6996 6996 6997 6997 **Properties:** 6998 6998 6999 6999 - | Name | Type | Description | 7000 7000 - | --- | --- | --- | 7001 7001 - | cancelableAndroid | boolean | Determines if the alert can be dismissed by tapping outside of it. | 7002 7002 - | userInterfaceStyleiOS | string | Interface style for the alert, set to `light` or `dark`, otherwise defaults to system style. | 7003 7003 - | onDismissAndroid | function | Callback fired when the alert is dismissed. | 6999 6999 + |Name|Type|Description| 7000 7000 + |-|-|-| 7001 7001 + |cancelableAndroid|boolean|Determines if the alert can be dismissed by tapping outside of it.| 7002 7002 + |userInterfaceStyleiOS|string|Interface style for the alert, set to `light` or `dark`, otherwise defaults to system style.| 7003 7003 + |onDismissAndroid|function|Callback fired when the alert is dismissed.| 7004 7004 7005 7005 ## Optimizing JavaScript Loading 7006 7006 ··· 8042 8042 1. **Fabric Native Components** 8043 8043 - Android & iOS 8044 8044 8045 8045 - --- 8045 8045 + *** 8046 8046 8047 8047 **Previous:** The Codegen CLI\ 8048 8048 **Next:** Android and iOS ··· 8095 8095 8096 8096 The **React Native Hooks** library offers a convenient `useBackHandler` hook that simplifies setting up event listeners. 8097 8097 8098 8098 - --- 8098 8098 + *** 8099 8099 8100 8100 ## Reference Methods 8101 8101 ··· 8283 8283 8284 8284 - (instancetype)init { if (self = \[super init]) { \_localStorage = \[\[NSUserDefaults alloc] initWithSuiteName:RCTNativeLocalStorageKey]; } return self; } 8285 8285 8286 8286 - - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params { return std::make_shared<facebook::react::NativeLocalStorageSpecJSI>(params); } 8286 8286 + - (std::shared\_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params { return std::make\_shared<facebook::react::NativeLocalStorageSpecJSI>(params); } 8287 8287 8288 8288 - (NSString \* \_Nullable)getItem:(NSString \*)key { return \[self.localStorage stringForKey:key]; } 8289 8289 ··· 8948 8948 8949 8949 The following table serves as a reference for supported types and their mappings across different platforms: 8950 8950 8951 8951 - | Flow | TypeScript | Flow Nullable Support | TypeScript Nullable Support | Android (Java) | iOS (ObjC) | 8952 8952 - | --- | --- | --- | --- | --- | --- | 8953 8953 - | `string` | `string` | `?string` | `string \| null` | `string` | `NSString` | 8954 8954 - | `boolean` | `boolean` | `?boolean` | `boolean \| null` | `Boolean` | `NSNumber` | 8955 8955 - | Object Literal `{ foo: string, ...}` | `{ foo: string, ...} as const` | `?{ foo: string, ...}` | `?{ foo: string, ...} as const` | - | - | 8956 8956 - | Object \[1] | Object \[1] | `?Object` | `Object \| null` | `ReadableMap` | `@` (untyped dictionary) | 8957 8957 - | `Array<T>` | `Array<T>` | `?Array<T>` | `Array<T> \| null` | `ReadableArray` | `NSArray` (or `RCTConvertVecToArray` when used inside objects) | 8958 8958 - | `Function` | `Function` | `?Function` | `Function \| null` | - | - | 8959 8959 - | `Promise<T>` | `Promise<T>` | `?Promise<T>` | `Promise<T> \| null` | `com.facebook.react.bridge.Promise` | `RCTPromiseResolve` and `RCTPromiseRejectBlock` | 8960 8960 - | Type Unions `'SUCCESS'\|'FAIL'` | Type Unions `'SUCCESS'\|'FAIL'` | Only as callbacks | | - | - | 8961 8961 - | Callbacks `() =>` | Callbacks `() =>` | Yes | | `com.facebook.react.bridge.Callback` | `RCTResponseSenderBlock` | 8962 8962 - | `number` | `number` | No | | `double` | `NSNumber` | 8951 8951 + |Flow|TypeScript|Flow Nullable Support|TypeScript Nullable Support|Android (Java)|iOS (ObjC)| 8952 8952 + |-|-|-|-|-|-| 8953 8953 + |`string`|`string`|`?string`|`string \| null`|`string`|`NSString`| 8954 8954 + |`boolean`|`boolean`|`?boolean`|`boolean \| null`|`Boolean`|`NSNumber`| 8955 8955 + |Object Literal `{ foo: string, ...}`|`{ foo: string, ...} as const`|`?{ foo: string, ...}`|`?{ foo: string, ...} as const`|-|-| 8956 8956 + |Object \[1]|Object \[1]|`?Object`|`Object \| null`|`ReadableMap`|`@` (untyped dictionary)| 8957 8957 + |`Array<T>`|`Array<T>`|`?Array<T>`|`Array<T> \| null`|`ReadableArray`|`NSArray` (or `RCTConvertVecToArray` when used inside objects)| 8958 8958 + |`Function`|`Function`|`?Function`|`Function \| null`|-|-| 8959 8959 + |`Promise<T>`|`Promise<T>`|`?Promise<T>`|`Promise<T> \| null`|`com.facebook.react.bridge.Promise`|`RCTPromiseResolve` and `RCTPromiseRejectBlock`| 8960 8960 + |Type Unions `'SUCCESS'\|'FAIL'`|Type Unions `'SUCCESS'\|'FAIL'`|Only as callbacks||-|-| 8961 8961 + |Callbacks `() =>`|Callbacks `() =>`|Yes||`com.facebook.react.bridge.Callback`|`RCTResponseSenderBlock`| 8962 8962 + |`number`|`number`|No||`double`|`NSNumber`| 8963 8963 8964 8964 #### Notes: 8965 8965 ··· 8995 8995 - A valid npm name (all lowercase, using `-` for word separation) 8996 8996 - A description for your package 8997 8997 8998 8998 - 1. Follow the interactive menu until you reach the question: _"What type of library do you want to develop?"_ 8998 8998 + 1. Follow the interactive menu until you reach the question: *"What type of library do you want to develop?"* 8999 8999 9000 9000 - 1. Select _Turbo module_ for this guide. You can create libraries for both New and Legacy Architectures. 9000 9000 + 1. Select *Turbo module* for this guide. You can create libraries for both New and Legacy Architectures. 9001 9001 9002 9002 1. Choose whether your library will access platform-specific code (Kotlin & Objective-C) or use a shared C++ library. 9003 9003 ··· 9417 9417 9418 9418 Not all libraries require this step. Consider: 9419 9419 9420 9420 - _Do I need to know the contents of the library at compile time?_ 9420 9420 + *Do I need to know the contents of the library at compile time?* 9421 9421 9422 9422 This means, are you using the library on the native side or only in JavaScript? If it's just JavaScript, no further action is needed. 9423 9423 ··· 9669 9669 9670 9670 ##### Parameters: 9671 9671 9672 9672 - | Name | Type | Required | Description | 9673 9673 - | --- | --- | --- | --- | 9674 9674 - | config | object | Yes | Configuration details (see below). | 9675 9675 - | onAnimationDidEnd | function | No | Callback when the animation finishes. | 9676 9676 - | onAnimationDidFail | function | No | Callback if the animation fails. | 9672 9672 + |Name|Type|Required|Description| 9673 9673 + |-|-|-|-| 9674 9674 + |config|object|Yes|Configuration details (see below).| 9675 9675 + |onAnimationDidEnd|function|No|Callback when the animation finishes.| 9676 9676 + |onAnimationDidFail|function|No|Callback if the animation fails.| 9677 9677 9678 9678 The `config` parameter is an object with the following keys: 9679 9679 ··· 9707 9707 9708 9708 An enumeration of animation types used in the `create` method or within the `create`/`update`/`delete` configurations for `configureNext`. 9709 9709 9710 9710 - | Type | 9711 9711 - | ------------- | 9712 9712 - | spring | 9713 9713 - | linear | 9714 9714 - | easeInEaseOut | 9715 9715 - | easeIn | 9716 9716 - | easeOut | 9717 9717 - | keyboard | 9710 9710 + |Type| 9711 9711 + |-| 9712 9712 + |spring| 9713 9713 + |linear| 9714 9714 + |easeInEaseOut| 9715 9715 + |easeIn| 9716 9716 + |easeOut| 9717 9717 + |keyboard| 9718 9718 9719 9719 #### Properties 9720 9720 9721 9721 An enumeration of layout properties that can be animated, used in the `create` method or within the `create`/`update`/`delete` configurations for `configureNext`. 9722 9722 9723 9723 - | Property | 9724 9724 - | -------- | 9725 9725 - | opacity | 9726 9726 - | scaleX | 9727 9727 - | scaleY | 9728 9728 - | scaleXY | 9723 9723 + |Property| 9724 9724 + |-| 9725 9725 + |opacity| 9726 9726 + |scaleX| 9727 9727 + |scaleY| 9728 9728 + |scaleXY| 9729 9729 9730 9730 #### Presets 9731 9731 9732 9732 Predefined animation configurations to use with `configureNext`. 9733 9733 9734 9734 - | Preset | Value | 9735 9735 - | --- | --- | 9736 9736 - | easeInEaseOut | `{ create: { type: 'easeInEaseOut', property: 'opacity' } }` | 9737 9737 - | linear | `{ create: { type: 'linear', property: 'opacity' } }` | 9738 9738 - | spring | `{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }` | 9734 9734 + |Preset|Value| 9735 9735 + |-|-| 9736 9736 + |easeInEaseOut|`{ create: { type: 'easeInEaseOut', property: 'opacity' } }`| 9737 9737 + |linear|`{ create: { type: 'linear', property: 'opacity' } }`| 9738 9738 + |spring|`{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }`| 9739 9739 9740 9740 #### `easeInEaseOut` 9741 9741 ··· 9794 9794 - `'dark'`: User prefers a dark theme. 9795 9795 - `null`: No preference indicated. 9796 9796 9797 9797 - _Note_: When debugging with Chrome, this method always returns `'light'`. 9797 9797 + *Note*: When debugging with Chrome, this method always returns `'light'`. 9798 9798 9799 9799 ##### `setColorScheme()` 9800 9800 ··· 9810 9810 - `'dark'`: Apply dark user interface. 9811 9811 - `null`: Follow the system's interface style. 9812 9812 9813 9813 - _Note_: This change does not affect other applications or the system's overall settings. 9813 9813 + *Note*: This change does not affect other applications or the system's overall settings. 9814 9814 9815 9815 ##### `addChangeListener()` 9816 9816 ··· 9908 9908 9909 9909 **Parameters:** 9910 9910 9911 9911 - | Name | Type | Description | 9912 9912 - | --- | --- | --- | 9913 9913 - | **taskKey** | `string` | Required, the native ID for this task instance used when startHeadlessTask was called. | 9914 9914 - | **taskProvider** | `TaskProvider` | Required, a promise-returning function that takes data from the native side as an argument. When resolved or rejected, the native side is notified and may destroy the JS context. | 9915 9915 - | **taskCancelProvider** | `TaskCancelProvider` | Required, a void-returning function with no arguments; when cancellation is requested, the taskProvider should wrap up and return ASAP. | 9911 9911 + |Name|Type|Description| 9912 9912 + |-|-|-| 9913 9913 + |**taskKey**|`string`|Required, the native ID for this task instance used when startHeadlessTask was called.| 9914 9914 + |**taskProvider**|`TaskProvider`|Required, a promise-returning function that takes data from the native side as an argument. When resolved or rejected, the native side is notified and may destroy the JS context.| 9915 9915 + |**taskCancelProvider**|`TaskCancelProvider`|Required, a void-returning function with no arguments; when cancellation is requested, the taskProvider should wrap up and return ASAP.| 9916 9916 9917 9917 ##### `registerComponent()` 9918 9918 ··· 9926 9926 9927 9927 **Parameters:** 9928 9928 9929 9929 - | Name | Type | | 9930 9930 - | -------------------- | ------------------- | -------- | 9931 9931 - | **appKey** | `string` | | 9932 9932 - | **getComponentFunc** | `ComponentProvider` | Required | 9933 9933 - | **section** | `boolean` | | 9929 9929 + |Name|Type|| 9930 9930 + |-|-|-| 9931 9931 + |**appKey**|`string`|| 9932 9932 + |**getComponentFunc**|`ComponentProvider`|Required| 9933 9933 + |**section**|`boolean`|| 9934 9934 9935 9935 ##### `registerConfig()` 9936 9936 ··· 9955 9955 9956 9956 **Parameters:** 9957 9957 9958 9958 - | Name | Type | Description | 9959 9959 - | --- | --- | --- | 9960 9960 - | **taskKey** | `string` | Required, the native ID for this task instance used when startHeadlessTask was called. | 9961 9961 - | **taskProvider** | `TaskProvider` | Required, a promise-returning function that takes data from the native side as an argument. When resolved or rejected, the native side is notified and may destroy the JS context. | 9958 9958 + |Name|Type|Description| 9959 9959 + |-|-|-| 9960 9960 + |**taskKey**|`string`|Required, the native ID for this task instance used when startHeadlessTask was called.| 9961 9961 + |**taskProvider**|`TaskProvider`|Required, a promise-returning function that takes data from the native side as an argument. When resolved or rejected, the native side is notified and may destroy the JS context.| 9962 9962 9963 9963 ##### `registerRunnable()` 9964 9964 ··· 9968 9968 9969 9969 **Parameters:** 9970 9970 9971 9971 - | Name | Type | 9972 9972 - | ---------- | ---------- | 9973 9973 - | **appKey** | `string` | 9974 9974 - | **func** | `function` | 9971 9971 + |Name|Type| 9972 9972 + |-|-| 9973 9973 + |**appKey**|`string`| 9974 9974 + |**func**|`function`| 9975 9975 9976 9976 ##### `registerSection()` 9977 9977 ··· 9984 9984 9985 9985 **Parameters:** 9986 9986 9987 9987 - | Name | Type | | 9988 9988 - | ------------- | ------------------- | -------- | 9989 9989 - | **appKey** | `string` | | 9990 9990 - | **component** | `ComponentProvider` | Required | 9987 9987 + |Name|Type|| 9988 9988 + |-|-|-| 9989 9989 + |**appKey**|`string`|| 9990 9990 + |**component**|`ComponentProvider`|Required| 9991 9991 9992 9992 ##### `runApplication()` 9993 9993 ··· 9999 9999 10000 10000 **Parameters:** 10001 10001 10002 10002 - | Name | Type | 10003 10003 - | ----------------- | -------- | 10004 10004 - | **appKey** | `string` | 10005 10005 - | **appParameters** | `any` | 10002 10002 + |Name|Type| 10003 10003 + |-|-| 10004 10004 + |**appKey**|`string`| 10005 10005 + |**appParameters**|`any`| 10006 10006 10007 10007 ##### `setComponentProviderInstrumentationHook()` 10008 10008 ··· 10018 10018 10019 10019 A valid `hook` function accepts the following as arguments: 10020 10020 10021 10021 - | Name | Type | | 10022 10022 - | --------------------------- | -------------------- | -------- | 10023 10023 - | **component** | `ComponentProvider` | Required | 10024 10024 - | **scopedPerformanceLogger** | `IPerformanceLogger` | Required | 10021 10021 + |Name|Type|| 10022 10022 + |-|-|-| 10023 10023 + |**component**|`ComponentProvider`|Required| 10024 10024 + |**scopedPerformanceLogger**|`IPerformanceLogger`|Required| 10025 10025 10026 10026 The function must return a React Component. 10027 10027 ··· 10051 10051 10052 10052 **Parameters:** 10053 10053 10054 10054 - | Name | Type | Description | 10055 10055 - | --- | --- | --- | 10056 10056 - | **taskId** | `number` | Required, the native ID for this task instance to track its execution. | 10057 10057 - | **taskKey** | `string` | Required, the key for the task to start. | 10058 10058 - | **data** | `any` | Required, the data to pass to the task. | 10054 10054 + |Name|Type|Description| 10055 10055 + |-|-|-| 10056 10056 + |**taskId**|`number`|Required, the native ID for this task instance to track its execution.| 10057 10057 + |**taskKey**|`string`|Required, the key for the task to start.| 10058 10058 + |**data**|`any`|Required, the data to pass to the task.| 10059 10059 10060 10060 ##### `unmountApplicationComponentAtRootTag()` 10061 10061 ··· 10079 10079 10080 10080 **Properties:** 10081 10081 10082 10082 - | Name | Type | | 10083 10083 - | ---------- | ------------------- | -------- | 10084 10084 - | **appKey** | `string` | Required | 10085 10085 - | component | `ComponentProvider` | | 10086 10086 - | run | `function` | | 10087 10087 - | section | `boolean` | | 10082 10082 + |Name|Type|| 10083 10083 + |-|-|-| 10084 10084 + |**appKey**|`string`|Required| 10085 10085 + |component|`ComponentProvider`|| 10086 10086 + |run|`function`|| 10087 10087 + |section|`boolean`|| 10088 10088 10089 10089 > **Note:** Every config must set either the `component` or `run` function. 10090 10090 ··· 10094 10094 10095 10095 **Properties:** 10096 10096 10097 10097 - | Name | Type | 10098 10098 - | --------- | ------------------ | 10099 10099 - | runnables | Array of Runnables | 10100 10100 - | sections | Array of strings | 10097 10097 + |Name|Type| 10098 10098 + |-|-| 10099 10099 + |runnables|Array of Runnables| 10100 10100 + |sections|Array of strings| 10101 10101 10102 10102 #### Runnable 10103 10103 ··· 10105 10105 10106 10106 **Properties:** 10107 10107 10108 10108 - | Name | Type | 10109 10109 - | --------- | ------------------- | 10110 10110 - | component | `ComponentProvider` | 10111 10111 - | run | `function` | 10108 10108 + |Name|Type| 10109 10109 + |-|-| 10110 10110 + |component|`ComponentProvider`| 10111 10111 + |run|`function`| 10112 10112 10113 10113 #### Runnables 10114 10114 ··· 10279 10279 10280 10280 Default renderer for every item in every section. Can be overridden per-section. Should return a React element. 10281 10281 10282 10282 - | Type | 10283 10283 - | -------- | 10284 10284 - | function | 10282 10282 + |Type| 10283 10283 + |-| 10284 10284 + |function| 10285 10285 10286 10286 The render function receives an object with: 10287 10287 ··· 10299 10299 10300 10300 The data to render, similar to the `data` prop in `FlatList`. 10301 10301 10302 10302 - | Type | 10303 10303 - | ----------------- | 10304 10304 - | array of Sections | 10302 10302 + |Type| 10303 10303 + |-| 10304 10304 + |array of Sections| 10305 10305 10306 10306 ##### `extraData` 10307 10307 10308 10308 A marker property for re-rendering since it implements `PureComponent`. Use this if your `renderItem`, Header, Footer, etc., depend on anything outside the `data` prop. Treat it immutably. 10309 10309 10310 10310 - | Type | 10311 10311 - | ---- | 10312 10312 - | any | 10310 10310 + |Type| 10311 10311 + |-| 10312 10312 + |any| 10313 10313 10314 10314 ##### `initialNumToRender` 10315 10315 10316 10316 Number of items to render initially. Should fill the screen but not much more. These items won't be unmounted for improved scroll-to-top performance. 10317 10317 10318 10318 - | Type | Default | 10319 10319 - | ------ | ------- | 10320 10320 - | number | `10` | 10318 10318 + |Type|Default| 10319 10319 + |-|-| 10320 10320 + |number|`10`| 10321 10321 10322 10322 ##### `inverted` 10323 10323 10324 10324 Reverses the direction of scroll using scale transforms of -1. 10325 10325 10326 10326 - | Type | Default | 10327 10327 - | ------- | ------- | 10328 10328 - | boolean | `false` | 10326 10326 + |Type|Default| 10327 10327 + |-|-| 10328 10328 + |boolean|`false`| 10329 10329 10330 10330 ##### `ItemSeparatorComponent` 10331 10331 10332 10332 Rendered between each item, excluding top and bottom. By default, provides `highlighted`, `section`, and `[leading/trailing][Item/Section]` props. `renderItem` offers `separators.highlight`/`unhighlight` to update the `highlighted` prop, with custom props via `separators.updateProps`. Can be a React Component or element. 10333 10333 10334 10334 - | Type | 10335 10335 - | ---------------------------- | 10336 10336 - | component, function, element | 10334 10334 + |Type| 10335 10335 + |-| 10336 10336 + |component, function, element| 10337 10337 10338 10338 ##### `keyExtractor` 10339 10339 10340 10340 Extracts a unique key for an item at a specified index. Used for caching and tracking item re-ordering. Defaults to checking `item.key`, then `item.id`, and falls back to the index. 10341 10341 10342 10342 - | Type | 10343 10343 - | --------------------------------------- | 10344 10344 - | (item: object, index: number) => string | 10342 10342 + |Type| 10343 10343 + |-| 10344 10344 + |(item: object, index: number) => string| 10345 10345 10346 10346 ##### `ListEmptyComponent` 10347 10347 10348 10348 Rendered when the list is empty. Can be a React Component or element. 10349 10349 10350 10350 - | Type | 10351 10351 - | ------------------ | 10352 10352 - | component, element | 10350 10350 + |Type| 10351 10351 + |-| 10352 10352 + |component, element| 10353 10353 10354 10354 ##### `ListFooterComponent` 10355 10355 10356 10356 Rendered at the end of the list. Can be a React Component or element. 10357 10357 10358 10358 - | Type | 10359 10359 - | ------------------ | 10360 10360 - | component, element | 10358 10358 + |Type| 10359 10359 + |-| 10360 10360 + |component, element| 10361 10361 10362 10362 ##### `ListHeaderComponent` 10363 10363 10364 10364 Rendered at the beginning of the list. Can be a React Component or element. 10365 10365 10366 10366 - | Type | 10367 10367 - | ------------------ | 10368 10368 - | component, element | 10366 10366 + |Type| 10367 10367 + |-| 10368 10368 + |component, element| 10369 10369 10370 10370 ##### `onRefresh` 10371 10371 10372 10372 Adds "Pull to Refresh" functionality if provided. Ensure the `refreshing` prop is set correctly. Use `progressViewOffset={100}` to offset from the top. 10373 10373 10374 10374 - | Type | 10375 10375 - | -------- | 10376 10376 - | function | 10374 10374 + |Type| 10375 10375 + |-| 10376 10376 + |function| 10377 10377 10378 10378 ##### `onViewableItemsChanged` 10379 10379 10380 10380 Called when viewability of rows changes, as defined by the `viewabilityConfig` prop. 10381 10381 10382 10382 - | Type | 10383 10383 - | ------------------------------------------------------------------------ | 10384 10384 - | `(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void` | 10382 10382 + |Type| 10383 10383 + |-| 10384 10384 + |`(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void`| 10385 10385 10386 10386 ##### `refreshing` 10387 10387 10388 10388 Set to true while waiting for new data from a refresh. 10389 10389 10390 10390 - | Type | Default | 10391 10391 - | ------- | ------- | 10392 10392 - | boolean | `false` | 10390 10390 + |Type|Default| 10391 10391 + |-|-| 10392 10392 + |boolean|`false`| 10393 10393 10394 10394 ##### `removeClippedSubviews` 10395 10395 10396 10396 > Note: May have bugs (missing content) in some circumstances - use at your own risk. This may improve scroll performance for large lists. 10397 10397 10398 10398 - | Type | Default | 10399 10399 - | ------- | ------- | 10400 10400 - | boolean | `false` | 10398 10398 + |Type|Default| 10399 10399 + |-|-| 10400 10400 + |boolean|`false`| 10401 10401 10402 10402 ##### `renderSectionFooter` 10403 10403 10404 10404 Rendered at the bottom of each section. 10405 10405 10406 10406 - | Type | 10407 10407 - | ----------------------------------------------- | 10408 10408 - | `(info: {section: Section}) => element ｜ null` | 10406 10406 + |Type| 10407 10407 + |-| 10408 10408 + |`(info: {section: Section}) => element ｜ null`| 10409 10409 10410 10410 ##### `renderSectionHeader` 10411 10411 10412 10412 Rendered at the top of each section. Sticks to the top by default on iOS unless `stickySectionHeadersEnabled` is set otherwise. 10413 10413 10414 10414 - | Type | 10415 10415 - | ----------------------------------------------- | 10416 10416 - | `(info: {section: Section}) => element ｜ null` | 10414 10414 + |Type| 10415 10415 + |-| 10416 10416 + |`(info: {section: Section}) => element ｜ null`| 10417 10417 10418 10418 ##### `SectionSeparatorComponent` 10419 10419 10420 10420 Rendered at the top and bottom of each section, different from `ItemSeparatorComponent`. Receives `highlighted`, `[leading/trailing][Item/Section]`, and custom props via `separators.updateProps`. 10421 10421 10422 10422 - | Type | 10423 10423 - | ------------------ | 10424 10424 - | component, element | 10422 10422 + |Type| 10423 10423 + |-| 10424 10424 + |component, element| 10425 10425 10426 10426 ##### `stickySectionHeadersEnabled` 10427 10427 10428 10428 Makes section headers stick to the top of the screen until pushed off by the next one. Enabled by default on iOS. 10429 10429 10430 10430 - | Type | Default | 10431 10431 - | ------- | ----------------------------- | 10432 10432 - | boolean | `false`Android\*\*\*`true`iOS | 10430 10430 + |Type|Default| 10431 10431 + |-|-| 10432 10432 + |boolean|`false`Android\*\*\*`true`iOS| 10433 10433 10434 10434 ### Methods 10435 10435 ··· 10459 10459 10460 10460 **Parameters:** 10461 10461 10462 10462 - | Name | Type | 10463 10463 - | -------------- | ------ | 10464 10464 - | paramsRequired | object | 10462 10462 + |Name|Type| 10463 10463 + |-|-| 10464 10464 + |paramsRequired|object| 10465 10465 10466 10466 Valid `params` keys: 10467 10467 ··· 10477 10477 10478 10478 An object identifying data to be rendered for a given section. 10479 10479 10480 10480 - | Type | 10481 10481 - | ---- | 10482 10482 - | any | 10480 10480 + |Type| 10481 10481 + |-| 10482 10482 + |any| 10483 10483 10484 10484 **Properties:** 10485 10485 10486 10486 - | Name | Type | Description | 10487 10487 - | --- | --- | --- | 10488 10488 - | dataRequired | array | Data for rendering items in this section. Array of objects, similar to `FlatList`'s data prop. | 10489 10489 - | key | string | Optional key for tracking section re-ordering. Defaults to array index if not specified. | 10490 10490 - | renderItem | function | Optionally define an arbitrary item renderer for this section, overriding the default `renderItem`. | 10491 10491 - | ItemSeparatorComponent | component, element | Optionally define an arbitrary item separator for this section, overriding the default `ItemSeparatorComponent`. | 10492 10492 - | keyExtractor | function | Optionally define a custom key extractor for this section, overriding the default `keyExtractor`. | 10486 10486 + |Name|Type|Description| 10487 10487 + |-|-|-| 10488 10488 + |dataRequired|array|Data for rendering items in this section. Array of objects, similar to `FlatList`'s data prop.| 10489 10489 + |key|string|Optional key for tracking section re-ordering. Defaults to array index if not specified.| 10490 10490 + |renderItem|function|Optionally define an arbitrary item renderer for this section, overriding the default `renderItem`.| 10491 10491 + |ItemSeparatorComponent|component, element|Optionally define an arbitrary item separator for this section, overriding the default `ItemSeparatorComponent`.| 10492 10492 + |keyExtractor|function|Optionally define a custom key extractor for this section, overriding the default `keyExtractor`.| 10493 10493 10494 10494 ## AccessibilityInfo 10495 10495 ··· 10497 10497 10498 10498 ### Example 10499 10499 10500 10500 - _Example content omitted._ 10500 10500 + *Example content omitted.* 10501 10501 10502 10502 ### Reference 10503 10503 ··· 10516 10516 10517 10517 Adds an event handler for various accessibility-related events. Supported events include: 10518 10518 10519 10519 - | Event Name | Description | 10520 10520 - | --- | --- | 10521 10521 - | `accessibilityServiceChanged` (Android) | Fires when any accessibility services, such as TalkBack or third-party apps, are enabled. The argument is a boolean: `true` if enabled, otherwise `false`. | 10522 10522 - | `announcementFinished` (iOS) | Fires after the screen reader finishes an announcement. Argument includes: - `announcement`: The announced string.<br>- `success`: Boolean indicating success of the announcement. | 10523 10523 - | `boldTextChanged` (iOS) | Fires when bold text toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`. | 10524 10524 - | `grayscaleChanged` (iOS) | Fires when grayscale toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`. | 10525 10525 - | `invertColorsChanged` (iOS) | Fires when invert colors toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`. | 10526 10526 - | `reduceMotionChanged` | Fires when reduce motion toggle state changes. Argument is a boolean: `true` if enabled or "Animation off" in Developer options, otherwise `false`. | 10527 10527 - | `reduceTransparencyChanged` (iOS) | Fires when reduce transparency toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`. | 10528 10528 - | `screenReaderChanged` | Fires when the screen reader's state changes. Argument is a boolean: `true` if enabled, otherwise `false`. | 10519 10519 + |Event Name|Description| 10520 10520 + |-|-| 10521 10521 + |`accessibilityServiceChanged` (Android)|Fires when any accessibility services, such as TalkBack or third-party apps, are enabled. The argument is a boolean: `true` if enabled, otherwise `false`.| 10522 10522 + |`announcementFinished` (iOS)|Fires after the screen reader finishes an announcement. Argument includes: - `announcement`: The announced string.<br>- `success`: Boolean indicating success of the announcement.| 10523 10523 + |`boldTextChanged` (iOS)|Fires when bold text toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`.| 10524 10524 + |`grayscaleChanged` (iOS)|Fires when grayscale toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`.| 10525 10525 + |`invertColorsChanged` (iOS)|Fires when invert colors toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`.| 10526 10526 + |`reduceMotionChanged`|Fires when reduce motion toggle state changes. Argument is a boolean: `true` if enabled or "Animation off" in Developer options, otherwise `false`.| 10527 10527 + |`reduceTransparencyChanged` (iOS)|Fires when reduce transparency toggle state changes. Argument is a boolean: `true` if enabled, otherwise `false`.| 10528 10528 + |`screenReaderChanged`|Fires when the screen reader's state changes. Argument is a boolean: `true` if enabled, otherwise `false`.| 10529 10529 10530 10530 ##### `announceForAccessibility()` 10531 10531 ··· 10548 10548 10549 10549 **Parameters:** 10550 10550 10551 10551 - | Name | Type | Description | 10552 10552 - | --- | --- | --- | 10553 10553 - | announcement | string | The string to be announced. | 10554 10554 - | options | object | Contains `queue`: If set to `true`, queues the announcement behind existing speech on iOS. | 10551 10551 + |Name|Type|Description| 10552 10552 + |-|-|-| 10553 10553 + |announcement|string|The string to be announced.| 10554 10554 + |options|object|Contains `queue`: If set to `true`, queues the announcement behind existing speech on iOS.| 10555 10555 10556 10556 ##### `getRecommendedTimeoutMillis()` (Android) 10557 10557 ··· 10563 10563 10564 10564 **Parameters:** 10565 10565 10566 10566 - | Name | Type | Description | 10567 10567 - | --- | --- | --- | 10568 10568 - | originalTimeout | number | The fallback timeout in milliseconds if no accessibility timeout is set. | 10566 10566 + |Name|Type|Description| 10567 10567 + |-|-|-| 10568 10568 + |originalTimeout|number|The fallback timeout in milliseconds if no accessibility timeout is set.| 10569 10569 10570 10570 ##### `isAccessibilityServiceEnabled()` (Android) 10571 10571 ··· 10699 10699 10700 10700 ### Example 10701 10701 10702 10702 - --- 10702 10702 + *** 10703 10703 10704 10704 ### Reference 10705 10705 ··· 10715 10715 10716 10716 **Properties:** 10717 10717 10718 10718 - | Name | Type | Optional | Description | 10719 10719 - | --- | --- | --- | --- | 10720 10720 - | isTesting | boolean | No | | 10721 10721 - | reactNativeVersion | object | No | Information about React Native version. Keys are `major`, `minor`, `patch` with optional `prerelease` and values are `number`s. | 10722 10722 - | VersionAndroid | number | No | OS version constant specific to Android. | 10723 10723 - | ReleaseAndroid | string | No | | 10724 10724 - | SerialAndroid | string | No | Hardware serial number of an Android device. | 10725 10725 - | FingerprintAndroid | string | No | A unique identifier for the build. | 10726 10726 - | ModelAndroid | string | No | The end-user-visible name for the Android device. | 10727 10727 - | BrandAndroid | string | No | The consumer-visible brand associated with the product/hardware. | 10728 10728 - | ManufacturerAndroid | string | No | The manufacturer of the Android device. | 10729 10729 - | ServerHostAndroid | string | Yes | | 10730 10730 - | uiModeAndroid | string | No | Possible values: `'car'`, `'desk'`, `'normal'`,`'tv'`, `'watch'` and `'unknown'`. Read more about Android ModeType. | 10731 10731 - | forceTouchAvailableiOS | boolean | No | Indicates the availability of 3D Touch on a device. | 10732 10732 - | interfaceIdiomiOS | string | No | The interface type for the device. Read more about UIUserInterfaceIdiom. | 10733 10733 - | osVersioniOS | string | No | OS version constant specific to iOS. | 10734 10734 - | systemNameiOS | string | No | OS name constant specific to iOS. | 10718 10718 + |Name|Type|Optional|Description| 10719 10719 + |-|-|-|-| 10720 10720 + |isTesting|boolean|No|| 10721 10721 + |reactNativeVersion|object|No|Information about React Native version. Keys are `major`, `minor`, `patch` with optional `prerelease` and values are `number`s.| 10722 10722 + |VersionAndroid|number|No|OS version constant specific to Android.| 10723 10723 + |ReleaseAndroid|string|No|| 10724 10724 + |SerialAndroid|string|No|Hardware serial number of an Android device.| 10725 10725 + |FingerprintAndroid|string|No|A unique identifier for the build.| 10726 10726 + |ModelAndroid|string|No|The end-user-visible name for the Android device.| 10727 10727 + |BrandAndroid|string|No|The consumer-visible brand associated with the product/hardware.| 10728 10728 + |ManufacturerAndroid|string|No|The manufacturer of the Android device.| 10729 10729 + |ServerHostAndroid|string|Yes|| 10730 10730 + |uiModeAndroid|string|No|Possible values: `'car'`, `'desk'`, `'normal'`,`'tv'`, `'watch'` and `'unknown'`. Read more about Android ModeType.| 10731 10731 + |forceTouchAvailableiOS|boolean|No|Indicates the availability of 3D Touch on a device.| 10732 10732 + |interfaceIdiomiOS|string|No|The interface type for the device. Read more about UIUserInterfaceIdiom.| 10733 10733 + |osVersioniOS|string|No|OS version constant specific to iOS.| 10734 10734 + |systemNameiOS|string|No|OS name constant specific to iOS.| 10735 10735 10736 10736 - --- 10736 10736 + *** 10737 10737 10738 10738 #### `isPad`iOS 10739 10739 ··· 10743 10743 10744 10744 Returns a boolean indicating if the device is an iPad. 10745 10745 10746 10746 - | Type | 10747 10747 - | ------- | 10748 10748 - | boolean | 10746 10746 + |Type| 10747 10747 + |-| 10748 10748 + |boolean| 10749 10749 10750 10750 - --- 10750 10750 + *** 10751 10751 10752 10752 #### `isTV` 10753 10753 ··· 10757 10757 10758 10758 Returns a boolean indicating if the device is a TV. 10759 10759 10760 10760 - | Type | 10761 10761 - | ------- | 10762 10762 - | boolean | 10760 10760 + |Type| 10761 10761 + |-| 10762 10762 + |boolean| 10763 10763 10764 10764 - --- 10764 10764 + *** 10765 10765 10766 10766 #### `isVision` 10767 10767 ··· 10771 10771 10772 10772 Returns a boolean indicating if the device is an Apple Vision. Note that for Apple Vision Pro (Designed for iPad), `isVision` will be `false`, but `isPad` will be `true`. 10773 10773 10774 10774 - | Type | 10775 10775 - | ------- | 10776 10776 - | boolean | 10774 10774 + |Type| 10775 10775 + |-| 10776 10776 + |boolean| 10777 10777 10778 10778 - --- 10778 10778 + *** 10779 10779 10780 10780 #### `isTesting` 10781 10781 ··· 10785 10785 10786 10786 Returns a boolean indicating if the application is running in Developer Mode with the testing flag set. 10787 10787 10788 10788 - | Type | 10789 10789 - | ------- | 10790 10790 - | boolean | 10788 10788 + |Type| 10789 10789 + |-| 10790 10790 + |boolean| 10791 10791 10792 10792 - --- 10792 10792 + *** 10793 10793 10794 10794 #### `OS` 10795 10795 ··· 10799 10799 10800 10800 Returns a string representing the current operating system. 10801 10801 10802 10802 - | Type | 10803 10803 - | -------------------------- | 10804 10804 - | enum(`'android'`, `'ios'`) | 10802 10802 + |Type| 10803 10803 + |-| 10804 10804 + |enum(`'android'`, `'ios'`)| 10805 10805 10806 10806 - --- 10806 10806 + *** 10807 10807 10808 10808 #### `Version` 10809 10809 ··· 10813 10813 10814 10814 Returns the version of the OS, as either a number for Android or a string for iOS. 10815 10815 10816 10816 - | Type | 10817 10817 - | ---------------------------- | 10818 10818 - | numberAndroid\*\*\*stringiOS | 10816 10816 + |Type| 10817 10817 + |-| 10818 10818 + |numberAndroid\*\*\*stringiOS| 10819 10819 10820 10820 ### Methods 10821 10821 ··· 10829 10829 10830 10830 ##### Parameters: 10831 10831 10832 10832 - | Name | Type | Required | Description | 10833 10833 - | ------ | ------ | -------- | ------------------------------------ | 10834 10834 - | config | object | Yes | See configuration description below. | 10832 10832 + |Name|Type|Required|Description| 10833 10833 + |-|-|-|-| 10834 10834 + |config|object|Yes|See configuration description below.| 10835 10835 10836 10836 The `select` method returns the most appropriate value based on the current platform. If running on a phone, keys for `android` and `ios` take precedence. If these are not specified, the `native` key is used, followed by the `default` key. 10837 10837 ··· 11453 11453 11454 11454 **Parameters:** 11455 11455 11456 11456 - | Name | Type | 11457 11457 - | ------- | -------- | 11458 11458 - | title | string | 11459 11459 - | handler | function | 11456 11456 + |Name|Type| 11457 11457 + |-|-| 11458 11458 + |title|string| 11459 11459 + |handler|function| 11460 11460 11461 11461 **Example Usage:** 11462 11462 ··· 11480 11480 <Button title="Reload" onPress={() => DevSettings.reload()} /> 11481 11481 ``` 11482 11482 11483 11483 - --- 11483 11483 + *** 11484 11484 11485 11485 ### Related Modules 11486 11486 ··· 11555 11555 11556 11556 **Properties:** 11557 11557 11558 11558 - | Name | Type | Description | 11559 11559 - | --- | --- | --- | 11560 11560 - | contentRequired | object | - `message`: A message to share<br>- `url`: A URL to share<br>- iOS: `title`: Title of the message<br>- Android: At least one of `url` or `message` is required. | 11561 11561 - | options | object | - Android: `dialogTitle`<br>- iOS: `excludedActivityTypes`, `subject` (a subject for email), `tintColor`, `anchor` (node to anchor the action sheet, used on iPad) | 11558 11558 + |Name|Type|Description| 11559 11559 + |-|-|-| 11560 11560 + |contentRequired|object|- `message`: A message to share<br>- `url`: A URL to share<br>- iOS: `title`: Title of the message<br>- Android: At least one of `url` or `message` is required.| 11561 11561 + |options|object|- Android: `dialogTitle`<br>- iOS: `excludedActivityTypes`, `subject` (a subject for email), `tintColor`, `anchor` (node to anchor the action sheet, used on iPad)| 11562 11562 11563 11563 ### Properties 11564 11564 ··· 11589 11589 - A **React element**, which results from JSX. 11590 11590 - An array containing any of the above types, potentially nested. 11591 11591 11592 11592 - --- 11592 11592 + *** 11593 11593 11594 11594 ### Related Object Types 11595 11595 ··· 11600 11600 - Rect Object Type 11601 11601 - ViewToken Object Type 11602 11602 11603 11603 - --- 11603 11603 + *** 11604 11604 11605 11605 #### Navigation 11606 11606 ··· 11713 11713 11714 11714 - `change`: Triggers when a property within the `Dimensions` object changes. The argument to the event handler is of type `DimensionsValue`. 11715 11715 11716 11716 - --- 11716 11716 + *** 11717 11717 11718 11718 #### `get()` 11719 11719 ··· 11731 11731 11732 11732 **Parameters:** 11733 11733 11734 11734 - | Name | Type | Description | 11735 11735 - | --- | --- | --- | 11736 11736 - | dimRequired | string | The name of the dimension as defined when calling `set`. Returns value for the dimension. | 11734 11734 + |Name|Type|Description| 11735 11735 + |-|-|-| 11736 11736 + |dimRequired|string|The name of the dimension as defined when calling `set`. Returns value for the dimension.| 11737 11737 11738 11738 > Note: On Android, the `window` dimension excludes the size used by the status bar (if not translucent) and bottom navigation bar. 11739 11739 11740 11740 - --- 11740 11740 + *** 11741 11741 11742 11742 ### Type Definitions 11743 11743 ··· 11745 11745 11746 11746 **Properties:** 11747 11747 11748 11748 - | Name | Type | Description | 11749 11749 - | ------ | ---------- | --------------------------------------- | 11750 11750 - | window | ScaledSize | Size of the visible Application window. | 11751 11751 - | screen | ScaledSize | Size of the device's screen. | 11748 11748 + |Name|Type|Description| 11749 11749 + |-|-|-| 11750 11750 + |window|ScaledSize|Size of the visible Application window.| 11751 11751 + |screen|ScaledSize|Size of the device's screen.| 11752 11752 11753 11753 #### ScaledSize 11754 11754 11755 11755 - | Type | 11756 11756 - | ------ | 11757 11757 - | object | 11755 11755 + |Type| 11756 11756 + |-| 11757 11757 + |object| 11758 11758 11759 11759 **Properties:** 11760 11760 11761 11761 - | Name | Type | 11762 11762 - | --------- | ------ | 11763 11763 - | width | number | 11764 11764 - | height | number | 11765 11765 - | scale | number | 11766 11766 - | fontScale | number | 11761 11761 + |Name|Type| 11762 11762 + |-|-| 11763 11763 + |width|number| 11764 11764 + |height|number| 11765 11765 + |scale|number| 11766 11766 + |fontScale|number| 11767 11767 11768 11768 ## Props in React Native 11769 11769 ··· 11830 11830 11831 11831 **Parameters:** 11832 11832 11833 11833 - - **value**: _number_ (Required) - The new value to set. 11833 11833 + - **value**: *number* (Required) - The new value to set. 11834 11834 11835 11835 ##### `setOffset()` 11836 11836 ··· 11842 11842 11843 11843 **Parameters:** 11844 11844 11845 11845 - - **offset**: _number_ (Required) - The offset value to apply. 11845 11845 + - **offset**: *number* (Required) - The offset value to apply. 11846 11846 11847 11847 ##### `flattenOffset()` 11848 11848 ··· 11870 11870 11871 11871 **Parameters:** 11872 11872 11873 11873 - - **callback**: _function_ (Required) - A function receiving an object with a `value` key set to the new value. 11873 11873 + - **callback**: *function* (Required) - A function receiving an object with a `value` key set to the new value. 11874 11874 11875 11875 ##### `removeListener()` 11876 11876 ··· 11882 11882 11883 11883 **Parameters:** 11884 11884 11885 11885 - - **id**: _string_ (Required) - The identifier of the listener being removed. 11885 11885 + - **id**: *string* (Required) - The identifier of the listener being removed. 11886 11886 11887 11887 ##### `removeAllListeners()` 11888 11888 ··· 11902 11902 11903 11903 **Parameters:** 11904 11904 11905 11905 - - **callback**: _function_ (Optional) - A function receiving the final value after stopping the animation. 11905 11905 + - **callback**: *function* (Optional) - A function receiving the final value after stopping the animation. 11906 11906 11907 11907 ##### `resetAnimation()` 11908 11908 ··· 11914 11914 11915 11915 **Parameters:** 11916 11916 11917 11917 - - **callback**: _function_ (Optional) - A function receiving the original value after resetting the animation. 11917 11917 + - **callback**: *function* (Optional) - A function receiving the original value after resetting the animation. 11918 11918 11919 11919 ##### `interpolate()` 11920 11920 ··· 11926 11926 11927 11927 **Parameters:** 11928 11928 11929 11929 - - **config**: _object_ (Required) - Configuration object with keys: 11930 11930 - - **inputRange**: _array of numbers_ 11931 11931 - - **outputRange**: _array of numbers or strings_ 11932 11932 - - **easing** (optional): _function_ returning a number given an input number 11933 11933 - - **extrapolate** (optional): _string_ such as 'extend', 'identity', or 'clamp' 11934 11934 - - **extrapolateLeft** (optional): _string_ such as 'extend', 'identity', or 'clamp' 11935 11935 - - **extrapolateRight** (optional): _string_ such as 'extend', 'identity', or 'clamp' 11929 11929 + - **config**: *object* (Required) - Configuration object with keys: 11930 11930 + - **inputRange**: *array of numbers* 11931 11931 + - **outputRange**: *array of numbers or strings* 11932 11932 + - **easing** (optional): *function* returning a number given an input number 11933 11933 + - **extrapolate** (optional): *string* such as 'extend', 'identity', or 'clamp' 11934 11934 + - **extrapolateLeft** (optional): *string* such as 'extend', 'identity', or 'clamp' 11935 11935 + - **extrapolateRight** (optional): *string* such as 'extend', 'identity', or 'clamp' 11936 11936 11937 11937 ##### `animate()` 11938 11938 ··· 11944 11944 11945 11945 **Parameters:** 11946 11946 11947 11947 - | Name | Type | Required | Description | 11948 11948 - | --------- | --------- | -------- | ------------------- | 11949 11949 - | animation | Animation | Yes | See `Animation.js`. | 11950 11950 - | callback | function | Yes | Callback function. | 11947 11947 + |Name|Type|Required|Description| 11948 11948 + |-|-|-|-| 11949 11949 + |animation|Animation|Yes|See `Animation.js`.| 11950 11950 + |callback|function|Yes|Callback function.| 11951 11951 11952 11952 ## Systrace 11953 11953 ··· 12244 12244 12245 12245 On iOS devices, vibration functionality is achieved using the `AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)` method. 12246 12246 12247 12247 - --- 12247 12247 + *** 12248 12248 12249 12249 ### Reference 12250 12250 ··· 12258 12258 12259 12259 This method stops any ongoing vibrations that were initiated with a repeating pattern by calling `vibrate()`. 12260 12260 12261 12261 - --- 12261 12261 + *** 12262 12262 12263 12263 ##### `vibrate()` 12264 12264 ··· 12278 12278 12279 12279 **Parameters:** 12280 12280 12281 12281 - | Name | Type | Default | Description | 12282 12282 - | --- | --- | --- | --- | 12283 12283 - | pattern | number \| number\[] | `400` | Specifies either a single duration for vibration in milliseconds or an array of times. | 12284 12284 - | repeat | boolean | `false` | If true, the vibration pattern will continue until `cancel()` is called. | 12281 12281 + |Name|Type|Default|Description| 12282 12282 + |-|-|-|-| 12283 12283 + |pattern|number \| number\[]|`400`|Specifies either a single duration for vibration in milliseconds or an array of times.| 12284 12284 + |repeat|boolean|`false`|If true, the vibration pattern will continue until `cancel()` is called.| 12285 12285 12286 12286 ## Animated.ValueXY 12287 12287 ··· 12289 12289 12290 12290 ### Example 12291 12291 12292 12292 - _Example content not provided._ 12292 12292 + *Example content not provided.* 12293 12293 12294 12294 ### Reference 12295 12295 ··· 12464 12464 12465 12465 This property indicates the current font size scale. Some operating systems allow users to adjust their font sizes for better readability. This value reflects any such adjustments. 12466 12466 12467 12467 - --- 12467 12467 + *** 12468 12468 12469 12469 #### `height` 12470 12470 ··· 12474 12474 12475 12475 Represents the height in pixels of the window or screen that your application occupies. 12476 12476 12477 12477 - --- 12477 12477 + *** 12478 12478 12479 12479 #### `scale` 12480 12480 ··· 12487 12487 - `1`: One point equals one pixel (commonly PPI/DPI of 96, 76 on some platforms). 12488 12488 - `2` or `3`: Indicates a Retina or high DPI display. 12489 12489 12490 12490 - --- 12490 12490 + *** 12491 12491 12492 12492 #### `width` 12493 12493 ··· 12526 12526 12527 12527 **Parameters:** 12528 12528 12529 12529 - | Name | Type | Description | 12530 12530 - | --- | --- | --- | 12531 12531 - | `eventType` | string | Identifies the event you're listening for. See list below. | 12532 12532 - | `listener` | function | The callback function executed when the event occurs. | 12529 12529 + |Name|Type|Description| 12530 12530 + |-|-|-| 12531 12531 + |`eventType`|string|Identifies the event you're listening for. See list below.| 12532 12532 + |`listener`|function|The callback function executed when the event occurs.| 12533 12533 12534 12534 **Supported Events:** 12535 12535 ··· 12657 12657 12658 12658 **Parameters:** 12659 12659 12660 12660 - | Name | Type | Required | Description | 12661 12661 - | ---------- | ------ | -------- | ---------------------------- | 12662 12662 - | permission | string | Yes | The permission to check for. | 12660 12660 + |Name|Type|Required|Description| 12661 12661 + |-|-|-|-| 12662 12662 + |permission|string|Yes|The permission to check for.| 12663 12663 12664 12664 ##### `request()` 12665 12665 ··· 12682 12682 12683 12683 **Parameters:** 12684 12684 12685 12685 - | Name | Type | Required | Description | 12686 12686 - | ---------- | ------ | -------- | -------------------------- | 12687 12687 - | permission | string | Yes | The permission to request. | 12688 12688 - | rationale | object | No | See `rationale` below. | 12685 12685 + |Name|Type|Required|Description| 12686 12686 + |-|-|-|-| 12687 12687 + |permission|string|Yes|The permission to request.| 12688 12688 + |rationale|object|No|See `rationale` below.| 12689 12689 12690 12690 **Rationale:** 12691 12691 12692 12692 - | Name | Type | Required | Description | 12693 12693 - | -------------- | ------ | -------- | -------------------------------- | 12694 12694 - | title | string | Yes | The title of the dialog. | 12695 12695 - | message | string | Yes | The message of the dialog. | 12696 12696 - | buttonPositive | string | Yes | The text of the positive button. | 12697 12697 - | buttonNegative | string | No | The text of the negative button. | 12698 12698 - | buttonNeutral | string | No | The text of the neutral button. | 12692 12692 + |Name|Type|Required|Description| 12693 12693 + |-|-|-|-| 12694 12694 + |title|string|Yes|The title of the dialog.| 12695 12695 + |message|string|Yes|The message of the dialog.| 12696 12696 + |buttonPositive|string|Yes|The text of the positive button.| 12697 12697 + |buttonNegative|string|No|The text of the negative button.| 12698 12698 + |buttonNeutral|string|No|The text of the neutral button.| 12699 12699 12700 12700 ##### `requestMultiple()` 12701 12701 ··· 12709 12709 12710 12710 **Parameters:** 12711 12711 12712 12712 - | Name | Type | Required | Description | 12713 12713 - | ----------- | ----- | -------- | -------------------------------- | 12714 12714 - | permissions | array | Yes | Array of permissions to request. | 12712 12712 + |Name|Type|Required|Description| 12713 12713 + |-|-|-|-| 12714 12714 + |permissions|array|Yes|Array of permissions to request.| 12715 12715 12716 12716 ## Signing Your Android Application for Distribution 12717 12717

+25 -2

src/prettier.ts

reviewed

··· 1 1 import { format } from 'prettier'; 2 2 + import { unified } from 'unified'; 3 3 + import remarkParse from 'remark-parse'; 4 4 + import remarkStringify from 'remark-stringify'; 5 5 + import remarkGfm from 'remark-gfm'; 6 6 + 7 7 + async function reformat(content: string): Promise<string> { 8 8 + // NOTE: We reformat with remark again to get rid of prettier's 9 9 + // table formatting mostly. This doesn't work well as LLM input 10 10 + const md = await unified() 11 11 + .use(remarkParse, { fragment: true }) 12 12 + .use(remarkGfm, { 13 13 + tablePipeAlign: false, 14 14 + tableCellPadding: false, 15 15 + }) 16 16 + .use(remarkStringify, { 17 17 + bullet: '-', 18 18 + incrementListMarker: false, 19 19 + ruleSpaces: false, 20 20 + tightDefinitions: true, 21 21 + }) 22 22 + .process(content); 23 23 + return md.toString(); 24 24 + } 2 25 3 26 export async function formatMarkdown(input: string) { 4 4 - return format(input, { 27 27 + return reformat(await format(input, { 5 28 semi: false, 6 29 singleQuote: false, 7 30 trailingComma: 'es5', 8 31 proseWrap: 'never', 9 32 parser: 'markdown', 10 10 - }); 33 33 + })); 11 34 }