ProgressBar

Progress indicators.

View full example: ProgressBar Example

import React from 'react';
import { View } from 'react-native';
import { ProgressBar } from 'monalisa-ui';

const Example = () => (
  <View>
    <ProgressBar value={100} />
    <ProgressBar height={15} value={30} />
  </View>
);

export default Example;

Configuration

Example

  • ProgressBar custom

import React from 'react';
import { View, Text } from 'react-native';
import { ProgressBar } from 'monalisa-ui';

const Example = () => (
  <View>
    <ProgressBar style={styles.bar} value={30} height={30} />
    <ProgressBar style={styles.bar} value={30} bgColor="#ff0000" borderColor="#ff0000" />
    <ProgressBar style={styles.bar} value={30} borderWidth={3} height={20} />
    <ProgressBar style={styles.bar} value={80}>
      <Text>80</Text>
    </ProgressBar>
  </View>
);

export default Example;

Last updated