- Initial commit

app/components/Auction/AuctionPriceAndBidCount.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { formatPrice } from '../../library/helpers.js';
+
+import {
+    StyleSheet,
+    Text,
+} from 'react-native';
+
+const AuctionPriceAndBidCount = ({ bidCount, currentPrice }) => {
+  return (
+    <Text style={styles.currentPriceAndBidCount} numberOfLines={1}>
+      {`${formatPrice(currentPrice)} (${bidCount} bids)`}
+    </Text>
+  );
+};
+
+AuctionPriceAndBidCount.propTypes = {
+  bidCount: PropTypes.number.isRequired,
+  currentPrice: PropTypes.number.isRequired,
+};
+
+export default AuctionPriceAndBidCount;

app/components/Auction/BidStatus.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    StyleSheet,
+    View,
+} from 'react-native';
+
+const BidStatus = ({ bidCount, currentPrice, isBidding, isWinning }) => {
+  if (!isBidding) {
+    return null;
+  }
+
+  const statusBarStyle = isWinning
+    ? [ styles.bidStatus, styes.isWinning ]
+    : [ styles.bidStatus, styles.isOutbid ];
+
+  return (
+    <Text style={statusBarStyle} numberOfLines={1}>
+      {`${currentPrice} (${bidCount} bids)`}
+    </Text>
+  );
+};
+
+BidStatus.propTypes = {
+  bidCount: PropTypes.number.isRequired,
+  currentPrice: PropTypes.number.isRequired,
+  isBidding: PropTypes.bool.isRequired,
+  isWinning: PropTypes.bool.isRequired,
+};
+
+const styles = StyleSheet.create({
+  bidStatus: {
+    color: '#fff',
+  },
+  isWinning: {
+    backgroundColor: '#F00',
+  },
+  isOutbid: {
+    backgroundColor: '#0F0',
+  },
+});
+
+export default BidStatus;