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