Circle Component

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {View, Text, Image, TouchableNativeFeedback, ImageBackground} from 'react-native';

import styles from './styles';
import Images from 'res/images';
import Colors from 'res/colors';


const Circle = ({
    OrangeCircle,
    GrayCircle,

    ...PropTypes
}) => {
  return(
    <View style={styles.Container}>
      <Image style={styles.OrangeCircle} source={OrangeCircle}></Image>
      <Image style={styles.GrayCircle} source={GrayCircle}></Image>
    </View>

  )
};

Circle.propTypes={

  OrangeCircle: PropTypes.number,
  GrayCircle: PropTypes.number

}

export default Circle




Styles.js

import {StyleSheet} from 'react-native';
import Colors from 'res/colors';


export default StyleSheet.create({
    Container:{
        flexDirection:'row',
    },
    OrangeCircle:{
        width: 20,
        height: 20,
        borderRadius: 20/2,
        backgroundColor: Colors.colorPrimary
    },
    GrayCircle:{
        width: 20,
        height: 20,
        borderRadius: 20/2,
        backgroundColor: Colors.silverGray
    }
})



index.js
import Circle from './Circle';
import styles from './styles';

export { Circle, styles };