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', + }, +});