diff --git a/example/app.js b/example/app.js
index 4a051f3..1f62fdb 100644
--- a/example/app.js
+++ b/example/app.js
@@ -10,6 +10,7 @@ import {
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
+ LinearIndicator
} from 'react-native-indicators';
Platform.select({
@@ -40,6 +41,7 @@ export default function init() {
+
@@ -87,6 +89,10 @@ export default function init() {
animationDuration={800}
/>
+
+
+
+
);
diff --git a/index.js b/index.js
index 556f27c..939c125 100644
--- a/index.js
+++ b/index.js
@@ -8,6 +8,7 @@ import PulseIndicator from './src/components/pulse-indicator';
import SkypeIndicator from './src/components/skype-indicator';
import UIActivityIndicator from './src/components/ui-activity-indicator';
import WaveIndicator from './src/components/wave-indicator';
+import LinearIndicator from './src/components/linear-indicator'
export {
Indicator,
@@ -20,4 +21,5 @@ export {
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
+ LinearIndicator
};
diff --git a/readme.md b/readme.md
index 47da7b4..5e8cc24 100644
--- a/readme.md
+++ b/readme.md
@@ -49,6 +49,7 @@ import {
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
+ LinearIndicator
} from 'react-native-indicators';
class Example extends Component {
@@ -146,6 +147,21 @@ class Example extends Component {
Possible values for `waveMode` are `fill` and `outline`
+## LinearIndicator properties
+
+ name | description | type | default
+:----------------- |:------------------------ | ------:|:------------
+ color | Component color | String | rgb(76, 208, 56)
+ width | Component width in px | Number | 450
+ height | Component height in px | Number | 16
+ animationDuration | Animation duration in ms | Number | 1100
+ borderWidth | Component border width | Number | 1
+ borderColor | Component border color | String | rgb(76, 208, 56)
+ indicatorColor | Indicator color | String | rgb(17, 139, 11)
+ indicatorWidth | Indicator width | Number | 50
+ indicatorHeight | Indicator height | Number | 16
+ trackWidth | Indicator track width | Number | 500
+
## Example
```bash
diff --git a/src/components/linear-indicator/index.js b/src/components/linear-indicator/index.js
new file mode 100644
index 0000000..51a8a12
--- /dev/null
+++ b/src/components/linear-indicator/index.js
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import { Animated, View } from 'react-native';
+
+const LinearIndicator = ({trackWidth=500,animationDuration=1100,height=16,color='rgb(76,208,56)',borderWidth=1,borderColor='rgb(76,208,56)',indicatorColor="rgb(17, 139, 11)",width=450,indicatorWidth=50,indicatorHeight=16}) => {
+ const leftValue=useState(new Animated.Value(0))[0]
+
+ useEffect(() => {Animated.loop(
+ Animated.timing(leftValue, {
+ toValue: trackWidth,
+ duration: animationDuration,
+ useNativeDriver: true,
+ })).start()
+ }, []);
+
+ return (
+
+
+
+
+ )
+}
+
+export default LinearIndicator
\ No newline at end of file
diff --git a/src/components/linear-indicator/styles.js b/src/components/linear-indicator/styles.js
new file mode 100644
index 0000000..9252b13
--- /dev/null
+++ b/src/components/linear-indicator/styles.js
@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexDirection: 'row',
+ },
+});