├── FrameLoading.js ├── LICENSE ├── README.md ├── package.json └── screenshot.gif /FrameLoading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Modal } from 'react-native'; 3 | import PropTypes from 'prop-types'; 4 | 5 | export default class FrameLoading extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | viewOrder: 0, 10 | }; 11 | this.increase = 1; 12 | } 13 | 14 | componentDidMount() { 15 | const { viewOrder } = this.state; 16 | this._mounted = true; 17 | this.setState({ viewOrder }); 18 | } 19 | 20 | componentDidUpdate() { 21 | if (this.props.animating) { 22 | const { duration } = this.props; 23 | this._rotateView(duration); 24 | } 25 | } 26 | 27 | componentWillUnmount() { 28 | this._mounted = false; 29 | } 30 | 31 | _rotateView = duration => { 32 | const { views } = this.props; 33 | 34 | setTimeout(() => { 35 | const viewOrder = this.increase++ % views.length; 36 | if (this._mounted) { 37 | this.setState({ viewOrder }); 38 | } 39 | }, duration); 40 | }; 41 | 42 | render() { 43 | const { viewOrder } = this.state; 44 | const view = this.props.views[viewOrder]; 45 | const { loadingContainerStyle } = this.props; 46 | 47 | return ( 48 | 49 | {view} 50 | 51 | ); 52 | } 53 | } 54 | 55 | FrameLoading.propTypes = { 56 | animating: PropTypes.bool.isRequired, 57 | views: PropTypes.arrayOf(PropTypes.element).isRequired, 58 | loadingContainerStyle: PropTypes.shape({}), 59 | duration: PropTypes.number, 60 | modalProps: PropTypes.shape({}), 61 | }; 62 | 63 | FrameLoading.defaultProps = { 64 | loadingContainerStyle: { 65 | justifyContent: 'center', 66 | alignItems: 'center', 67 | flex: 1, 68 | }, 69 | duration: 450, 70 | modalProps: {}, 71 | }; 72 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Youngsu Han 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## react-native-frame-loading [![NPM version](https://img.shields.io/badge/npm-v0.1.4-blue.svg)](https://www.npmjs.com/package/react-native-frame-loading) 2 | 3 | ##### This package offers Loading indicator with frame by frame view or image 4 | 5 | #### Install 6 | ``` 7 | yarn add react-native-frame-loading 8 | # or 9 | npm install react-native-frame-loading --save 10 | ``` 11 | 12 | #### Screenshot 13 | 14 | 15 | #### Props 16 | |props |default|type |description | 17 | |:--------:|:-----:|:----:|-----------------------------------------------------| 18 | |animating |false |bool |Determines wheter the loading indicator shows or not 19 | |views |[] |array |Specific views that will be shown frame by frame 20 | |duration |450 |number|Determines how long a frame lasts 21 | |modalProps|{} |object|original [Modal component](https://facebook.github.io/react-native/docs/modal.html) props 22 | |loadingContainerStyle|`flex: 1, "center"`|object|style object of floating view container 23 | 24 | 25 | 26 | 27 | #### Usage 28 | ```js 29 | import FrameLoading from "react-native-frame-loading" 30 | import Icon from "react-native-vector-icons/FontAwesome" 31 | 32 | const VIEWS = [ 33 | 34 | 35 | , 36 | 37 | 38 | 39 | ... 40 | 41 | ] 42 | 43 | render() { 44 | return ( 45 | 46 |