├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── enhancement.md ├── PULL_REQUEST_TEMPLATE.md ├── actions │ └── setup │ │ └── action.yml ├── labeler.yml └── workflows │ ├── ci.yml │ ├── issues.yml │ ├── labeler.yml │ └── stale.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .watchmanconfig ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── assets ├── badges │ ├── kofi.svg │ ├── patreon.svg │ └── paypal.svg ├── display-name.svg ├── logo.png ├── main-branch.jpg └── update-branch.png ├── babel.config.js ├── bob.config.js ├── example ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── metro.config.js ├── package.json └── src │ └── App.jsx ├── lefthook.yml ├── package-lock.json ├── package.json ├── src ├── __tests__ │ └── index.test.tsx ├── border │ └── bdr.ts ├── effects │ └── fx.ts ├── flexbox │ ├── align.ts │ ├── flex.ts │ ├── justify.ts │ └── place.ts ├── index.ts ├── layout │ ├── aspect.ts │ ├── direction.ts │ ├── display.ts │ ├── object-fit.ts │ ├── overflow.ts │ ├── position.ts │ └── z-index.ts ├── shadow │ └── shadow.ts ├── sizing │ ├── h.ts │ ├── size.ts │ └── w.ts ├── spacing │ ├── margin.ts │ └── padding.ts ├── types │ ├── border.ts │ ├── effects.ts │ ├── flexbox.ts │ ├── layout.ts │ ├── spacing.ts │ └── typography.ts ├── typography │ ├── decoration.ts │ └── text.ts └── utils │ └── colorList.ts ├── tsconfig.build.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | #node.js 2 | node_modules/ 3 | lib/ 4 | package-lock.json 5 | package.json 6 | 7 | #example 8 | example/ 9 | 10 | # ci-cd 11 | workflows/ 12 | lefthook.yml 13 | 14 | #config 15 | .editorconfig 16 | .eslintignore 17 | .eslintrc.json 18 | .gitattributes 19 | .gitignore 20 | .prettierrc 21 | .watchmanconfig 22 | .yarnrc.yml 23 | babel.config.js 24 | bob.config.js 25 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["@react-native", "prettier"], 4 | "rules": { 5 | "react/react-in-jsx-scope": "off", 6 | "prettier/prettier": [ 7 | "error", 8 | { 9 | "quoteProps": "consistent", 10 | "singleQuote": true, 11 | "tabWidth": 2, 12 | "trailingComma": "es5", 13 | "useTabs": false, 14 | "endOfLine": "auto" 15 | } 16 | ] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Bug 3 | about: Found an issue in our library? Report it here to help us improve! 4 | title: "Bug: " 5 | labels: "Bug, Needs Triage" 6 | assignees: "" 7 | --- 8 | 9 | ### Checks 10 | 11 | - [ ] This is not a duplicate of an existing issue (please have a look through our [open issues list](https://github.com/nativeflowteam/nativeflowcss/issues) to make sure) 12 | - [ ] I have thoroughly read and understand [Contributing Guide](https://github.com/nativeflowteam/nativeflowcss/blob/main/CONTRIBUTING.md) 13 | - [ ] Would you like to work on this issue? 14 | 15 | ### Describe the bug 16 | 17 | 18 | ### To Reproduce 19 | 24 | 25 | ### (optional) How *if it does* break UI 26 | 27 | >Images 28 | 29 | ### (Optional) Additional Comments 30 | 31 | *No response* 32 | 33 | ### (Optional) Discord username 34 | 35 | 36 | *No response* 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 📰 Documentation website 4 | url: https://nativeflowcssteam/documentation 5 | about: This repository is for the npm library. For code related to the documentation, please visit the documentation repository. 6 | - name: 📟 Join us on Discord 7 | url: https://discord.gg/your-discord-invite-link 8 | about: Ask questions and get help from the community on our Discord server. 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/enhancement.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🚀 Enhancement/Feature Request 3 | about: Suggest an enhancement or feature for our library to help us improve! 4 | title: "Enhancement: " 5 | labels: "Enhancement, Needs Triage" 6 | assignees: "" 7 | --- 8 | 9 | ### Checks 10 | 11 | - [ ] This is not a duplicate of an existing issue (please have a look through our [open issues list](https://github.com/nativeflowteam/nativeflowcss/issues) to make sure) 12 | - [ ] I have thoroughly read and understand [Contributing Guide](https://github.com/nativeflowteam/nativeflowcss/blob/main/CONTRIBUTING.md) 13 | - [ ] Would you like to work on this enhancement? 14 | 15 | ### Describe the enhancement 16 | 17 | 18 | ### Describe the solution you'd like 19 | 20 | 21 | ### Describe alternatives you've considered 22 | 23 | 24 | ### (Optional) Additional Comments 25 | 26 | *No response* 27 | 28 | ### (Optional) Discord username 29 | 30 | 31 | *No response* 32 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Because 4 | 5 | 6 | ## This PR 7 | 8 | 9 | ## Issue 10 | 19 | Closes #XXXXX 20 | 21 | ## Additional Information 22 | 23 | *No response* 24 | 25 | ### (Optional) Discord username 26 | 27 | *No response* 28 | 29 | ## Pull Request Requirements 30 | 31 | - [ ] I have thoroughly read and understand [Contributing Guide](https://github.com/nativeflowteam/nativeflowcss/blob/main/CONTRIBUTING.md) 32 | - [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `Sizing: Add padding support` 33 | - [ ] The `Because` section summarizes the reason for this PR 34 | - [ ] The `This PR` section has a bullet point list describing the changes in this PR 35 | - [ ] If this PR addresses an open issue, it is linked in the `Issue` section 36 | -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Cache dependencies 13 | id: npm-cache 14 | uses: actions/cache@v3 15 | with: 16 | path: | 17 | **/node_modules 18 | key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}-${{ hashFiles('**/package.json', '!node_modules/**') }} 19 | restore-keys: | 20 | ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }} 21 | ${{ runner.os }}-npm- 22 | 23 | - name: Install dependencies 24 | run: npm install 25 | shell: bash 26 | -------------------------------------------------------------------------------- /.github/labeler.yml: -------------------------------------------------------------------------------- 1 | "Spacing": 2 | - "src/spacing/*" 3 | 4 | "Flexbox": 5 | - "src/flexbox/*" 6 | 7 | "Border": 8 | - "src/border/*" 9 | 10 | "Typography": 11 | - "src/typography/*" 12 | 13 | "Layout": 14 | - "src/layout/*" 15 | 16 | "Effects": 17 | - "src/effects/*" 18 | 19 | "Sizing": 20 | - "src/sizing/*" 21 | 22 | "Transforms": 23 | - "src/transforms/*" 24 | 25 | "Shadow": 26 | - "src/shadow/*" 27 | 28 | "CI": 29 | - ".github/**/*" 30 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | merge_group: 10 | types: 11 | - checks_requested 12 | 13 | jobs: 14 | lint: 15 | runs-on: windows-latest 16 | steps: 17 | - name: Checkout 18 | uses: actions/checkout@v3 19 | 20 | - name: Setup 21 | uses: ./.github/actions/setup 22 | 23 | - name: Lint files 24 | run: npm run lint 25 | 26 | - name: Typecheck files 27 | run: npm run typecheck 28 | 29 | test: 30 | runs-on: windows-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | 35 | - name: Setup 36 | uses: ./.github/actions/setup 37 | 38 | - name: Run unit tests 39 | run: npm test -- --maxWorkers=2 --coverage 40 | 41 | build-library: 42 | runs-on: windows-latest 43 | steps: 44 | - name: Checkout 45 | uses: actions/checkout@v3 46 | 47 | - name: Setup 48 | uses: ./.github/actions/setup 49 | 50 | - name: Build package 51 | run: npm run prepare 52 | -------------------------------------------------------------------------------- /.github/workflows/issues.yml: -------------------------------------------------------------------------------- 1 | name: Comment on new issues 2 | on: 3 | issues: 4 | types: [opened] 5 | 6 | permissions: 7 | contents: read 8 | pull-requests: write 9 | issues: write 10 | 11 | jobs: 12 | triage: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Comment on new issues 17 | if: github.event_name == 'issues' && github.event.action == 'opened' 18 | uses: peter-evans/create-or-update-comment@v1 19 | with: 20 | token: "${{ secrets.GITHUB_TOKEN }}" 21 | issue-number: ${{ github.event.issue.number }} 22 | body: | 23 | Thank you for opening this issue 🎉 24 | 25 | Please do not start working on this issue or submit a pull request until a maintainer has assigned it to you. This helps us manage the workflow and avoid duplicate efforts. 26 | 27 | >We appreciate your understanding and cooperation. 28 | -------------------------------------------------------------------------------- /.github/workflows/labeler.yml: -------------------------------------------------------------------------------- 1 | name: "Pull Request Labeler" 2 | on: 3 | pull_request_target: 4 | types: [opened, synchronize, reopened] 5 | 6 | jobs: 7 | triage: 8 | permissions: 9 | contents: read 10 | pull-requests: write 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/labeler@v4 15 | with: 16 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 17 | -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | # This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. 2 | # 3 | # You can adjust the behavior by modifying this file. 4 | # For more information, see: 5 | # https://github.com/actions/stale 6 | 7 | name: Label inactive issues 8 | on: 9 | schedule: 10 | - cron: "30 1 * * *" 11 | 12 | jobs: 13 | stale: 14 | runs-on: ubuntu-latest 15 | permissions: 16 | issues: write 17 | pull-requests: write 18 | steps: 19 | - uses: actions/stale@v9 20 | with: 21 | stale-issue-label: "Status: Stale" 22 | days-before-issue-stale: 30 23 | days-before-issue-close: -1 24 | stale-issue-message: "This issue is stale because it has had no activity for the last 30 days." 25 | close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale." 26 | days-before-pr-stale: -1 27 | days-before-pr-close: -1 28 | operations-per-run: 100 29 | repo-token: ${{ secrets.GITHUB_TOKEN }} 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Yarn 64 | .yarn/* 65 | !.yarn/patches 66 | !.yarn/plugins 67 | !.yarn/releases 68 | !.yarn/sdks 69 | !.yarn/versions 70 | 71 | # Expo 72 | .expo/ 73 | 74 | # Turborepo 75 | .turbo/ 76 | 77 | # generated by bob 78 | lib/ 79 | 80 | # React Native Codegen 81 | ios/generated 82 | android/generated 83 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | #node.js 2 | node_modules/ 3 | lib/ 4 | package-lock.json 5 | package.json 6 | 7 | #example 8 | example/ 9 | 10 | # ci-cd 11 | workflows/ 12 | lefthook.yml 13 | 14 | #config 15 | .editorconfig 16 | .eslintignore 17 | .eslintrc.json 18 | .gitattributes 19 | .gitignore 20 | .prettierrc 21 | .watchmanconfig 22 | .yarnrc.yml 23 | babel.config.js 24 | bob.config.js 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "quoteProps": "consistent", 3 | "singleQuote": true, 4 | "tabWidth": 2, 5 | "trailingComma": "es5", 6 | "useTabs": false, 7 | "endOfLine": "auto", 8 | "semi": true 9 | } 10 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [nativeflowteam@gmail.com](mailto:nativeflowteam@gmail.com). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [Mozilla CoC]: https://github.com/mozilla/diversity 131 | [FAQ]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are always welcome, no matter how large or small! 4 | 5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). 6 | 7 | ## Table of Contents 8 | 9 | - [How to Contribute](#how-to-contribute) 10 | - [Setting up your local clone](#setting-up-your-local-clone) 11 | - [Working on Issue](#working-on-an-issue) 12 | - [Opening Pull Request](#opening-a-pull-request) 13 | 14 | ### How to Contribute 15 | 16 | #### Setting Up Your Local Clone 17 | 18 | Before you begin working on anything, make sure you follow these steps in order to set up a clone on your local machine: 19 | 20 | 1. Clone the repo in your local environment. If you don't know how to do so, follow the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo). 21 | 22 | 2. Clone the forked repo to your local machine with one of the commands below. You can also read the GitHub documentation on [cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository). 23 | 24 | ```bash 25 | # If you have SSH set up with Git: 26 | git clone git@github.com:nativeflowteam/nativeflowcss.git 27 | # Otherwise for HTTPS: 28 | git clone https://github.com/nativeflowteam/nativeflowcss.git 29 | ``` 30 | 31 | 3. `cd` into the directory of your local clone, remember to always pull the `main` branch before you branch out from it to continue working on other sections' respective branches. 32 | 33 | #### Working on an Issue 34 | 35 | Once you have the repo cloned, and the local environment has been set, you can begin working on your issue: 36 | 37 | 1. Create a new branch, replacing the `` with an actual branch name that briefly explains the purpose of the branch in some way: 38 | 39 | ```bash 40 | git checkout -b 41 | 42 | # Some examples: 43 | git checkout -b docs_update 44 | git checkout -b shadow_nits 45 | git checkout -b size_value_update 46 | ``` 47 | 48 | 2. Add commits as you work on your issue, replacing the `` text with your actual commit message: 49 | 50 | ```bash 51 | git commit -m "" -m "" 52 | 53 | # An example: 54 | git commit -m "Update README file" -m "Add how-to build from source" 55 | ``` 56 | 57 | 3. Sync your local environment every often so that you don't lose on any newer progress. 58 | - Firstly sync your fork with the latest added commits using GitHub GUI. 59 | 60 | ![update-pulls](./assets/update-branch.png) 61 | 62 | - Then pull those changes into your cloned repository. 63 | 64 | ```bash 65 | git pull 66 | ``` 67 | 68 | 4. Push your branch to our repo, replacing the `` with the branch you've been working on locally: 69 | 70 | ```bash 71 | git push origin 72 | 73 | # An example: 74 | git push origin size_fix 75 | ``` 76 | 77 | #### Opening a Pull Request 78 | 79 | 1. After pushing your changes, go to our repo on GitHub and click the "Compare & pull request" button. If you have multiple of these buttons, be sure you click the one for the correct branch. 80 | - If you don't see this button, you can click the branch dropdown menu and then select the branch you just pushed from your local clone: 81 | 82 | ![GitHub branch dropdown menu](./assets/main-branch.png) 83 | - Once you have switched to the correct branch on GitHub, click the "Contribute" dropdown and click the "Open pull request" button. 84 | 85 | 2. Fill the PR template summarising all new additions to your repositories, don't directly merge without a review by maintainers. 86 | 87 | 3. After your PR has been merged, delete it on the repo, just below the merged notification in the PR, there's an option to delete it, also delete that branch in your local environment and checkout to main to pull the updates. 88 | 89 | ```bash 90 | git branch -D branch_name 91 | git checkout main && git pull # pull only works if you synced your fork with main repo 92 | ``` 93 | 94 | **Thanks for contributing to our repo, Happy Coding <3 !** 95 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright 2024 [Jay Singh aka mathdebate09](https://github.com/mathdebate09) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | Display Name 4 | 5 |

6 | 7 | Tailwind-inspired utility-first style objects for React Native, zero-deps && zero-setup, plug-n-play 8 | 9 |

10 | 11 |

12 | Build Status 13 | Total Downloads 14 | Latest Release 15 | License 16 |

17 | 18 |
19 | 20 | ## Installation 21 | 22 | ```bash 23 | npm install nativeflowcss 24 | ``` 25 | 26 | ## Description 27 | 28 | A utility-first styling object library tailored for React Native, offering a rich set of utilities such as `justify.center`, `m.b_(4)`, and `bdr.color_slate_200`. These utilities can be composed to create any design, similar to the approach used by Tailwind. 29 | 30 | ## Documentation 31 | 32 | For complete docs on NativeFlow, Read at [nativeflow.js.org](https://nativeflow.js.org) 33 | 34 | ## Socials 35 | 36 | Feel free to drop by at the [Discord Server](https://discord.gg/KcKTtuqV3Y) or at [Github Discussions](https://github.com/nativeflowteam/nativeflowcss/discussions) 37 | 38 | ## Contributing 39 | 40 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 41 | 42 | ## License 43 | 44 | [MIT](LICENSE.md) 45 | 46 | ## Donations 47 | 48 | [![ko-fi](./assets/badges/kofi.svg)](https://ko-fi.com/Z8Z113CQW5) 49 | [![paypal](./assets/badges/paypal.svg)](https://www.paypal.me/jayowiee/) 50 | [![patreon](./assets/badges/patreon.svg)](https://patreon.com/nativeflow) 51 | 52 | > Made with ♥ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 53 | -------------------------------------------------------------------------------- /assets/badges/kofi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/badges/patreon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /assets/badges/paypal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/display-name.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/assets/logo.png -------------------------------------------------------------------------------- /assets/main-branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/assets/main-branch.jpg -------------------------------------------------------------------------------- /assets/update-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/assets/update-branch.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }], 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /bob.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | source: 'src', 3 | output: 'lib', 4 | targets: [ 5 | [ 6 | 'commonjs', 7 | { 8 | esm: true, 9 | }, 10 | ], 11 | [ 12 | 'module', 13 | { 14 | esm: true, 15 | }, 16 | ], 17 | [ 18 | 'typescript', 19 | { 20 | project: 'tsconfig.build.json', 21 | esm: true, 22 | }, 23 | ], 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/App'; 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "example", 4 | "slug": "example", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "ios": { 15 | "supportsTablet": true, 16 | "bundleIdentifier": "nativeflowcss.example" 17 | }, 18 | "android": { 19 | "adaptiveIcon": { 20 | "foregroundImage": "./assets/adaptive-icon.png", 21 | "backgroundColor": "#ffffff" 22 | }, 23 | "package": "nativeflowcss.example" 24 | }, 25 | "web": { 26 | "favicon": "./assets/favicon.png" 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/0f5039df6c29368eff8275f284d0e7b10146d5ac/example/assets/splash.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { getConfig } = require('react-native-builder-bob/babel-config'); 3 | const pkg = require('../package.json'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | 7 | module.exports = function (api) { 8 | api.cache(true); 9 | 10 | return getConfig( 11 | { 12 | presets: ['babel-preset-expo'], 13 | }, 14 | { root, pkg } 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { getDefaultConfig } = require('@expo/metro-config'); 3 | const { getConfig } = require('react-native-builder-bob/metro-config'); 4 | const pkg = require('../package.json'); 5 | 6 | const root = path.resolve(__dirname, '..'); 7 | 8 | /** 9 | * Metro configuration 10 | * https://facebook.github.io/metro/docs/configuration 11 | * 12 | * @type {import('metro-config').MetroConfig} 13 | */ 14 | module.exports = getConfig(getDefaultConfig(__dirname), { 15 | root, 16 | pkg, 17 | project: __dirname, 18 | }); 19 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativeflowcss-example", 3 | "version": "1.0.0", 4 | "main": "expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/metro-runtime": "~3.2.3", 13 | "expo": "~51.0.28", 14 | "expo-status-bar": "~1.12.1", 15 | "react": "18.2.0", 16 | "react-dom": "18.2.0", 17 | "react-native": "0.74.5", 18 | "react-native-web": "~0.19.10" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.20.0", 22 | "react-native-builder-bob": "^0.30.0" 23 | }, 24 | "private": true 25 | } 26 | -------------------------------------------------------------------------------- /example/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import { Text, View, Button, TextInput } from 'react-native' 3 | import { p, m, flex, border } from 'nativeflowcss' 4 | 5 | export default function App() { 6 | const [currentGoalInput, setCurrentGoalInput] = useState('') 7 | const [goalsList, setGoalsList] = useState([]) 8 | 9 | function handleGoalInput(input) { 10 | setCurrentGoalInput(input) 11 | } 12 | 13 | function handleGoalAdd() { 14 | setGoalsList((currentGoalsList) => [...currentGoalsList, currentGoalInput]) 15 | } 16 | 17 | return ( 18 | 19 | 28 | 34 |