└── styling.js /styling.js: -------------------------------------------------------------------------------- 1 | // import {Appearance} from 'react-native'; 2 | import { StyleSheet } from "react-native"; 3 | 4 | // const colorScheme = Appearance.getColorScheme(); 5 | // const darkTheme = colorScheme === 'dark' ? true : false; 6 | 7 | let _dark = "#023e8a"; 8 | let _light = "#f0effb"; 9 | let _success = "#208b3a"; 10 | let _warning = "#ec7d10"; 11 | let _danger = "#fc2f00"; 12 | let _secondary = "#353535"; 13 | let _black = "#000000"; 14 | let _info = "#007ea7"; 15 | let _white = "#ffffff"; 16 | let _themeLight = "#d3ffd8"; 17 | let _transparent = "rgba(0,0,0,.2)"; 18 | 19 | const styling = { 20 | textWhite: { 21 | color: _white, 22 | }, 23 | textPrimary: { 24 | color: _dark, 25 | }, 26 | textSecondary: { 27 | color: _secondary, 28 | }, 29 | textSuccess: { 30 | color: _success, 31 | }, 32 | textDanger: { 33 | color: _danger, 34 | }, 35 | textWarning: { 36 | color: _warning, 37 | }, 38 | textBlack: { 39 | color: _black, 40 | }, 41 | textInfo: { 42 | color: _info, 43 | }, 44 | textLight: { 45 | color: _light, 46 | }, 47 | textThemeLight: { 48 | color: _themeLight, 49 | }, 50 | textStart: { 51 | textAlign: "left", 52 | }, 53 | textEnd: { 54 | textAlign: "right", 55 | }, 56 | textCenter: { 57 | textAlign: "center", 58 | }, 59 | textUnderline: { 60 | textDecorationLine: "underline" 61 | }, 62 | textBold: { 63 | fontWeight: "bold", 64 | }, 65 | bgWhite: { 66 | backgroundColor: _white, 67 | }, 68 | bgPrimary: { 69 | backgroundColor: _dark, 70 | }, 71 | bgSecondary: { 72 | backgroundColor: _secondary, 73 | }, 74 | bgSuccess: { 75 | backgroundColor: _success, 76 | }, 77 | bgDanger: { 78 | backgroundColor: _danger, 79 | }, 80 | bgWarning: { 81 | backgroundColor: _warning, 82 | }, 83 | bgBlack: { 84 | backgroundColor: _black, 85 | }, 86 | bgInfo: { 87 | backgroundColor: _info, 88 | }, 89 | bgLight: { 90 | backgroundColor: _light, 91 | }, 92 | bgThemeLight: { 93 | backgroundColor: _themeLight, 94 | }, 95 | bgTransparent: { 96 | backgroundColor: _transparent, 97 | }, 98 | borderWhite: { 99 | borderColor: _white, 100 | }, 101 | borderPrimary: { 102 | borderColor: _dark, 103 | }, 104 | borderSecondary: { 105 | borderColor: _secondary, 106 | }, 107 | borderSuccess: { 108 | borderColor: _success, 109 | }, 110 | borderDanger: { 111 | borderColor: _danger, 112 | }, 113 | borderWarning: { 114 | borderColor: _warning, 115 | }, 116 | borderBlack: { 117 | borderColor: _black, 118 | }, 119 | borderInfo: { 120 | borderColor: _info, 121 | }, 122 | borderLight: { 123 | borderColor: _light, 124 | }, 125 | borderTopWhite: { 126 | borderColor: _white, 127 | }, 128 | borderTopPrimary: { 129 | borderColor: _dark, 130 | }, 131 | borderTopSecondary: { 132 | borderColor: _secondary, 133 | }, 134 | borderTopSuccess: { 135 | borderColor: _success, 136 | }, 137 | borderTopDanger: { 138 | borderColor: _danger, 139 | }, 140 | borderTopWarning: { 141 | borderColor: _warning, 142 | }, 143 | borderTopBlack: { 144 | borderColor: _black, 145 | }, 146 | borderTopInfo: { 147 | borderColor: _info, 148 | }, 149 | borderTopLight: { 150 | borderColor: _light, 151 | }, 152 | borderBottomWhite: { 153 | borderColor: _white, 154 | }, 155 | borderBottomPrimary: { 156 | borderColor: _dark, 157 | }, 158 | borderBottomSecondary: { 159 | borderColor: _secondary, 160 | }, 161 | borderBottomSuccess: { 162 | borderColor: _success, 163 | }, 164 | borderBottomDanger: { 165 | borderColor: _danger, 166 | }, 167 | borderBottomWarning: { 168 | borderColor: _warning, 169 | }, 170 | borderBottomBlack: { 171 | borderColor: _black, 172 | }, 173 | borderBottomInfo: { 174 | borderColor: _info, 175 | }, 176 | borderBottomLight: { 177 | borderColor: _light, 178 | }, 179 | borderLeftWhite: { 180 | borderColor: _white, 181 | }, 182 | borderLeftPrimary: { 183 | borderColor: _dark, 184 | }, 185 | borderLeftSecondary: { 186 | borderColor: _secondary, 187 | }, 188 | borderLeftSuccess: { 189 | borderColor: _success, 190 | }, 191 | borderLeftDanger: { 192 | borderColor: _danger, 193 | }, 194 | borderLeftWarning: { 195 | borderColor: _warning, 196 | }, 197 | borderLeftBlack: { 198 | borderColor: _black, 199 | }, 200 | borderLeftInfo: { 201 | borderColor: _info, 202 | }, 203 | borderLeftLight: { 204 | borderColor: _light, 205 | }, 206 | borderRightWhite: { 207 | borderColor: _white, 208 | }, 209 | borderRightPrimary: { 210 | borderColor: _dark, 211 | }, 212 | borderRightSecondary: { 213 | borderColor: _secondary, 214 | }, 215 | borderRightSuccess: { 216 | borderColor: _success, 217 | }, 218 | borderRightDanger: { 219 | borderColor: _danger, 220 | }, 221 | borderRightWarning: { 222 | borderColor: _warning, 223 | }, 224 | borderRightBlack: { 225 | borderColor: _black, 226 | }, 227 | borderRightInfo: { 228 | borderColor: _info, 229 | }, 230 | borderRightLight: { 231 | borderColor: _light, 232 | }, 233 | border1: { 234 | borderWidth: 1, 235 | }, 236 | border2: { 237 | borderWidth: 2, 238 | }, 239 | border3: { 240 | borderWidth: 3, 241 | }, 242 | border4: { 243 | borderWidth: 4, 244 | }, 245 | border5: { 246 | borderWidth: 5, 247 | }, 248 | borderTop1: { 249 | borderTopWidth: 1, 250 | }, 251 | borderTop2: { 252 | borderTopWidth: 2, 253 | }, 254 | borderTop3: { 255 | borderTopWidth: 3, 256 | }, 257 | borderTop4: { 258 | borderTopWidth: 4, 259 | }, 260 | borderTop5: { 261 | borderTopWidth: 5, 262 | }, 263 | borderBottom1: { 264 | borderBottomWidth: 1, 265 | }, 266 | borderBottom2: { 267 | borderBottomWidth: 2, 268 | }, 269 | borderBottom3: { 270 | borderBottomWidth: 3, 271 | }, 272 | borderBottom4: { 273 | borderBottomWidth: 4, 274 | }, 275 | borderBottom5: { 276 | borderBottomWidth: 5, 277 | }, 278 | borderLeft1: { 279 | borderLeftWidth: 1, 280 | }, 281 | borderLeft2: { 282 | borderLeftWidth: 2, 283 | }, 284 | borderLeft3: { 285 | borderLeftWidth: 3, 286 | }, 287 | borderLeft4: { 288 | borderLeftWidth: 4, 289 | }, 290 | borderLeft5: { 291 | borderLeftWidth: 5, 292 | }, 293 | borderRight1: { 294 | borderRightWidth: 1, 295 | }, 296 | borderRight2: { 297 | borderRightWidth: 2, 298 | }, 299 | borderRight3: { 300 | borderRightWidth: 3, 301 | }, 302 | borderRight4: { 303 | borderRightWidth: 4, 304 | }, 305 | borderRight5: { 306 | borderRightWidth: 5, 307 | }, 308 | w100: { 309 | width: "100%", 310 | }, 311 | w75: { 312 | width: "75%", 313 | }, 314 | w50: { 315 | width: "50%", 316 | }, 317 | w25: { 318 | width: "25%", 319 | }, 320 | w90: { 321 | width: "90%", 322 | }, 323 | w80: { 324 | width: "80%", 325 | }, 326 | w70: { 327 | width: "70%", 328 | }, 329 | w60: { 330 | width: "60%", 331 | }, 332 | w40: { 333 | width: "40%", 334 | }, 335 | w30: { 336 | width: "30%", 337 | }, 338 | w20: { 339 | width: "20%", 340 | }, 341 | w10: { 342 | width: "10%", 343 | }, 344 | h100: { 345 | height: "100%", 346 | }, 347 | h90: { 348 | height: "90%", 349 | }, 350 | h80: { 351 | height: "80%", 352 | }, 353 | h75: { 354 | height: "75%", 355 | }, 356 | h70: { 357 | height: "70%", 358 | }, 359 | h60: { 360 | height: "60%", 361 | }, 362 | h50: { 363 | height: "50%", 364 | }, 365 | h40: { 366 | height: "40%", 367 | }, 368 | h30: { 369 | height: "30%", 370 | }, 371 | h25: { 372 | height: "25%", 373 | }, 374 | h20: { 375 | height: "20%", 376 | }, 377 | h10: { 378 | height: "10%", 379 | }, 380 | fsXL: { 381 | fontSize: 50, 382 | }, 383 | fsL: { 384 | fontSize: 40, 385 | }, 386 | fs1: { 387 | fontSize: 32, 388 | }, 389 | fs2: { 390 | fontSize: 26, 391 | }, 392 | fs3: { 393 | fontSize: 22, 394 | }, 395 | fs4: { 396 | fontSize: 20, 397 | }, 398 | fs5: { 399 | fontSize: 18, 400 | }, 401 | fs6: { 402 | fontSize: 16, 403 | }, 404 | flex1: { 405 | flex: 1, 406 | }, 407 | flex2: { 408 | flex: 2, 409 | }, 410 | flex3: { 411 | flex: 3, 412 | }, 413 | flex4: { 414 | flex: 4, 415 | }, 416 | flex5: { 417 | flex: 5, 418 | }, 419 | input: { 420 | height: "auto", 421 | width: "100%", 422 | padding: 10, 423 | paddingHorizontal: 15, 424 | fontSize: 17, 425 | borderRadius: 15, 426 | backgroundColor: "#f1f1f1", 427 | // shadowColor: '#000', 428 | // shadowOffset: { 429 | // width: 0, 430 | // height: 4, 431 | // }, 432 | // color: _black, 433 | // shadowOpacity: 0.32, 434 | // shadowRadius: 5.46, 435 | 436 | // elevation: 9, 437 | }, 438 | searchInput: { 439 | height: "auto", 440 | fontSize: 15, 441 | color: _black, 442 | flex: 1, 443 | }, 444 | formInput: { 445 | height: "auto", 446 | width: "100%", 447 | paddingVertical: 12, 448 | fontSize: 18, 449 | borderBottomWidth: 2, 450 | borderBottomColor: _dark, 451 | }, 452 | btn: { 453 | backgroundColor: _transparent, 454 | color: "white", 455 | // width: '100%', 456 | padding: 12, 457 | paddingHorizontal: 25, 458 | fontSize: 16, 459 | borderRadius: 100, 460 | shadowColor: "#000", 461 | shadowOffset: { 462 | width: 0, 463 | height: 4, 464 | }, 465 | shadowOpacity: 0.32, 466 | shadowRadius: 5.46, 467 | 468 | elevation: 9, 469 | }, 470 | btnPrimary: { 471 | backgroundColor: _dark, 472 | color: "white", 473 | // width: '100%', 474 | padding: 12, 475 | paddingHorizontal: 25, 476 | fontSize: 16, 477 | borderRadius: 100, 478 | shadowColor: "#000", 479 | shadowOffset: { 480 | width: 0, 481 | height: 4, 482 | }, 483 | shadowOpacity: 0.32, 484 | shadowRadius: 5.46, 485 | 486 | elevation: 9, 487 | }, 488 | btnSecondary: { 489 | backgroundColor: _secondary, 490 | color: "white", 491 | // width: '100%', 492 | padding: 12, 493 | paddingHorizontal: 25, 494 | fontSize: 16, 495 | borderRadius: 100, 496 | shadowColor: "#000", 497 | shadowOffset: { 498 | width: 0, 499 | height: 4, 500 | }, 501 | shadowOpacity: 0.32, 502 | shadowRadius: 5.46, 503 | 504 | elevation: 9, 505 | }, 506 | btnInfo: { 507 | backgroundColor: _info, 508 | color: "white", 509 | // width: '100%', 510 | padding: 12, 511 | paddingHorizontal: 25, 512 | fontSize: 16, 513 | borderRadius: 100, 514 | shadowColor: "#000", 515 | shadowOffset: { 516 | width: 0, 517 | height: 4, 518 | }, 519 | shadowOpacity: 0.32, 520 | shadowRadius: 5.46, 521 | 522 | elevation: 9, 523 | }, 524 | btnSuccess: { 525 | backgroundColor: _success, 526 | color: "white", 527 | // width: '100%', 528 | padding: 12, 529 | paddingHorizontal: 25, 530 | fontSize: 16, 531 | borderRadius: 100, 532 | shadowColor: "#000", 533 | shadowOffset: { 534 | width: 0, 535 | height: 4, 536 | }, 537 | shadowOpacity: 0.32, 538 | shadowRadius: 5.46, 539 | 540 | elevation: 9, 541 | }, 542 | btnDanger: { 543 | backgroundColor: _danger, 544 | color: "white", 545 | // width: '100%', 546 | padding: 12, 547 | paddingHorizontal: 25, 548 | fontSize: 16, 549 | borderRadius: 100, 550 | shadowColor: "#000", 551 | shadowOffset: { 552 | width: 0, 553 | height: 4, 554 | }, 555 | shadowOpacity: 0.32, 556 | shadowRadius: 5.46, 557 | 558 | elevation: 9, 559 | }, 560 | btnBlack: { 561 | backgroundColor: _black, 562 | color: "white", 563 | // width: '100%', 564 | padding: 12, 565 | paddingHorizontal: 25, 566 | fontSize: 16, 567 | borderRadius: 100, 568 | shadowColor: "#000", 569 | shadowOffset: { 570 | width: 0, 571 | height: 4, 572 | }, 573 | shadowOpacity: 0.32, 574 | shadowRadius: 5.46, 575 | 576 | elevation: 9, 577 | }, 578 | btnLight: { 579 | backgroundColor: _light, 580 | color: "white", 581 | // width: '100%', 582 | padding: 12, 583 | paddingHorizontal: 25, 584 | fontSize: 16, 585 | borderRadius: 100, 586 | shadowColor: "#000", 587 | shadowOffset: { 588 | width: 0, 589 | height: 4, 590 | }, 591 | shadowOpacity: 0.32, 592 | shadowRadius: 5.46, 593 | 594 | elevation: 9, 595 | }, 596 | link: { 597 | color: _info, 598 | fontSize: 18, 599 | }, 600 | roundedBtn: { 601 | backgroundColor: _dark, 602 | color: "white", 603 | height: 50, 604 | width: 50, 605 | padding: 12, 606 | fontSize: 16, 607 | borderRadius: 25, 608 | shadowColor: "#000", 609 | shadowOffset: { 610 | width: 0, 611 | height: 4, 612 | }, 613 | shadowOpacity: 0.32, 614 | shadowRadius: 5.46, 615 | 616 | elevation: 9, 617 | }, 618 | badge: { 619 | width: 25, 620 | height: 25, 621 | fontSize: 13, 622 | backgroundColor: "white", 623 | color: _dark, 624 | borderRadius: 15, 625 | padding: 3, 626 | fontWeight: "bold", 627 | textAlign: "center", 628 | position: "absolute", 629 | left: -10, 630 | shadowOffset: { 631 | width: 0, 632 | height: 4, 633 | }, 634 | shadowOpacity: 0.32, 635 | shadowRadius: 5.46, 636 | 637 | elevation: 9, 638 | }, 639 | 640 | shadow1: { 641 | shadowColor: "rgba(0,0,0,.5)", 642 | shadowOffset: { 643 | width: 0, 644 | height: 2, 645 | }, 646 | shadowOpacity: 0.23, 647 | shadowRadius: 2.62, 648 | 649 | elevation: 4, 650 | }, 651 | shadow2: { 652 | shadowColor: "rgba(0,0,0,.5)", 653 | shadowOffset: { 654 | width: 0, 655 | height: 4, 656 | }, 657 | shadowOpacity: 0.3, 658 | shadowRadius: 4.65, 659 | 660 | elevation: 8, 661 | }, 662 | shadow3: { 663 | shadowColor: "rgba(0,0,0,.5)", 664 | shadowOffset: { 665 | width: 0, 666 | height: 6, 667 | }, 668 | shadowOpacity: 0.37, 669 | shadowRadius: 7.49, 670 | 671 | elevation: 12, 672 | }, 673 | shadow4: { 674 | shadowColor: "rgba(0,0,0,.5)", 675 | shadowOffset: { 676 | width: 0, 677 | height: 8, 678 | }, 679 | shadowOpacity: 0.44, 680 | shadowRadius: 10.32, 681 | 682 | elevation: 16, 683 | }, 684 | shadow5: { 685 | shadowColor: "rgba(0,0,0,.5)", 686 | shadowOffset: { 687 | width: 0, 688 | height: 10, 689 | }, 690 | shadowOpacity: 0.51, 691 | shadowRadius: 13.16, 692 | 693 | elevation: 20, 694 | }, 695 | shadow6: { 696 | shadowColor: "rgba(0,0,0,.5)", 697 | shadowOffset: { 698 | width: 0, 699 | height: 12, 700 | }, 701 | shadowOpacity: 0.58, 702 | shadowRadius: 16.0, 703 | 704 | elevation: 24, 705 | }, 706 | p1: { 707 | padding: 10, 708 | }, 709 | p2: { 710 | padding: 20, 711 | }, 712 | p3: { 713 | padding: 30, 714 | }, 715 | p4: { 716 | padding: 40, 717 | }, 718 | p5: { 719 | padding: 50, 720 | }, 721 | py1: { 722 | paddingVertical: 10, 723 | }, 724 | py2: { 725 | paddingVertical: 20, 726 | }, 727 | py3: { 728 | paddingVertical: 30, 729 | }, 730 | py4: { 731 | paddingVertical: 40, 732 | }, 733 | py5: { 734 | paddingVertical: 50, 735 | }, 736 | px1: { 737 | paddingHorizontal: 10, 738 | }, 739 | px2: { 740 | paddingHorizontal: 20, 741 | }, 742 | px3: { 743 | paddingHorizontal: 30, 744 | }, 745 | px4: { 746 | paddingHorizontal: 40, 747 | }, 748 | px5: { 749 | paddingHorizontal: 50, 750 | }, 751 | ps1: { 752 | paddingLeft: 10, 753 | }, 754 | ps2: { 755 | paddingLeft: 20, 756 | }, 757 | ps3: { 758 | paddingLeft: 30, 759 | }, 760 | ps4: { 761 | paddingLeft: 40, 762 | }, 763 | ps5: { 764 | paddingLeft: 50, 765 | }, 766 | pt1: { 767 | paddingTop: 10, 768 | }, 769 | pt2: { 770 | paddingTop: 20, 771 | }, 772 | pt3: { 773 | paddingTop: 30, 774 | }, 775 | pt4: { 776 | paddingTop: 40, 777 | }, 778 | pt5: { 779 | paddingTop: 50, 780 | }, 781 | pe1: { 782 | paddingEnd: 10, 783 | }, 784 | pe2: { 785 | paddingEnd: 20, 786 | }, 787 | pe3: { 788 | paddingEnd: 30, 789 | }, 790 | pe4: { 791 | paddingEnd: 40, 792 | }, 793 | pe5: { 794 | paddingEnd: 50, 795 | }, 796 | pb1: { 797 | paddingBottom: 10, 798 | }, 799 | pb2: { 800 | paddingBottom: 20, 801 | }, 802 | pb3: { 803 | paddingBottom: 30, 804 | }, 805 | pb4: { 806 | paddingBottom: 40, 807 | }, 808 | pb5: { 809 | paddingBottom: 50, 810 | }, 811 | m1: { 812 | margin: 10, 813 | }, 814 | m2: { 815 | margin: 20, 816 | }, 817 | m3: { 818 | margin: 30, 819 | }, 820 | m4: { 821 | margin: 40, 822 | }, 823 | m5: { 824 | margin: 50, 825 | }, 826 | my1: { 827 | marginVertical: 10, 828 | }, 829 | my2: { 830 | marginVertical: 20, 831 | }, 832 | my3: { 833 | marginVertical: 30, 834 | }, 835 | my4: { 836 | marginVertical: 40, 837 | }, 838 | my5: { 839 | marginVertical: 50, 840 | }, 841 | mx1: { 842 | marginHorizontal: 10, 843 | }, 844 | mx2: { 845 | marginHorizontal: 20, 846 | }, 847 | mx3: { 848 | marginHorizontal: 30, 849 | }, 850 | mx4: { 851 | marginHorizontal: 40, 852 | }, 853 | mx5: { 854 | marginHorizontal: 50, 855 | }, 856 | ms1: { 857 | marginLeft: 10, 858 | }, 859 | ms2: { 860 | marginLeft: 20, 861 | }, 862 | ms3: { 863 | marginLeft: 30, 864 | }, 865 | ms4: { 866 | marginLeft: 40, 867 | }, 868 | ms5: { 869 | marginLeft: 50, 870 | }, 871 | me1: { 872 | marginEnd: 10, 873 | }, 874 | me2: { 875 | marginEnd: 20, 876 | }, 877 | me3: { 878 | marginEnd: 30, 879 | }, 880 | me4: { 881 | marginEnd: 40, 882 | }, 883 | me5: { 884 | marginEnd: 50, 885 | }, 886 | mt1: { 887 | marginTop: 10, 888 | }, 889 | mt2: { 890 | marginTop: 20, 891 | }, 892 | mt3: { 893 | marginTop: 30, 894 | }, 895 | mt4: { 896 | marginTop: 40, 897 | }, 898 | mt5: { 899 | marginTop: 50, 900 | }, 901 | mb1: { 902 | marginBottom: 10, 903 | }, 904 | mb2: { 905 | marginBottom: 20, 906 | }, 907 | mb3: { 908 | marginBottom: 30, 909 | }, 910 | mb4: { 911 | marginBottom: 40, 912 | }, 913 | mb5: { 914 | marginBottom: 50, 915 | }, 916 | flexRow: { 917 | flexDirection: "row", 918 | }, 919 | flexColumn: { 920 | flexDirection: "column", 921 | }, 922 | flexCenter: { 923 | justifyContent: "center", 924 | alignItems: "center", 925 | }, 926 | flexWrap: { 927 | flexWrap: "wrap", 928 | }, 929 | flexNoWrap: { 930 | flexWrap: "nowrap", 931 | }, 932 | justifyContentCenter: { 933 | justifyContent: "center", 934 | }, 935 | justifyContentStart: { 936 | justifyContent: "flex-start", 937 | }, 938 | justifyContentEnd: { 939 | justifyContent: "flex-end", 940 | }, 941 | alignItemsCenter: { 942 | alignItems: "center", 943 | }, 944 | alignItemsStart: { 945 | alignItems: "flex-start", 946 | }, 947 | alignItemsEnd: { 948 | alignItems: "flex-end", 949 | }, 950 | justifyContentBetween: { 951 | justifyContent: "space-between", 952 | }, 953 | justifyContentAround: { 954 | justifyContent: "space-around", 955 | }, 956 | rounded: { 957 | borderRadius: 15, 958 | }, 959 | roundedPill: { 960 | borderRadius: 500, 961 | }, 962 | roundedTopRight: { 963 | borderTopRightRadius: 15 964 | }, 965 | roundedTopLeft: { 966 | borderTopLeftRadius: 15 967 | }, 968 | roundedBottomRight: { 969 | borderBottomRightRadius: 15 970 | }, 971 | roundedBottomLeft: { 972 | borderBottomLeftRadius: 15 973 | }, 974 | label: { 975 | fontSize: 18, 976 | borderRadius: 5, 977 | paddingLeft: 10, 978 | color: _dark, 979 | }, 980 | chips: { 981 | padding: 7, 982 | paddingHorizontal: 15, 983 | backgroundColor: _light, 984 | borderRadius: 30, 985 | margin: 2, 986 | borderWidth: 1, 987 | borderColor: _dark, 988 | }, 989 | paper: { 990 | padding: 10, 991 | backgroundColor: _white, 992 | borderRadius: 10, 993 | margin: 2, 994 | shadowColor: "rgba(0,0,0,.5)", 995 | shadowOffset: { 996 | width: 0, 997 | height: 4, 998 | }, 999 | shadowOpacity: 0.3, 1000 | shadowRadius: 4.65, 1001 | 1002 | elevation: 8, 1003 | }, 1004 | positionRelative: { 1005 | position: "relative", 1006 | }, 1007 | positionAbsolute: { 1008 | position: "absolute", 1009 | }, 1010 | Positionfloat: { 1011 | position: "fixed", 1012 | bottom: 20, 1013 | right: 20, 1014 | }, 1015 | positionFixed: { 1016 | position: "fixed", 1017 | }, 1018 | _dark: _dark, 1019 | _light: _light, 1020 | _success: _success, 1021 | _warning: _warning, 1022 | _danger: _danger, 1023 | _secondary: _secondary, 1024 | _black: _black, 1025 | _info: _info, 1026 | _white: _white, 1027 | _transparent: _transparent, 1028 | }; 1029 | 1030 | const styles = StyleSheet.create(styling); 1031 | 1032 | export default styles; 1033 | --------------------------------------------------------------------------------