Enhancement/button custom style

src/components/Button/Button.tsx

@@ -24,28 +24,41 @@ const Button: React.FC<ButtonType>= ({
 	isLoading = false, 
 	leftIcon = null, 
 	rightIcon = null,
+	customButtonStyle = null, 
+	customTextStyle = null
 }) => {
 	const generateButtonStyle = (borderColor: { backgroundColor?: string | undefined} | undefined, type: string): object => {
+		if(customButtonStyle){
+			return customButtonStyle
+		}
 		if (type === 'outlined') {
 			return {...style.baseButton, borderColor: borderColor?.backgroundColor, ...style.outlinedButton}
-		} else if (type === 'text'){
+		} 
+		if (type === 'text'){
 			return {...style.baseButton}
-		} else {
-			return {...style.baseButton, ...borderColor}
-		}
+		} 
+
+		return {...style.baseButton, ...borderColor}
 	}
+
 	const generatedStyle = generateButtonStyle(buttonColor?.[0], type); 
 
+	const textStyle = customTextStyle ? customTextStyle : textColor;
+
 	return (
-		<PressableOpacity onPress={onPress} disabled={disabled} isLoading={isLoading}>
+		<PressableOpacity 
+			onPress={onPress} 
+			disabled={disabled} 
+			isLoading={isLoading}
+			customStyle={customButtonStyle}>
 			<View style={generatedStyle}>
 				<View style={style.iconContainer}>
 					{leftIcon && leftIcon}
 				</View>
 				<View>
 				{isLoading ?
 					<Loader color={textColor?.[0]?.color}/> : 
-					<Text style={textColor}>{label}</Text>
+					<Text style={textStyle}>{label}</Text>
 				}
 				</View>
 				<View style={style.iconContainer}>
@@ -60,7 +73,9 @@ export default styled(Button, {
 	props: {
 		buttonColor: true, 
 		textColor: true, 
-		type: true
+		type: true, 
+		customButtonStyle: true,
+		customTextStyle: true,
 	}
 });
 
@@ -81,7 +96,6 @@ const style = StyleSheet.create({
 	}, 
 	iconContainer: {
 		width: 52,
-		height: 52, 
 	}, 
 
 })

src/components/Button/Button.types.ts

@@ -11,4 +11,6 @@ export interface ButtonType {
 	isLoading?: boolean;
 	leftIcon?: React.ReactNode; 
 	rightIcon?: React.ReactNode;
+	customButtonStyle?: object;
+	customTextStyle?: object;
 }

src/components/PressableOpacity/PressableOpacity.tsx

@@ -9,7 +9,12 @@ import {
 import useAnimation from "./useAnimation";
 import { PressableOpacityTypes } from "./PressableOpacity.types";
 
-const PressableOpacity = ({ children, isLoading, ...props }: PressableOpacityTypes) => {
+const PressableOpacity = ({ 
+	children, 
+	isLoading, 
+	disabled, 
+	customStyle 
+}: PressableOpacityTypes) => {
 	const {
 		fadeIn,
 		fadeOut,
@@ -18,21 +23,20 @@ const PressableOpacity = ({ children, isLoading, ...props }: PressableOpacityTyp
 
 	return (
 		<Pressable
+			disabled={disabled}
 			onPressIn={fadeIn}
 			onPressOut={fadeOut}
-			style={style.pressableContainer}
-			{...props}>
+			style={[style.pressableContainer, customStyle]}>
 				{children}
 				{!isLoading && <Animated.View
-					style={[style.animatedView, {opacity: props?.disabled ? .4 : opacityValue}]} />
+					style={[style.animatedView, {opacity: disabled ? .6 : opacityValue}]} />
 				}
 		</Pressable>
 	);
 };
 
 const style = StyleSheet.create({
 	pressableContainer: {
-		width: '100%', 
 		position: 'relative',
 		justifyContent: 'center', 
 		alignItems: 'center', 
@@ -41,8 +45,8 @@ const style = StyleSheet.create({
 		position: 'absolute', 
 		left: 0, 
 		top: 0, 
-		width: '100%', 
-		height: '100%', 
+		right: 0,
+		bottom: 0,
 		backgroundColor: 'gray', 
 		borderRadius: 4
 	}

src/components/PressableOpacity/PressableOpacity.types.ts

@@ -4,4 +4,5 @@ import { PressableProps } from 'react-native';
 export interface PressableOpacityTypes extends PressableProps {
 	children: React.ReactNode;
 	isLoading?: boolean;
+	customStyle?: object | null;
   }

src/components/PressableOpacity/useAnimation.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Animated } from "react-native";
 
 const FADE_IN_ANIMATION_CONFIG = {
-	toValue: .7,
+	toValue: .3,
 	duration: 100,
 	useNativeDriver: false,
 };

storybook/stories/Button/Button.stories.tsx

@@ -68,3 +68,18 @@ storiesOf("Buttons", module)
 			</View>
 		)}
 	)
+	.add("Custom Button", () => {
+		return (
+			<View className="w-full px-4">
+				<Button
+					label={(text("label", "Button Label"))} 
+					onPress={action("clicked-text")}
+					buttonColor="bg-green-700"
+					textColor="text-white"
+					disabled={boolean("Disabled?", false)}
+					isLoading={boolean("Is Loading?", false)}
+					customButtonStyle="rounded-full px-2 py-1 bg-purple-200 w-32 justify-center items-center"
+					customTextStyle="text-black"/>
+			</View>
+		)}
+	)