Skip to content

Instantly share code, notes, and snippets.

@yeknava

yeknava/ProgressBar.js

Last active September 23, 2016 10:45
Show Gist options
  • Save yeknava/4a3255c0e917e6f75de48a8c83258397 to your computer and use it in GitHub Desktop.
Save yeknava/4a3255c0e917e6f75de48a8c83258397 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yeknava revised this gist Sep 23, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ProgressBar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ```javascript
    ````
    import React, { Component } from 'react';
    import { Text, View, StyleSheet } from 'react-native';

    @@ -52,4 +52,4 @@ var styles = StyleSheet.create({
    color: '#fff',
    }
    });
    ```
    ````
  2. yeknava revised this gist Sep 23, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ProgressBar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ```
    ```javascript
    import React, { Component } from 'react';
    import { Text, View, StyleSheet } from 'react-native';
  3. yeknava revised this gist Sep 23, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ProgressBar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ````
    ```
    import React, { Component } from 'react';
    import { Text, View, StyleSheet } from 'react-native';
    @@ -52,4 +52,4 @@ var styles = StyleSheet.create({
    color: '#fff',
    }
    });
    ````
    ```
  4. yeknava created this gist Sep 23, 2016.
    55 changes: 55 additions & 0 deletions ProgressBar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    ````
    import React, { Component } from 'react';
    import { Text, View, StyleSheet } from 'react-native';

    export default class ProgressBar extends Component {
    constructor(props) {
    super(props);
    this.state = {
    };
    }
    render() {
    var color = this.props.color;
    var percentage = this.props.percentage;
    var emptyProgressBar = parseFloat(1-this.props.percentage);
    var direction = this.props.direction == 'right' || this.props.direction == 'rtl' ? 'row-reverse' : 'row';
    return (
    <View style={[styles.progress, {flexDirection:direction}]}>
    <View
    style={[styles.progressBar, {flex:percentage, backgroundColor:color}]}>
    <Text style={styles.text}>
    {this.props.title}
    </Text>
    </View>
    <View
    style={[styles.emptyProgressBar, {flex:emptyProgressBar}]}>
    </View>
    </View>
    );
    }
    };
    var styles = StyleSheet.create({
    progress: {
    height: 20,
    marginBottom: 20,
    overflow: 'hidden',
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
    flex: 1,
    alignItems: 'stretch',
    flexDirection: 'row'
    },
    progressBar: {
    backgroundColor: 'red',
    alignItems: 'center',
    borderRadius: 4,
    },
    emptyProgressBar: {
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
    },
    text: {
    color: '#fff',
    }
    });
    ````