File tree 1 file changed +34
-2
lines changed
1 file changed +34
-2
lines changed Original file line number Diff line number Diff line change @@ -34,10 +34,10 @@ npm install react-native-animated-loader --save
34
34
```
35
35
36
36
## Usage
37
-
37
+ ### Class Component
38
38
``` jsx
39
39
import React from ' react' ;
40
- import { StyleSheet } from ' react-native' ;
40
+ import { StyleSheet , Text } from ' react-native' ;
41
41
import AnimatedLoader from " react-native-animated-loader" ;
42
42
43
43
export default class Loader extends React .Component {
@@ -76,6 +76,38 @@ const styles = StyleSheet.create({
76
76
height: 100
77
77
}
78
78
});
79
+ ```
80
+ ### Functional Component
81
+
82
+ ``` jsx
83
+ import React , {useState , useEffect } from ' react' ;
84
+ import {StyleSheet , Text } from ' react-native' ;
85
+ import AnimatedLoader from ' react-native-animated-loader' ;
86
+ export default function App () {
87
+ const [visible , setVisible ] = useState (false );
88
+ useEffect (() => {
89
+ setInterval (() => {
90
+ setVisible (! visible);
91
+ }, 2000 );
92
+ }, []);
93
+
94
+ return (
95
+ < AnimatedLoader
96
+ visible= {visible}
97
+ overlayColor= " rgba(255,255,255,0.75)"
98
+ animationStyle= {styles .lottie }
99
+ speed= {1 }>
100
+ < Text > Doing something... < / Text >
101
+ < / AnimatedLoader>
102
+ );
103
+ }
104
+ const styles = StyleSheet .create ({
105
+ lottie: {
106
+ width: 100 ,
107
+ height: 100 ,
108
+ },
109
+ });
110
+
79
111
```
80
112
81
113
### Loader files
You can’t perform that action at this time.
0 commit comments