custom button component styling done

assets/colors.js

-export const PRIMARY_COLOR = '#11493E'
-export const SECONDARY_COLOR = '#808080';
-export const TERTIARY_COLOR = '#CECECE';
-export const BLACK = '#191919';
+const themeColors = {
+  PRIMARY_COLOR : '#11493E',
+  SECONDARY_COLOR : '#808080',
+  TERTIARY_COLOR : '#CECECE',
+  BLACK : '#191919',
+  WHITE : '#FFFFFF'
+};
+
+export default themeColors;

components/button.component.js

 import React from 'react';
-import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import themeColors from '../assets/colors';
 
 export const AppButton = (props) => {
   return(
     <TouchableOpacity onPress={props.onPress} style={styles.Button}>
-      <Text>{props.label}</Text>
+      <Text style={styles.Text}>{props.label}</Text>
     </TouchableOpacity>
   )
 }
@@ -12,7 +13,16 @@ export const AppButton = (props) => {
 const styles = StyleSheet.create({
   Button:{
     alignItems: "center",
-    padding: 10
+    padding: 10,
+    fontSize: 16,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+    borderRadius: 20,
+    margin: 20
+  },
+  Text: {
+    fontFamily: 'Poppins-Black',
+    fontSize: 22,
+    color: themeColors.WHITE
   }
 });
 

screen/Home.Auction.Screen.js

@@ -7,12 +7,14 @@ import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput, Image
 import { Formik } from 'formik';
 import { FontAwesome } from '@expo/vector-icons';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Seperator } from "../components/button.component";
+import { AppButton } from "../components/button.component";
 
 const  HomeAuctionScreen =  ({navigation}) => {
   return (
     <SafeAreaView style={{flex: 1, color: 'yellow'}}>
-      <Seperator/>
+      <AppButton
+        label='Test'
+      />
     </SafeAreaView>
   );
 };