Progress Bar

progress-bar.jsx

import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';

// SEPARATE FILE
const Colors = {
  success: 'green',
  error: 'red',
};
//

const StyledView = styled.View`
  background-color: #000;
  width: 100%; 
  height: 5px;
`;

const StyledProgress = styled.View`
  background-color: ${(props) => props.state === 'success' ? Colors.success : Colors.error}; 
  width: ${(props) => props.progress}%;
  height: 5px;
`;

function ProgressBar(props) {
  return (
    <StyledView>
      <StyledProgress 
        progress={props.progress} 
        state={props.state} 
      />
    </StyledView>
  );
}

ProgressBar.defaultProps = {
  progress: 50,
  state: 'success',
}

ProgressBar.propTypes = {
  progress: PropTypes.number,
  state: PropTypes.oneOf(['success', 'error']),
};

// MAIN APP
export default function App() {
  return (
    <>
      <ProgressBar progress={50} state='error' />
    </>
  );
}