├── CONTRIBUTING.md ├── index.ts ├── indicators ├── indicator1.gif ├── indicator2.gif ├── indicator3.gif ├── indicator4.gif ├── indicator5.gif ├── indicator6.gif ├── indicator7.gif ├── indicator8.gif ├── indicator9.gif ├── indicator10.gif ├── indicator11.gif ├── indicator12.gif ├── indicator13.gif ├── indicator14.gif ├── indicator15.gif ├── indicator16.gif ├── indicator17.gif ├── indicator18.gif ├── indicator19.gif └── indicator20.gif ├── .gitignore ├── .github ├── workflows │ └── blank.yml └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── package.json ├── LICENSE ├── CODE_OF_CONDUCT.md ├── readme.md └── AwesomeLoading.tsx /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | You can inform me via Twitter : uacer0 2 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | import AwesomeLoading from './AwesomeLoading'; 2 | 3 | export default AwesomeLoading; 4 | -------------------------------------------------------------------------------- /indicators/indicator1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator1.gif -------------------------------------------------------------------------------- /indicators/indicator2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator2.gif -------------------------------------------------------------------------------- /indicators/indicator3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator3.gif -------------------------------------------------------------------------------- /indicators/indicator4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator4.gif -------------------------------------------------------------------------------- /indicators/indicator5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator5.gif -------------------------------------------------------------------------------- /indicators/indicator6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator6.gif -------------------------------------------------------------------------------- /indicators/indicator7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator7.gif -------------------------------------------------------------------------------- /indicators/indicator8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator8.gif -------------------------------------------------------------------------------- /indicators/indicator9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator9.gif -------------------------------------------------------------------------------- /indicators/indicator10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator10.gif -------------------------------------------------------------------------------- /indicators/indicator11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator11.gif -------------------------------------------------------------------------------- /indicators/indicator12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator12.gif -------------------------------------------------------------------------------- /indicators/indicator13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator13.gif -------------------------------------------------------------------------------- /indicators/indicator14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator14.gif -------------------------------------------------------------------------------- /indicators/indicator15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator15.gif -------------------------------------------------------------------------------- /indicators/indicator16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator16.gif -------------------------------------------------------------------------------- /indicators/indicator17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator17.gif -------------------------------------------------------------------------------- /indicators/indicator18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator18.gif -------------------------------------------------------------------------------- /indicators/indicator19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator19.gif -------------------------------------------------------------------------------- /indicators/indicator20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acerbastimur/React-Native-Awesome-Loading/HEAD/indicators/indicator20.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # MacOS 2 | .DS_Store 3 | 4 | # Node & NPM & Yarn 5 | node_modules/ 6 | .npm 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # TypeScript v1 declaration files 12 | typings/ 13 | 14 | # TypeScript cache 15 | *.tsbuildinfo 16 | -------------------------------------------------------------------------------- /.github/workflows/blank.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v2 12 | - name: Run a one-line script 13 | run: echo Hello, world! 14 | - name: Run a multi-line script 15 | run: | 16 | echo Add other actions to build, 17 | echo test, and deploy your project. 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-awesome-loading", 3 | "version": "1.0.13", 4 | "description": "Beautiful loading indicators for React Native ", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "uacer0", 10 | "license": "ISC", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/acerbastimur/React-native-Awesome-Loading.git" 14 | }, 15 | "keywords": [ 16 | "react-native", 17 | "react", 18 | "android", 19 | "ios", 20 | "loading", 21 | "spinner", 22 | "progress", 23 | "reactnative", 24 | "loading-animation", 25 | "spinner" 26 | ], 27 | "bugs": { 28 | "url": "https://github.com/acerbastimur/React-native-Awesome-Loading/issues" 29 | }, 30 | "homepage": "https://github.com/acerbastimur/React-native-Awesome-Loading#readme" 31 | } 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Umut Acerbastimur 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at umutacerbastimur@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/dt/react-native-awesome-loading.svg)](https://www.npmjs.com/package/react-native-awesome-loading) 2 | ![headLogo](https://user-images.githubusercontent.com/33218120/73749960-6afa0900-476d-11ea-817b-5dcad123e134.png) 3 | 4 | 5 | React Native Awesome Loading 6 | ======================================= 7 | Simple React Native library to have *awesome* loading indicators. 8 | 9 | ### Built-in Indicators: 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | ### Download & Installation 55 | 56 | ```shell 57 | $ npm i react-native-fast-image 58 | $ npm i react-native-awesome-loading 59 | $ cd ios 60 | $ pod install 61 | 62 | ``` 63 | ### Usage 64 | 65 | ```javascript 66 | import AwesomeLoading from 'react-native-awesome-loading'; 67 | 68 | ... 69 | 70 | 71 | 72 | ``` 73 | ### Props 74 | 75 | | Prop | Type | Default Value | 76 | | ------------- | ------------- | ------------- | 77 | | indicatorId | number(1 - 20) | 1 | 78 | | isActive | boolean (required) | false | 79 | | size | number | 50 | 80 | | text | string | null | 81 | | textStyle | TextStyle | null | 82 | | direction | 'row','column' | 'column' | 83 | 84 | ### Contributing 85 | 86 | You can open an issue to warn me :) 87 | 88 | ### Authors or Acknowledgments 89 | 90 | * Umut Acerbastimur 91 | 92 | ### License 93 | 94 | This project is licensed under the MIT License 95 | -------------------------------------------------------------------------------- /AwesomeLoading.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { View, Text, TextStyle, Dimensions } from "react-native"; 3 | import FastImage from "react-native-fast-image"; 4 | 5 | export interface AwesomeLoadingProps { 6 | indicatorId: 7 | | 1 8 | | 2 9 | | 3 10 | | 4 11 | | 5 12 | | 6 13 | | 7 14 | | 8 15 | | 9 16 | | 10 17 | | 11 18 | | 12 19 | | 13 20 | | 14 21 | | 15 22 | | 16 23 | | 17 24 | | 18 25 | | 19 26 | | 20; 27 | size?: number; 28 | text?: string; 29 | textStyle?: TextStyle; 30 | direction?: "row" | "column"; 31 | isActive: boolean; 32 | } 33 | 34 | export interface AwesomeLoadingState {} 35 | 36 | export default class AwesomeLoading extends React.Component< 37 | AwesomeLoadingProps, 38 | AwesomeLoadingState 39 | > { 40 | constructor(props: AwesomeLoadingProps) { 41 | super(props); 42 | this.state = {}; 43 | } 44 | 45 | renderIndicator = (indicatorId: number, size: number) => { 46 | switch (indicatorId) { 47 | case 1: 48 | return ( 49 | 54 | ); 55 | 56 | case 2: 57 | return ( 58 | 63 | ); 64 | 65 | case 3: 66 | return ( 67 | 72 | ); 73 | 74 | case 4: 75 | return ( 76 | 81 | ); 82 | case 5: 83 | return ( 84 | 89 | ); 90 | case 6: 91 | return ( 92 | 97 | ); 98 | case 7: 99 | return ( 100 | 105 | ); 106 | case 8: 107 | return ( 108 | 113 | ); 114 | case 9: 115 | return ( 116 | 121 | ); 122 | case 10: 123 | return ( 124 | 129 | ); 130 | case 11: 131 | return ( 132 | 137 | ); 138 | case 12: 139 | return ( 140 | 145 | ); 146 | 147 | case 13: 148 | return ( 149 | 154 | ); 155 | case 14: 156 | return ( 157 | 162 | ); 163 | case 15: 164 | return ( 165 | 170 | ); 171 | 172 | case 16: 173 | return ( 174 | 179 | ); 180 | case 17: 181 | return ( 182 | 187 | ); 188 | 189 | case 18: 190 | return ( 191 | 196 | ); 197 | case 19: 198 | return ( 199 | 204 | ); 205 | case 20: 206 | return ( 207 | 212 | ); 213 | default: 214 | return ( 215 | 220 | ); 221 | } 222 | }; 223 | 224 | public render() { 225 | const { 226 | indicatorId = 1, 227 | size = 50, 228 | text, 229 | direction, 230 | textStyle, 231 | isActive 232 | } = this.props; 233 | return isActive ? ( 234 | 248 | {this.renderIndicator(indicatorId, size)} 249 | {text ? {text} : null} 250 | 251 | ) : null; 252 | } 253 | } 254 | --------------------------------------------------------------------------------