├── .nvmrc ├── .watchmanconfig ├── example ├── App.js ├── assets │ ├── icon.png │ ├── favicon.png │ ├── splash.png │ └── adaptive-icon.png ├── babel.config.js ├── metro.config.js ├── package.json ├── app.json └── src │ └── App.jsx ├── src ├── __tests__ │ └── index.test.tsx ├── types │ ├── border.ts │ ├── typography.ts │ ├── flexbox.ts │ ├── effects.ts │ ├── layout.ts │ └── spacing.ts ├── layout │ ├── overflow.ts │ ├── display.ts │ ├── z-index.ts │ ├── direction.ts │ ├── object-fit.ts │ ├── aspect.ts │ └── position.ts ├── flexbox │ ├── justify.ts │ ├── place.ts │ ├── align.ts │ └── flex.ts ├── index.ts ├── sizing │ ├── size.ts │ ├── w.ts │ └── h.ts ├── typography │ ├── decoration.ts │ └── text.ts ├── shadow │ └── shadow.ts ├── effects │ └── fx.ts ├── spacing │ ├── margin.ts │ └── padding.ts ├── utils │ └── colorList.ts └── border │ └── bdr.ts ├── .gitattributes ├── assets ├── logo.png ├── main-branch.jpg ├── update-branch.png ├── badges │ ├── kofi.svg │ ├── patreon.svg │ └── paypal.svg └── display-name.svg ├── tsconfig.build.json ├── babel.config.js ├── .prettierrc ├── lefthook.yml ├── .editorconfig ├── .eslintignore ├── .prettierignore ├── bob.config.js ├── .eslintrc.json ├── .github ├── workflows │ ├── labeler.yml │ ├── issues.yml │ ├── stale.yml │ └── ci.yml ├── labeler.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── bug_report.md │ └── enhancement.md ├── actions │ └── setup │ │ └── action.yml └── PULL_REQUEST_TEMPLATE.md ├── tsconfig.json ├── LICENSE.md ├── .gitignore ├── README.md ├── CONTRIBUTING.md ├── package.json └── CODE_OF_CONDUCT.md /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/App'; 2 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | it.todo('write a test'); 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/assets/logo.png -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "exclude": ["example", "lib"] 4 | } 5 | -------------------------------------------------------------------------------- /assets/main-branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/assets/main-branch.jpg -------------------------------------------------------------------------------- /assets/update-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/assets/update-branch.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/example/assets/splash.png -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeflowteam/nativeflowcss/HEAD/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }], 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /src/types/border.ts: -------------------------------------------------------------------------------- 1 | import type { TextStyle } from 'react-native'; 2 | 3 | export interface BorderStyles { 4 | [key: string]: TextStyle | ((...args: any[]) => TextStyle); 5 | } 6 | -------------------------------------------------------------------------------- /src/types/typography.ts: -------------------------------------------------------------------------------- 1 | import type { TextStyle } from 'react-native'; 2 | 3 | export interface ColuredTextStyle { 4 | [key: string]: TextStyle | ((...args: any[]) => TextStyle); 5 | } 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/layout/overflow.ts: -------------------------------------------------------------------------------- 1 | const overflow = { 2 | visible: { overflow: 'visible' }, 3 | hidden: { overflow: 'hidden' }, 4 | }; 5 | 6 | // Example usage 7 | // console.log(overflow.visible); // { overflow: 'visible' } 8 | // console.log(overflow.hidden); // { overflow: 'hidden' } 9 | 10 | export default overflow; 11 | -------------------------------------------------------------------------------- /src/types/flexbox.ts: -------------------------------------------------------------------------------- 1 | export type Flex = { 2 | flex?: number; 3 | gap?: number; 4 | flexWrap?: string; 5 | alignContent?: string; 6 | alignSelf?: string; 7 | flexDirection?: string; 8 | flexGrow?: number; 9 | flexShrink?: number; 10 | flexBasis?: number | 'auto'; 11 | rowGap?: number; 12 | columnGap?: number; 13 | }; 14 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | glob: '*.{js,ts,jsx,tsx}' 6 | run: npx eslint {staged_files} 7 | types: 8 | glob: '*.{js,ts, jsx, tsx}' 9 | run: npx tsc 10 | commit-msg: 11 | parallel: true 12 | commands: 13 | commitlint: 14 | run: npx commitlint --edit 15 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/types/effects.ts: -------------------------------------------------------------------------------- 1 | import type { ViewStyle, ImageStyle } from 'react-native'; 2 | 3 | export interface BgStyles { 4 | [key: string]: 5 | | ViewStyle 6 | | ImageStyle 7 | | ((...args: any[]) => ViewStyle | ImageStyle); 8 | } 9 | 10 | export interface ShadowStyles { 11 | [key: string]: ViewStyle | ((...args: any[]) => ViewStyle); 12 | } 13 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/layout/display.ts: -------------------------------------------------------------------------------- 1 | import type { Display } from '../types/layout'; 2 | 3 | const display: { [key: string]: Display } = { 4 | hidden: { display: 'none' }, 5 | flex: { display: 'flex' }, 6 | }; 7 | 8 | // Example usage 9 | // const hiddenDisplay = display.hidden; // { display: 'none' } 10 | // const flexDisplay = display.flex; // { display: 'flex' } 11 | 12 | export default display; 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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/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 | -------------------------------------------------------------------------------- /src/flexbox/justify.ts: -------------------------------------------------------------------------------- 1 | const justify = { 2 | center: { 3 | justifyContent: 'center', 4 | }, 5 | start: { 6 | justifyContent: 'flex-start', 7 | }, 8 | end: { 9 | justifyContent: 'flex-end', 10 | }, 11 | between: { 12 | justifyContent: 'space-between', 13 | }, 14 | around: { 15 | justifyContent: 'space-around', 16 | }, 17 | evenly: { 18 | justifyContent: 'space-evenly', 19 | }, 20 | }; 21 | 22 | export default justify; 23 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/types/layout.ts: -------------------------------------------------------------------------------- 1 | export type AspectRatio = { 2 | aspectRatio: number | string; 3 | }; 4 | 5 | export type Direction = { 6 | direction: 'inherit' | 'ltr' | 'rtl'; 7 | }; 8 | 9 | export type Display = { 10 | display: 'none' | 'flex'; 11 | }; 12 | 13 | export type SizeMode = 14 | | 'cover' 15 | | 'contain' 16 | | 'stretch' 17 | | 'repeat' 18 | | 'center' 19 | | 'fill' 20 | | 'scale_down'; 21 | 22 | export type PositionValue = { [key: string]: number | string }; 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/types/spacing.ts: -------------------------------------------------------------------------------- 1 | export type Padding = { 2 | padding?: number; 3 | paddingTop?: number; 4 | paddingBottom?: number; 5 | paddingLeft?: number; 6 | paddingRight?: number; 7 | paddingHorizontal?: number; 8 | paddingVertical?: number; 9 | paddingStart?: number; 10 | paddingEnd?: number; 11 | }; 12 | 13 | export type Margin = { 14 | margin?: number; 15 | marginTop?: number; 16 | marginBottom?: number; 17 | marginLeft?: number; 18 | marginRight?: number; 19 | marginHorizontal?: number; 20 | marginVertical?: number; 21 | marginStart?: number; 22 | marginEnd?: number; 23 | }; 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/flexbox/place.ts: -------------------------------------------------------------------------------- 1 | const place = { 2 | items_center: { 3 | alignItems: 'center', 4 | justifyContent: 'center', 5 | }, 6 | items_stretch: { 7 | alignItems: 'stretch', 8 | justifyContent: 'stretch', 9 | }, 10 | items_start: { 11 | alignItems: 'flex-start', 12 | justifyContent: 'flex-start', 13 | }, 14 | items_end: { 15 | alignItems: 'flex-end', 16 | justifyContent: 'flex-end', 17 | }, 18 | items_between: { 19 | alignItems: 'center', 20 | justifyContent: 'space-between', 21 | }, 22 | items_around: { 23 | alignItems: 'center', 24 | justifyContent: 'space-around', 25 | }, 26 | items_evenly: { 27 | alignItems: 'center', 28 | justifyContent: 'space-evenly', 29 | }, 30 | }; 31 | 32 | export default place; 33 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/layout/z-index.ts: -------------------------------------------------------------------------------- 1 | const z = { 2 | index_0: { zIndex: 0 }, 3 | index_10: { zIndex: 10 }, 4 | index_20: { zIndex: 20 }, 5 | index_30: { zIndex: 30 }, 6 | index_40: { zIndex: 40 }, 7 | index_50: { zIndex: 50 }, 8 | index_auto: { zIndex: 'auto' }, 9 | 10 | index_(value: number | string): { zIndex: number | 'auto' } { 11 | if (value === 'auto') { 12 | return { zIndex: 'auto' }; 13 | } else if (!isNaN(Number(value))) { 14 | return { zIndex: Number(value) }; 15 | } else { 16 | throw new Error('Invalid zIndex value'); 17 | } 18 | }, 19 | }; 20 | 21 | // Example usage 22 | // console.log(z.index_(10)); // { zIndex: 10 } 23 | // console.log(z.index_('auto')); // { zIndex: 'auto' } 24 | // console.log(z.index_('20')); // { zIndex: 20 } 25 | // console.log(z.index_('invalid')); // Error: Invalid zIndex value 26 | 27 | export default z; 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDir": ".", 4 | "paths": { 5 | "nativeflowcss": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "jsx": "react-jsx", 12 | "lib": ["ESNext"], 13 | "module": "ESNext", 14 | "moduleResolution": "Bundler", 15 | "noEmit": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "noImplicitReturns": true, 18 | "noImplicitUseStrict": false, 19 | "noStrictGenericChecks": false, 20 | "noUncheckedIndexedAccess": true, 21 | "noUnusedLocals": true, 22 | "noUnusedParameters": true, 23 | "resolveJsonModule": true, 24 | "skipLibCheck": true, 25 | "strict": true, 26 | "target": "ESNext", 27 | "verbatimModuleSyntax": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/layout/direction.ts: -------------------------------------------------------------------------------- 1 | import type { Direction } from '../types/layout'; 2 | 3 | const directionValues: { [key: string]: Direction['direction'] } = { 4 | inherit: 'inherit', 5 | ltr: 'ltr', 6 | rtl: 'rtl', 7 | }; 8 | 9 | const getDirectionValue = (key: string): Direction => { 10 | const value = directionValues[key]; 11 | if (value === undefined) throw new Error(`Invalid direction key: ${key}`); 12 | return { direction: value }; 13 | }; 14 | 15 | const direction: { [key: string]: Direction } = {}; 16 | 17 | Object.keys(directionValues).forEach((key) => { 18 | direction[key] = getDirectionValue(key); 19 | }); 20 | 21 | // Example usage 22 | // const inheritDirection = direction.inherit; // { direction: 'inherit' } 23 | // const ltrDirection = direction.ltr; // { direction: 'ltr' } 24 | // const rtlDirection = direction.rtl; // { direction: 'rtl' } 25 | 26 | export default direction; 27 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/layout/object-fit.ts: -------------------------------------------------------------------------------- 1 | import type { SizeMode } from '../types/layout'; 2 | 3 | const object_fit: { 4 | [key: string]: { resizeMode: SizeMode } | { objectFit: SizeMode }; 5 | } = { 6 | cover: { resizeMode: 'cover' }, 7 | contain: { resizeMode: 'contain' }, 8 | stretch: { resizeMode: 'stretch' }, 9 | repeat: { resizeMode: 'repeat' }, 10 | center: { resizeMode: 'center' }, 11 | fill: { objectFit: 'fill' }, 12 | scale_down: { objectFit: 'scale_down' }, 13 | }; 14 | 15 | // Example usage 16 | // const coverResizeMode = object_fit.cover; // { resizeMode: 'cover' } 17 | // const containResizeMode = object_fit.contain; // { resizeMode: 'contain' } 18 | // const stretchResizeMode = object_fit.stretch; // { resizeMode: 'stretch' } 19 | // const repeatResizeMode = object_fit.repeat; // { resizeMode: 'repeat' } 20 | // const centerResizeMode = object_fit.center; // { resizeMode: 'center' } 21 | // const fillResizeMode = object_fit.fill; // { objectFit: 'fill' } 22 | // const scaleDownResizeMode = object_fit.scale_down; // { objectFit: 'scale_down' } 23 | 24 | export default object_fit; 25 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/flexbox/align.ts: -------------------------------------------------------------------------------- 1 | const align = { 2 | items_center: { 3 | alignItems: 'center', 4 | }, 5 | items_start: { 6 | alignItems: 'flex-start', 7 | }, 8 | items_end: { 9 | alignItems: 'flex-end', 10 | }, 11 | items_baseline: { 12 | alignItems: 'baseline', 13 | }, 14 | items_stretch: { 15 | alignItems: 'stretch', 16 | }, 17 | content_center: { 18 | alignContent: 'center', 19 | }, 20 | content_start: { 21 | alignContent: 'flex-start', 22 | }, 23 | content_end: { 24 | alignContent: 'flex-end', 25 | }, 26 | content_stretch: { 27 | alignContent: 'stretch', 28 | }, 29 | content_between: { 30 | alignContent: 'space-between', 31 | }, 32 | content_around: { 33 | alignContent: 'space-around', 34 | }, 35 | self_auto: { 36 | alignSelf: 'auto', 37 | }, 38 | self_center: { 39 | alignSelf: 'center', 40 | }, 41 | self_start: { 42 | alignSelf: 'flex-start', 43 | }, 44 | self_end: { 45 | alignSelf: 'flex-end', 46 | }, 47 | self_stretch: { 48 | alignSelf: 'stretch', 49 | }, 50 | self_baseline: { 51 | alignSelf: 'baseline', 52 | }, 53 | }; 54 | 55 | export default align; 56 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | // Spacing 2 | import p from './spacing/padding'; 3 | import m from './spacing/margin'; 4 | 5 | // Layout 6 | import aspect from './layout/aspect'; 7 | import object_fit from './layout/object-fit'; 8 | import display from './layout/display'; 9 | import direction from './layout/direction'; 10 | import pos from './layout/position'; 11 | import z from './layout/z-index'; 12 | import overflow from './layout/overflow'; 13 | 14 | // Flexbox 15 | import flex from './flexbox/flex'; 16 | import align from './flexbox/align'; 17 | import justify from './flexbox/justify'; 18 | import place from './flexbox/place'; 19 | 20 | // Border 21 | import bdr from './border/bdr'; 22 | 23 | // Effects 24 | import fx from './effects/fx'; 25 | 26 | // Shadow 27 | import shadow from './shadow/shadow'; 28 | 29 | // Sizing 30 | import h from './sizing/h'; 31 | import w from './sizing/w'; 32 | import size from './sizing/size'; 33 | 34 | // Typography 35 | import text from './typography/text'; 36 | import decoration from './typography/decoration'; 37 | 38 | export { 39 | p, 40 | m, 41 | aspect, 42 | object_fit, 43 | display, 44 | direction, 45 | pos, 46 | z, 47 | overflow, 48 | flex, 49 | align, 50 | justify, 51 | place, 52 | bdr, 53 | fx, 54 | shadow, 55 | h, 56 | w, 57 | size, 58 | text, 59 | decoration, 60 | }; 61 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 |