Stylable Button

src/App.tsx

@@ -1,12 +1,12 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import FindFriends from './pages/find-friends.component';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import { registerRootComponent } from 'expo';
-import { useFonts } from '@expo-google-fonts/nunito-sans';
-import * as NunitoSans from '@expo-google-fonts/nunito-sans';
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import FindFriends from "./pages/find-friends.component";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { registerRootComponent } from "expo";
+import { useFonts } from "@expo-google-fonts/nunito-sans";
+import * as NunitoSans from "@expo-google-fonts/nunito-sans";
 const Stack = createStackNavigator();
 
 function App() {
@@ -16,7 +16,7 @@ function App() {
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen
-          name='FindFriends'
+          name="FindFriends"
           component={FindFriends}
           options={{
             headerShown: false,
@@ -31,8 +31,8 @@ export default registerRootComponent(App);
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

src/Styles.tsx

@@ -0,0 +1,15 @@
+export enum Size {
+  Small = 1,
+  Medium = 2,
+  Large = 3,
+}
+export enum Colors {
+  Black = "#000000",
+  DarkGray = "#393939",
+  LightGray = "#31313168",
+}
+export enum Gradients {
+  GradientBlue = "linear-gradient(271.15deg, #00A3FF 7.64%, #0084FF 90.68%)",
+}
+
+export const FONT_SIZE = 8;

src/components/Button.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import * as Styles from "../Styles";
+import { ButtonProps, Pressable, Text, StyleSheet } from "react-native";
+
+// Constant Button-specific Styles
+const BUTTON_HEIGHT = 3;
+const BUTTON_WIDTH = 25;
+
+enum BorderType {
+  BUTTON_BORDER_RADIUS_ROUNDED = 14,
+  BUTTON_BORDER_RADIUS_BLOCK = 7,
+}
+
+interface CustomButtonProps {
+  overriddenStyles?: any;
+  text: string;
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+  size?: Styles.Size;
+  borderType?: BorderType;
+  borderWidth?: number;
+}
+const Button = ({
+  // set default values for props
+  text = "",
+  backgroundColor = Styles.Colors.Black,
+  textColor = "#ffffff",
+  size = Styles.Size.Medium,
+  overriddenStyles = {},
+  borderType = BorderType.BUTTON_BORDER_RADIUS_BLOCK,
+}: CustomButtonProps) => {
+  const styles = StyleSheet.create({
+    button: {
+      backgroundColor,
+      height: BUTTON_HEIGHT * size + "%",
+      width: BUTTON_WIDTH * size + "%",
+      borderRadius: borderType * size,
+      borderWidth: 0,
+      justifyContent: "center",
+    },
+    text: {
+      color: textColor,
+      fontSize: Styles.FONT_SIZE * size,
+      textAlign: "center",
+      fontFamily: "NunitoSans_600SemiBold",
+    },
+  });
+  if ("height" in overriddenStyles) {
+    styles.button.height = overriddenStyles.height;
+  }
+  if ("width" in overriddenStyles) {
+    styles.button.width = overriddenStyles.width;
+  }
+  return (
+    <Pressable style={styles.button}>
+      <Text style={styles.text}>{text}</Text>
+    </Pressable>
+  );
+};
+export default Button;
+
+// Sample usage:
+// <Button text="hello" size={Styles.Size.Medium} backgroundColor={Styles.Colors.LightGray}></Button>

src/pages/find-friends.component.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View, TextInput } from 'react-native';
-import Page from '../components/Page.component';
-
+import React from "react";
+import { Pressable, StyleSheet, Text, View, TextInput } from "react-native";
+import Page from "../components/Page.component";
+import * as Styles from "../Styles";
+import Button from "../components/Button";
 export default function HomePage() {
   return (
     <Page blobs>
       <Text style={styles.title}>find friends</Text>
-      <TextInput style={styles.input} placeholder='username or email' />
+      <TextInput style={styles.input} placeholder="username or email" />
       <Pressable style={styles.button}>
-        <Text style={styles.text}>{'search'}</Text>
+        <Text style={styles.text}>{"search"}</Text>
       </Pressable>
     </Page>
   );
@@ -17,44 +18,44 @@ export default function HomePage() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#023237',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#023237",
+    alignItems: "center",
+    justifyContent: "center",
   },
   title: {
-    color: '#FFC65C',
+    color: "#FFC65C",
     fontSize: 40,
-    fontStyle: 'italic',
-    fontWeight: 'bold',
+    fontStyle: "italic",
+    fontWeight: "bold",
     textShadowOffset: { width: 5, height: 5 },
     textShadowRadius: 10,
-    textShadowColor: '#998440',
+    textShadowColor: "#998440",
   },
   input: {
-    backgroundColor: '#89C1D2',
-    placeholderTextColor: '#000',
+    backgroundColor: "#89C1D2",
+    placeholderTextColor: "#000",
     fontSize: 25,
-    fontStyle: 'italic',
-    fontWeight: 'bold',
+    fontStyle: "italic",
+    fontWeight: "bold",
     borderRadius: 27,
     paddingHorizontal: 50,
     paddingVertical: 10,
     marginVertical: 10,
-    textAlign: 'center',
+    textAlign: "center",
   },
   button: {
-    backgroundColor: '#107E7B',
+    backgroundColor: "#107E7B",
     borderRadius: 50,
     paddingHorizontal: 50,
     paddingVertical: 10,
     marginVertical: 10,
-    width: '75%',
+    width: "75%",
   },
   text: {
-    color: '#FFF',
+    color: "#FFF",
     fontSize: 50,
-    fontStyle: 'italic',
-    fontWeight: 'bold',
-    textAlign: 'center',
+    fontStyle: "italic",
+    fontWeight: "bold",
+    textAlign: "center",
   },
 });