├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature-request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── build-and-deploy.yml │ └── build-pr.yaml ├── .gitignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── config-overrides.js ├── injectLatestProps.js ├── package.json ├── patches └── @react-native-community+toolbar-android+0.1.0-rc.2.patch ├── public ├── CNAME ├── _redirects ├── favicon.ico ├── index.html ├── logo.png ├── logo192.png ├── logo512.png ├── manifest.json ├── netlify.toml ├── robots.txt └── thumbnail.png └── src ├── App.css ├── App.js ├── App.test.js ├── assets ├── RNE_Logo.png ├── SVG │ ├── bootstrap.svg │ ├── design.svg │ ├── explore.svg │ └── tweak.svg └── sample.jpg ├── components ├── Footer │ ├── Footer.module.css │ └── index.jsx ├── PropDrawer │ └── index.jsx └── playground │ └── index.jsx ├── containers ├── Drawer │ └── index.jsx ├── Navigation │ └── index.jsx ├── Spinner │ └── index.jsx └── index.jsx ├── content ├── AirbnbRating │ ├── airbnbrating.playground.jsx │ └── index.jsx ├── Avatar │ ├── avatar.playground.jsx │ └── index.jsx ├── Badge │ ├── badge.playground.jsx │ └── index.jsx ├── BottomSheet │ ├── bottomsheet.playground.jsx │ └── index.jsx ├── Button │ ├── button.playground.jsx │ └── index.jsx ├── ButtonGroup │ ├── buttongroup.playground.jsx │ └── index.jsx ├── Card │ ├── card.playground.jsx │ └── index.jsx ├── CheckBox │ ├── checkbox.playground.jsx │ └── index.jsx ├── Divider │ ├── divider.playground.jsx │ └── index.jsx ├── FAB │ ├── fab.playground.jsx │ └── index.jsx ├── Header │ ├── header.playground.jsx │ └── index.jsx ├── Icon │ ├── icon.playground.jsx │ └── index.jsx ├── Image │ ├── index.jsx │ └── input.playground.jsx ├── Input │ ├── index.jsx │ └── input.playground.jsx ├── LinearProgress │ ├── index.jsx │ └── linearprogress.playground.jsx ├── ListItem │ ├── index.jsx │ └── listitem.playground.jsx ├── Overlay │ ├── index.jsx │ └── overlay.playground.jsx ├── Pricing │ ├── index.jsx │ └── pricing.playground.jsx ├── Rating │ ├── index.jsx │ └── rating.playground.jsx ├── SearchBar │ ├── index.jsx │ └── searchbar.playground.jsx ├── Slider │ ├── index.jsx │ └── slider.playground.jsx ├── SocialIcon │ ├── index.jsx │ └── socialicon.playground.jsx ├── SpeedDial │ ├── index.jsx │ └── speeddial.playground.jsx ├── Switch │ ├── index.jsx │ └── switch.playground.jsx ├── Tab │ ├── index.jsx │ └── tab.playground.jsx ├── Text │ ├── index.jsx │ └── text.playground.jsx ├── Tile │ ├── index.jsx │ └── tile.playground.jsx ├── ToolTip │ ├── index.jsx │ └── tooltip.playground.jsx └── utils │ └── createReactViewBaseConfig.js ├── index.css ├── index.js ├── logo.svg ├── pages ├── explore │ ├── Explore.module.css │ └── index.jsx └── home │ ├── animation.json │ ├── animation.jsx │ └── index.jsx └── serviceWorker.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 2019, 4 | "sourceType": "module", 5 | // enable jsx support 6 | "ecmaFeatures": { 7 | "jsx": true 8 | } 9 | }, 10 | "extends": [ 11 | "eslint:recommended", 12 | "plugin:react/recommended", 13 | "plugin:jest/recommended", 14 | "plugin:react-hooks/recommended", 15 | "plugin:jsx-a11y/recommended", 16 | "plugin:json/recommended" 17 | ], 18 | "rules": { 19 | "react/jsx-uses-react": "error", 20 | "react/jsx-uses-vars": "error", 21 | "react-hooks/rules-of-hooks": "error", 22 | "react-hooks/exhaustive-deps": "warn" 23 | }, 24 | "env": { 25 | "browser": true, 26 | "node": true, 27 | "commonjs": true, 28 | "es6": true 29 | }, 30 | "plugins": ["react", "jest", "react-hooks", "jsx-a11y"], 31 | "settings": { 32 | "react": { 33 | "version": "detect" 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | --- 5 | 6 | 11 | 12 | **Explain what you did (Required)** 13 | 14 | 15 | 16 | **Expected behavior (Required)** 17 | 18 | 19 | 20 | **Describe the bug (Required)** 21 | 22 | 23 | 24 | **To Reproduce (Required)** 25 | 26 | > We highly recommend that you re-create the bug on [Snack](https://snack.expo.io). If not, list the steps that a reviewer can take to reproduce the behaviour: 27 | 28 | Example: 29 | 30 | **Snack** : https://snack.expo.io/xxx 31 | 32 | - Steps 33 | 1. Go to '...' 34 | 2. Click on '....' 35 | 3. Scroll down to '....' 36 | 4. See error 37 | 38 | **Screenshots (Required)** 39 | 40 | 41 | 42 | **Your Environment (Required):** 43 | 44 | | software | version | 45 | | --------------------- | ------- | 46 | | react-native-elements | | 47 | | react-native | | 48 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea or enhancement for this project 4 | --- 5 | 6 | **Is your feature request related to a problem? Please Describe.** 7 | 8 | 9 | 10 | **Describe the solution you'd like** 11 | 12 | 13 | 14 | **Describe alternatives you've considered** 15 | 16 | 17 | 18 | **Additional context** 19 | 20 | 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | **What kind of change does this PR introduce?** 4 | 5 | 6 | 7 | **Did you add tests for your changes?** 8 | 9 | **If relevant, did you update the documentation?** 10 | 11 | **Summary** 12 | 13 | 14 | 15 | 16 | **Does this PR introduce a breaking change?** 17 | 18 | 19 | 20 | **Other information** 21 | -------------------------------------------------------------------------------- /.github/workflows/build-and-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 🛎️ 11 | uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. 12 | with: 13 | persist-credentials: false 14 | 15 | - name: Setup Node.js Env 16 | uses: actions/setup-node@v2 17 | with: 18 | node-version: "12" 19 | - name: Install svn 20 | run: sudo apt-get install subversion 21 | - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. 22 | run: | 23 | npm i 24 | npm run prepare 25 | npm run build 26 | env: 27 | CI: false 28 | 29 | - name: Deploy 🚀 30 | uses: JamesIves/github-pages-deploy-action@3.7.1 31 | with: 32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 33 | BRANCH: gh-pages # The branch the action should deploy to. 34 | FOLDER: build # The folder the action should deploy. 35 | CLEAN: true # Automatically remove deleted files from the deploy branch 36 | -------------------------------------------------------------------------------- /.github/workflows/build-pr.yaml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: [pull_request] 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout 🛎️ 8 | uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. 9 | with: 10 | persist-credentials: false 11 | 12 | - name: Setup Node.js Env 13 | uses: actions/setup-node@v2 14 | with: 15 | node-version: "12" 16 | - name: Install svn 17 | run: sudo apt-get install subversion 18 | - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. 19 | run: | 20 | npm i 21 | npm run prepare 22 | npm run build 23 | env: 24 | CI: false 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .idea 21 | package-json.lock 22 | package-lock.json 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | yarn.lock 27 | 28 | # Remote docs 29 | src/content/Props 30 | react-native-elements 31 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 80, 10 | "proseWrap": "always", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": true, 14 | "singleQuote": false, 15 | "tabWidth": 2, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": false, 19 | "endOfLine": "auto" 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", 4 | "vscodeshift.material-ui-snippets", 5 | "dbaeumer.vscode-eslint" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | /* recommmended settings for vscode */ 2 | { 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.formatOnSave": true, 5 | "editor.rulers": [80], 6 | "editor.snippetSuggestions": "top", 7 | "[javascript]": { 8 | "editor.defaultFormatter": "esbenp.prettier-vscode", 9 | "editor.suggestSelection": "recentlyUsed", 10 | "editor.suggest.showKeywords": false 11 | }, 12 | "files.exclude": { 13 | "USE_GITIGNORE": true 14 | }, 15 | "search.exclude": { 16 | "**/node_modules": true, 17 | "**/bower_components": true, 18 | "**/coverage": true, 19 | "**/dist": true, 20 | "**/build": true, 21 | "**/.build": true, 22 | "**/.gh-pages": true 23 | }, 24 | "editor.codeActionsOnSave": { 25 | "source.fixAll.eslint": false 26 | }, 27 | "eslint.validate": [ 28 | "javascript", 29 | "javascriptreact", 30 | "typescript", 31 | "typescriptreact" 32 | ], 33 | "eslint.options": { 34 | "env": { 35 | "browser": true, 36 | "jest/globals": true, 37 | "es6": true 38 | }, 39 | "parserOptions": { 40 | "ecmaVersion": 2019, 41 | "sourceType": "module", 42 | "ecmaFeatures": { 43 | "jsx": true 44 | } 45 | }, 46 | "rules": { 47 | "no-debugger": "off" 48 | } 49 | }, 50 | "editor.formatOnPaste": false 51 | } 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2016 Nader Dabit 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | react-native-elements 4 | 5 |

6 | 7 |

8 | React Native Elements Playground 🚀
9 | React Native elements Playground is An interactive component playground. Which allows you to interact with different React Native Element Components. 10 |

11 |
12 |

13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 | 30 |
31 |
32 | 33 | ![React Native Elements UI Toolkit](https://github.com/react-native-elements/playground/blob/master/public/thumbnail.png) 34 | 35 | ### Installation 36 | 37 | 1. Clone the repo 38 | 39 | ```sh 40 | git clone https://github.com/react-native-elements/playground.git 41 | cd playground 42 | ``` 43 | 44 | 2. Install NPM packages 45 | 46 | ```sh 47 | npm i 48 | ``` 49 | 50 | 3. Prepare (File path is UNIX based, might not work with Windows. PR Appreciated) 51 | 52 | ```sh 53 | npm run prepare 54 | ``` 55 | 56 | 4. Run the development server 57 | 58 | ```sh 59 | npm start 60 | ``` 61 | 62 | ## Releated Projects 63 | 64 | 65 | - React Native Elements 66 |
67 | 68 | - React Native Elements Storybook 69 |
70 | 71 | - React Native Elements App 72 |
73 | 74 | ## Documentation 75 | 76 | [View the full docs of React Native elements here](https://reactnativeelements.com/docs/overview) 77 | 78 | ## Contributing 79 | 80 | Interested in contributing to this repo? Check out our 81 | [Contributing Guide](https://reactnativeelements.com/docs/contributing) 82 | and submit a PR for a new feature/bug fix. 83 | 84 | ### First Contributors 85 | 86 | We encourage everyone to contribute & submit PR's especially first-time 87 | contributors. Look for the label `Good First Issue` on the issues. Click 88 | [here](https://github.com/react-native-elements/playground/labels/%F0%9F%91%B6%20Good%20First%20Issue) 89 | to see them. 90 | 91 | If there is something you's like to see or request a new feature, please submit 92 | an 93 | [issue](https://github.com/react-native-elements/playground/issues/new/choose) 94 | or a 95 | [pull request](https://github.com/react-native-elements/playground/pulls). 96 | 97 | ### Slack Community 98 | 99 | In case you have any other question or would like to come say **Hi!** to the RNE 100 | community, join our [Slack team](https://react-native-elements-slack.herokuapp.com). 101 | See you on the other side! 👋😃 102 | 103 | ## Backers 104 | 105 | [Become a backer](https://opencollective.com/react-native-elements#backer) and show your support for React Native Elements. 106 | 107 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/0/avatar)](https://opencollective.com/react-native-elements/backer/0/website) 108 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/1/avatar)](https://opencollective.com/react-native-elements/backer/1/website) 109 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/2/avatar)](https://opencollective.com/react-native-elements/backer/2/website) 110 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/3/avatar)](https://opencollective.com/react-native-elements/backer/3/website) 111 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/4/avatar)](https://opencollective.com/react-native-elements/backer/4/website) 112 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/5/avatar)](https://opencollective.com/react-native-elements/backer/5/website) 113 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/6/avatar)](https://opencollective.com/react-native-elements/backer/6/website) 114 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/7/avatar)](https://opencollective.com/react-native-elements/backer/7/website) 115 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/8/avatar)](https://opencollective.com/react-native-elements/backer/8/website) 116 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/9/avatar)](https://opencollective.com/react-native-elements/backer/9/website) 117 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/10/avatar)](https://opencollective.com/react-native-elements/backer/10/website) 118 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/11/avatar)](https://opencollective.com/react-native-elements/backer/11/website) 119 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/12/avatar)](https://opencollective.com/react-native-elements/backer/12/website) 120 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/13/avatar)](https://opencollective.com/react-native-elements/backer/13/website) 121 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/14/avatar)](https://opencollective.com/react-native-elements/backer/14/website) 122 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/15/avatar)](https://opencollective.com/react-native-elements/backer/15/website) 123 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/16/avatar)](https://opencollective.com/react-native-elements/backer/16/website) 124 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/17/avatar)](https://opencollective.com/react-native-elements/backer/17/website) 125 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/18/avatar)](https://opencollective.com/react-native-elements/backer/18/website) 126 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/19/avatar)](https://opencollective.com/react-native-elements/backer/19/website) 127 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/20/avatar)](https://opencollective.com/react-native-elements/backer/20/website) 128 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/21/avatar)](https://opencollective.com/react-native-elements/backer/21/website) 129 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/22/avatar)](https://opencollective.com/react-native-elements/backer/22/website) 130 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/23/avatar)](https://opencollective.com/react-native-elements/backer/23/website) 131 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/24/avatar)](https://opencollective.com/react-native-elements/backer/24/website) 132 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/25/avatar)](https://opencollective.com/react-native-elements/backer/25/website) 133 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/26/avatar)](https://opencollective.com/react-native-elements/backer/26/website) 134 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/27/avatar)](https://opencollective.com/react-native-elements/backer/27/website) 135 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/28/avatar)](https://opencollective.com/react-native-elements/backer/28/website) 136 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/backer/29/avatar)](https://opencollective.com/react-native-elements/backer/29/website) 137 | 138 | ## Sponsors 139 | 140 | Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show [on GitHub](https://github.com/react-native-elements/react-native-elements#sponsors) and link to your website - who doesn't want a little extra exposure? [Here's the info](https://opencollective.com/react-native-elements#sponsor). 141 | 142 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/0/avatar)](https://opencollective.com/react-native-elements/sponsor/0/website) 143 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/1/avatar)](https://opencollective.com/react-native-elements/sponsor/1/website) 144 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/2/avatar)](https://opencollective.com/react-native-elements/sponsor/2/website) 145 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/3/avatar)](https://opencollective.com/react-native-elements/sponsor/3/website) 146 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/4/avatar)](https://opencollective.com/react-native-elements/sponsor/4/website) 147 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/5/avatar)](https://opencollective.com/react-native-elements/sponsor/5/website) 148 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/6/avatar)](https://opencollective.com/react-native-elements/sponsor/6/website) 149 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/7/avatar)](https://opencollective.com/react-native-elements/sponsor/7/website) 150 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/8/avatar)](https://opencollective.com/react-native-elements/sponsor/8/website) 151 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/9/avatar)](https://opencollective.com/react-native-elements/sponsor/9/website) 152 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/10/avatar)](https://opencollective.com/react-native-elements/sponsor/10/website) 153 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/11/avatar)](https://opencollective.com/react-native-elements/sponsor/11/website) 154 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/12/avatar)](https://opencollective.com/react-native-elements/sponsor/12/website) 155 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/13/avatar)](https://opencollective.com/react-native-elements/sponsor/13/website) 156 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/14/avatar)](https://opencollective.com/react-native-elements/sponsor/14/website) 157 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/15/avatar)](https://opencollective.com/react-native-elements/sponsor/15/website) 158 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/16/avatar)](https://opencollective.com/react-native-elements/sponsor/16/website) 159 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/17/avatar)](https://opencollective.com/react-native-elements/sponsor/17/website) 160 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/18/avatar)](https://opencollective.com/react-native-elements/sponsor/18/website) 161 | [![React Native Elements Backer](https://opencollective.com/react-native-elements/sponsor/19/avatar)](https://opencollective.com/react-native-elements/sponsor/19/website) 162 | -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { 3 | override, 4 | addBabelPlugins, 5 | babelInclude, 6 | addWebpackAlias, 7 | addBabelPresets, 8 | } = require("customize-cra"); 9 | 10 | module.exports = override( 11 | ...addBabelPlugins("@babel/plugin-proposal-class-properties"), 12 | ...addBabelPresets([ 13 | "@babel/preset-env", 14 | { 15 | targets: { 16 | browsers: ["> 1%", "last 2 versions"], 17 | }, 18 | modules: "commonjs", 19 | }, 20 | ]), 21 | babelInclude( 22 | [ 23 | path.resolve(__dirname, "node_modules/react-native-elements"), 24 | path.resolve(__dirname, "node_modules/react-native-vector-icons"), 25 | path.resolve(__dirname, "node_modules/react-native-ratings"), 26 | path.resolve(__dirname, "src"), 27 | ], 28 | addWebpackAlias({ 29 | "react-native$": "react-native-web", 30 | "react-native-linear-gradient": "react-native-web-linear-gradient", 31 | }) 32 | ) 33 | ); 34 | -------------------------------------------------------------------------------- /injectLatestProps.js: -------------------------------------------------------------------------------- 1 | const { execSync } = require("child_process"); 2 | const findRemoveSync = require("find-remove"); 3 | const cpDir = require("copy-dir"); 4 | 5 | /* 6 | * 1. find and delete any directory named react-native-elements 7 | * 2. find and delete any directory named Props 8 | * 3. clone the react-native-elements(https://github.com/react-native-elements/react-native-elements) repo 9 | * 4. copy Props folder from cloned repo into our project 10 | */ 11 | 12 | try { 13 | // Point 1. depth=1 required (to avoid deleting node_modules/react-native-elements) 14 | let result = findRemoveSync(".", { 15 | maxLevel: 1, 16 | dir: "react-native-elements", 17 | }); 18 | console.log("✔️ Removed ?: ", result); 19 | 20 | // Point 2 21 | result = findRemoveSync("./src/content", { dir: "Props" }); 22 | console.log("✔️ Removed ?: ", result); 23 | 24 | // Point 3 25 | execSync( 26 | "git clone https://github.com/react-native-elements/react-native-elements --depth=1", 27 | (err, stdout, stderr) => { 28 | if (err) { 29 | // node couldn't execute the command 30 | return; 31 | } 32 | // the *entire* stdout and stderr (buffered) 33 | console.log(`stdout: ${stdout}`); 34 | console.log(`stderr: ${stderr}`); 35 | } 36 | ); 37 | console.log("✔️ Cloned react-native-elements"); 38 | 39 | execSync( 40 | "sed -i '/## Props/,$!d' ./react-native-elements/website/docs/main/*.mdx", 41 | (err, stdout, stderr) => { 42 | if (err) { 43 | // node couldn't execute the command 44 | return; 45 | } 46 | // the *entire* stdout and stderr (buffered) 47 | console.log(`stdout: ${stdout}`); 48 | console.log(`stderr: ${stderr}`); 49 | } 50 | ); 51 | 52 | // Point 4 53 | cpDir.sync( 54 | "./react-native-elements/website/docs/main", 55 | "./src/content/Props" 56 | ); 57 | console.log("✔️ Copied Props to src/content/Props"); 58 | } catch (err) { 59 | console.error(err); 60 | return; 61 | } 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-elements-playground", 3 | "version": "3.0.0", 4 | "private": true, 5 | "homepage": "https://react-native-elements.js.org", 6 | "dependencies": { 7 | "@material-ui/core": "^4.11.0", 8 | "@material-ui/icons": "^4.9.1", 9 | "@material-ui/styles": "^4.10.0", 10 | "@react-native-community/toolbar-android": "^0.1.0-rc.2", 11 | "copy-dir": "^1.3.0", 12 | "find-remove": "^3.0.0", 13 | "history": "^5.0.0", 14 | "mdx.macro": "^0.2.9", 15 | "modal-react-native-web": "^0.2.0", 16 | "react": "^16.13.0", 17 | "react-dom": "^16.13.0", 18 | "react-helmet": "^6.1.0", 19 | "react-lottie": "^1.2.3", 20 | "react-native-elements": "*", 21 | "react-native-safe-area-context": "^3.2.0", 22 | "react-native-vector-icons": "^6.7.0", 23 | "react-native-web": "^0.12.0", 24 | "react-native-web-linear-gradient": "^1.1.1", 25 | "react-router-dom": "^5.2.0", 26 | "react-scripts": "3.4.1", 27 | "react-view": "^2.3.2" 28 | }, 29 | "scripts": { 30 | "start": "react-app-rewired start", 31 | "build": "react-app-rewired build", 32 | "test": "react-app-rewired test", 33 | "eject": "react-scripts eject", 34 | "predeploy": "npm run build", 35 | "prepare": "node injectLatestProps.js", 36 | "deploy": "gh-pages -d build", 37 | "postinstall": "patch-package", 38 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|json)\" --ignore-unknown", 39 | "format": "npm run prettier -- --write", 40 | "check-format": "npm run prettier -- --check", 41 | "lint": "eslint --ignore-path .gitignore . --fix", 42 | "check-lint": "eslint --ignore-path .gitignore .", 43 | "make-consistent": "npm run format && npm run lint", 44 | "validate": "npm run check-format && npm run check-lint" 45 | }, 46 | "eslintConfig": { 47 | "extends": "react-app" 48 | }, 49 | "browserslist": { 50 | "production": [">0.2%", "not dead", "not op_mini all"], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | }, 57 | "devDependencies": { 58 | "@babel/plugin-proposal-class-properties": "^7.10.4", 59 | "@babel/preset-env": "^7.13.12", 60 | "customize-cra": "^1.0.0", 61 | "eslint-plugin-jest": "^24.3.5", 62 | "eslint-plugin-json": "^2.1.2", 63 | "eslint-plugin-jsx-a11y": "^6.4.1", 64 | "eslint-plugin-react": "^7.23.2", 65 | "eslint-plugin-react-hooks": "^4.2.0", 66 | "gh-pages": "^3.1.0", 67 | "husky": "^6.0.0", 68 | "lint-staged": "^10.5.4", 69 | "patch-package": "^6.2.2", 70 | "postinstall-postinstall": "^2.1.0", 71 | "prettier": "^2.2.1", 72 | "react-app-rewired": "^2.1.6" 73 | }, 74 | "husky": { 75 | "hooks": { 76 | "pre-commit": "lint-staged" 77 | } 78 | }, 79 | "lint-staged": { 80 | "*.{js,jsx,css,md,json}": ["npm run validate", "git add"] 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /patches/@react-native-community+toolbar-android+0.1.0-rc.2.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js b/node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js 2 | index 31f0017..c7aaafc 100644 3 | --- a/node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js 4 | +++ b/node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js 5 | @@ -7,12 +7,12 @@ 6 | * @format 7 | */ 8 | 9 | -'use strict'; 10 | +"use strict"; 11 | 12 | let m; 13 | try { 14 | // This is an optional dependency. However, webpack might still show warning message. 15 | - m = require('react-native/Libraries/Components/UnimplementedViews/UnimplementedView'); 16 | + m = require("react-native-web/dist/modules/UnimplementedView"); 17 | } catch { 18 | // If failed to find react-native UnimplementedView, just returns an empty module so 19 | // this won't cause bundling related error, however any subsequent attempt of using this module 20 | -------------------------------------------------------------------------------- /public/CNAME: -------------------------------------------------------------------------------- 1 | react-native-elements.js.org -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 23 | Playground | React Native Elements 24 | 28 | 32 | 33 | 37 | 46 | 47 | 48 | 49 | 50 | Playground 🚀 | React Native Elements 51 | 52 | 56 | 57 | 58 | 59 | 60 | 61 | 65 | 69 | 70 | 71 | 72 | 76 | 80 | 84 | 88 | 89 | 95 | 96 | 97 |
98 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run prepare && npm run build" 3 | publish = "build/" 4 | base = "/" -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/public/thumbnail.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | SafeAreaInsetsContext, 4 | SafeAreaProvider, 5 | } from "react-native-safe-area-context"; 6 | 7 | import Root from "./containers"; 8 | import "./App.css"; 9 | function App() { 10 | return ( 11 | 12 | 13 | 28 | 29 | 30 | 31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | // eslint-disable-next-line jest/expect-expect 6 | it("renders without crashing", () => { 7 | const div = document.createElement("div"); 8 | ReactDOM.render(, div); 9 | ReactDOM.unmountComponentAtNode(div); 10 | }); 11 | -------------------------------------------------------------------------------- /src/assets/RNE_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/src/assets/RNE_Logo.png -------------------------------------------------------------------------------- /src/assets/SVG/bootstrap.svg: -------------------------------------------------------------------------------- 1 | drawkit-grape-pack-illustration-14 -------------------------------------------------------------------------------- /src/assets/SVG/design.svg: -------------------------------------------------------------------------------- 1 | drawkit-grape-pack-illustration-18 -------------------------------------------------------------------------------- /src/assets/SVG/explore.svg: -------------------------------------------------------------------------------- 1 | drawkit-grape-pack-illustration-10 -------------------------------------------------------------------------------- /src/assets/SVG/tweak.svg: -------------------------------------------------------------------------------- 1 | drawkit-grape-pack-illustration-17 -------------------------------------------------------------------------------- /src/assets/sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/playground/c6ac9e9a88110c2f1d367b556cb7adbced6e4693/src/assets/sample.jpg -------------------------------------------------------------------------------- /src/components/Footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | footer { 2 | margin-top: 2rem; 3 | width: 100%; 4 | background: #212121; 5 | color: #fafafa; 6 | padding: 1rem; 7 | bottom: 0; 8 | } 9 | 10 | .footer_product_info { 11 | font-weight: 200; 12 | font-style: italic; 13 | color: #cac8c8; 14 | } 15 | 16 | .footer_product_img { 17 | width: 150px; 18 | padding: 1rem 0; 19 | display: block; 20 | transition: transform 0.2s; 21 | margin-bottom: 5px; 22 | } 23 | 24 | .footer_product_img:hover { 25 | transform: scale(1.09); 26 | } 27 | 28 | .footer_github_img { 29 | margin-right: 10px; 30 | transition: transform 0.2s; 31 | } 32 | .footer_github_img:hover { 33 | transform: scale(1.09); 34 | } 35 | 36 | .netlify_img { 37 | transition: transform 0.2s; 38 | } 39 | .netlify_img:hover { 40 | transform: scale(1.3); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/Footer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { 4 | Paper, 5 | Grid, 6 | ListItem, 7 | Typography, 8 | Button, 9 | Divider, 10 | } from "@material-ui/core"; 11 | import pjson from "../../../package.json"; 12 | import styles from "./Footer.module.css"; 13 | 14 | function Footer() { 15 | return ( 16 | 98 | ); 99 | } 100 | 101 | export default Footer; 102 | -------------------------------------------------------------------------------- /src/components/PropDrawer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import { makeStyles } from "@material-ui/core/styles"; 4 | 5 | import { Drawer, Fab } from "@material-ui/core"; 6 | 7 | export default function TemporaryDrawer(props) { 8 | const [state, setState] = React.useState({ 9 | right: false, 10 | }); 11 | 12 | const toggleDrawer = (anchor, open) => (event) => { 13 | if ( 14 | event.type === "keydown" && 15 | (event.key === "Tab" || event.key === "Shift") 16 | ) { 17 | return; 18 | } 19 | 20 | setState({ ...state, [anchor]: open }); 21 | }; 22 | 23 | return ( 24 |
25 | 26 | 37 | Prop Explorer 38 | 39 | 44 |
51 | {props.children} 52 |
53 | 54 | 55 |
56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/playground/index.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { 4 | Compiler, 5 | Knobs, 6 | Editor, 7 | Error, 8 | ActionButtons, 9 | Placeholder, 10 | } from "react-view"; 11 | 12 | export default ({ params, containerStyle = {} }) => { 13 | return ( 14 | 15 |
22 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /src/containers/Drawer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import CssBaseline from "@material-ui/core/CssBaseline"; 5 | 6 | import Drawer from "@material-ui/core/Drawer"; 7 | import Hidden from "@material-ui/core/Hidden"; 8 | import IconButton from "@material-ui/core/IconButton"; 9 | 10 | import List from "@material-ui/core/List"; 11 | import ListItem from "@material-ui/core/ListItem"; 12 | import { GitHub } from "@material-ui/icons"; 13 | import ListItemText from "@material-ui/core/ListItemText"; 14 | 15 | import MenuIcon from "@material-ui/icons/Menu"; 16 | import Toolbar from "@material-ui/core/Toolbar"; 17 | import Typography from "@material-ui/core/Typography"; 18 | import Brightness2Icon from "@material-ui/icons/Brightness2"; 19 | import WbSunnyIcon from "@material-ui/icons/WbSunny"; 20 | import { Button, Container } from "@material-ui/core"; 21 | import { makeStyles, useTheme } from "@material-ui/core/styles"; 22 | 23 | import Navigation from "../Navigation"; 24 | import { Link } from "react-router-dom"; 25 | import { Components_Index } from "../Navigation"; 26 | 27 | const drawerWidth = 200; 28 | 29 | const useStyles = makeStyles((theme) => ({ 30 | root: { 31 | display: "flex", 32 | }, 33 | drawer: { 34 | [theme.breakpoints.up("sm")]: { 35 | width: drawerWidth, 36 | flexShrink: 0, 37 | }, 38 | }, 39 | appBar: { 40 | [theme.breakpoints.up("sm")]: { 41 | width: `calc(100% - ${drawerWidth}px)`, 42 | marginLeft: drawerWidth, 43 | }, 44 | zIndex: theme.zIndex.drawer + 1, 45 | }, 46 | menuButton: { 47 | marginRight: theme.spacing(2), 48 | [theme.breakpoints.up("sm")]: { 49 | display: "none", 50 | }, 51 | }, 52 | // necessary for content to be below app bar 53 | toolbar: theme.mixins.toolbar, 54 | drawerPaper: { 55 | width: drawerWidth, 56 | }, 57 | content: { 58 | flexGrow: 1, 59 | paddingTop: "1.5rem", 60 | minHeight: "100vh", 61 | }, 62 | 63 | sideListItem: { 64 | transition: "0.1s all ease-in", 65 | "&:hover": { 66 | borderRight: "5px solid #2089dc", 67 | }, 68 | "&:focus": { 69 | borderRight: "5px solid #2089dc", 70 | }, 71 | }, 72 | })); 73 | 74 | function ResponsiveDrawer(props) { 75 | const { window, darkState, handleThemeChange } = props; 76 | const classes = useStyles(); 77 | const theme = useTheme(); 78 | const [mobileOpen, setMobileOpen] = React.useState(false); 79 | const [selectedIndex, setSelectedIndex] = React.useState(-1); 80 | 81 | const handleDrawerToggle = (value) => { 82 | if (value === false) { 83 | setMobileOpen(false); 84 | } else { 85 | setMobileOpen(true); 86 | } 87 | }; 88 | 89 | const handleListItemClick = (event, index) => { 90 | setSelectedIndex(index); 91 | }; 92 | 93 | const drawer = ( 94 |
95 |
96 | handleDrawerToggle(false)}> 97 | 98 | Playground{" "} 99 | 100 | 🚀 101 | 102 | 103 | 104 |
105 | 106 | {Components_Index.map((elm, index) => ( 107 | handleDrawerToggle(false)} 111 | > 112 | handleListItemClick(event, index)} 117 | className={classes.sideListItem} 118 | > 119 | 120 | 121 | 122 | ))} 123 | 124 |
125 | ); 126 | 127 | const container = 128 | window !== undefined ? () => window().document.body : undefined; 129 | 130 | return ( 131 |
132 | 133 | 134 | 135 | 142 | 143 | 144 | 145 | 146 | React Native Elements 147 | 148 | 149 |
150 | 151 | {darkState ? : } 152 | 153 | 158 | 159 | 160 | 166 | 167 | 168 |
169 | 170 | 171 | 202 |
203 |
204 | 205 | 206 | 207 |
208 |
209 | ); 210 | } 211 | 212 | ResponsiveDrawer.propTypes = { 213 | /** 214 | * Injected by the documentation to work in an iframe. 215 | * You won't need it on your project. 216 | */ 217 | window: PropTypes.func, 218 | }; 219 | 220 | export default ResponsiveDrawer; 221 | -------------------------------------------------------------------------------- /src/containers/Navigation/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { 4 | BrowserRouter as Router, 5 | Switch, 6 | Route, 7 | Link, 8 | Redirect, 9 | } from "react-router-dom"; 10 | import { Helmet } from "react-helmet"; 11 | 12 | import Footer from "../../components/Footer"; 13 | 14 | // Pages 15 | import HomePage from "../../pages/home"; 16 | import ExplorePage from "../../pages/explore"; 17 | // Playground 18 | import Avatar from "../../content/Avatar"; 19 | import Button from "../../content/Button"; 20 | import Badge from "../../content/Badge"; 21 | import Tile from "../../content/Tile"; 22 | import Tab from "../../content/Tab"; 23 | import Card from "../../content/Card"; 24 | import ToolTip from "../../content/ToolTip"; 25 | import Text from "../../content/Text"; 26 | import SocialIcon from "../../content/SocialIcon"; 27 | import Slider from "../../content/Slider"; 28 | import SearchBar from "../../content/SearchBar"; 29 | import SpeedDial from "../../content/SpeedDial"; 30 | import Rating from "../../content/Rating"; 31 | import AirbnbRating from "../../content/AirbnbRating"; 32 | import Pricing from "../../content/Pricing"; 33 | import Overlay from "../../content/Overlay"; 34 | import ListItem from "../../content/ListItem"; 35 | import LinearProgress from "../../content/LinearProgress"; 36 | import Input from "../../content/Input"; 37 | import Image from "../../content/Image"; 38 | import Icon from "../../content/Icon"; 39 | import Header from "../../content/Header"; 40 | import CheckBox from "../../content/CheckBox"; 41 | import BottomSheet from "../../content/BottomSheet"; 42 | import ButtonGroup from "../../content/ButtonGroup"; 43 | import Divider from "../../content/Divider"; 44 | import FAB from "../../content/FAB"; 45 | import SwitchComponent from "../../content/Switch"; 46 | 47 | export const Components_Index = [ 48 | { 49 | name: "Avatar", 50 | component: Avatar, 51 | path: "/avatar", 52 | }, 53 | { 54 | name: "Badge", 55 | component: Badge, 56 | path: "/badge", 57 | }, 58 | { 59 | name: "BottomSheet", 60 | component: BottomSheet, 61 | path: "/bottom-sheet", 62 | }, 63 | { 64 | name: "Button", 65 | component: Button, 66 | path: "/button", 67 | }, 68 | { 69 | name: "ButtonGroup", 70 | component: ButtonGroup, 71 | path: "/button-group", 72 | }, 73 | { 74 | name: "Card", 75 | component: Card, 76 | path: "/card", 77 | }, 78 | { 79 | name: "CheckBox", 80 | component: CheckBox, 81 | path: "/checkbox", 82 | }, 83 | 84 | { 85 | name: "Divider", 86 | component: Divider, 87 | path: "/divider", 88 | }, 89 | { 90 | name: "FAB", 91 | component: FAB, 92 | path: "/fab", 93 | }, 94 | 95 | { 96 | name: "Header", 97 | component: Header, 98 | path: "/header", 99 | }, 100 | 101 | { 102 | name: "Icon", 103 | component: Icon, 104 | path: "/icon", 105 | }, 106 | 107 | { 108 | name: "Image", 109 | component: Image, 110 | path: "/image", 111 | }, 112 | 113 | { 114 | name: "Input", 115 | component: Input, 116 | path: "/input", 117 | }, 118 | { 119 | name: "LinearProgress", 120 | component: LinearProgress, 121 | path: "/linear-progress", 122 | }, 123 | { 124 | name: "ListItem", 125 | component: ListItem, 126 | path: "/list-item", 127 | }, 128 | 129 | { 130 | name: "Overlay", 131 | component: Overlay, 132 | path: "/overlay", 133 | }, 134 | 135 | { 136 | name: "Pricing", 137 | component: Pricing, 138 | path: "/pricing", 139 | }, 140 | 141 | { 142 | name: "Rating", 143 | component: Rating, 144 | path: "/rating", 145 | }, 146 | { 147 | name: "Rating (Airbnb)", 148 | component: AirbnbRating, 149 | path: "/airbnb-rating", 150 | }, 151 | 152 | { 153 | name: "SearchBar", 154 | component: SearchBar, 155 | path: "/search-bar", 156 | }, 157 | 158 | { 159 | name: "Slider", 160 | component: Slider, 161 | path: "/slider", 162 | }, 163 | { 164 | name: "SocialIcon", 165 | component: SocialIcon, 166 | path: "/social-icon", 167 | }, 168 | { 169 | name: "SpeedDial", 170 | component: SpeedDial, 171 | path: "/speed-dial", 172 | }, 173 | { 174 | name: "Tab", 175 | component: Tab, 176 | path: "/tab", 177 | }, 178 | { 179 | name: "Switch", 180 | component: SwitchComponent, 181 | path: "/switch", 182 | }, 183 | { 184 | name: "Text", 185 | component: Text, 186 | path: "/text", 187 | }, 188 | { 189 | name: "Tile", 190 | component: Tile, 191 | path: "/tile", 192 | }, 193 | { 194 | name: "ToolTip", 195 | component: ToolTip, 196 | path: "/tooltip", 197 | }, 198 | ]; 199 | 200 | export default function App() { 201 | return ( 202 | 203 | 204 | {Components_Index.map((elm, idx) => { 205 | return ( 206 | 207 | 208 | 209 | {elm.name} | Playground 🚀 - React Native Elements 210 | 211 | 212 | 213 | 214 | ); 215 | })} 216 | 217 | 218 | 219 | Explore | Playground{" "} 220 | <span role="img" aria-label="playground"> 221 | 🚀 222 | </span>{" "} 223 | - React Native Elements 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 |