implement base button with pressable component

template/src/components/pressables/BaseButton.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import {
+  ActivityIndicator,
+  Insets,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import colors from '@config/ui/colors'
+import { FC } from '@utils/types'
+
+const BORDER_RADIUS = 5
+
+type RoundButtonType = 'primary' | 'secondary'
+
+export type BaseButtonPropsType = {
+  disabled?: boolean | null
+  onPress?: () => void
+  variant?: RoundButtonType
+  style?: StyleProp<ViewStyle>
+  styleText?: StyleProp<TextStyle>
+  rootStyle?: StyleProp<ViewStyle>
+  hitSlop?: null | Insets | number
+  loading?: boolean
+}
+
+const BaseButton: FC<BaseButtonPropsType> = ({
+  disabled,
+  onPress,
+  variant = 'primary',
+  style,
+  styleText,
+  rootStyle,
+  hitSlop,
+  loading,
+  children,
+}) => {
+  const wrapperStyles = [
+    styles.wrapper,
+    variant === 'primary' && styles.primary,
+    variant === 'secondary' && styles.secondary,
+    style,
+  ]
+  const textStyles = [
+    variant === 'primary' && styles.textPrimary,
+    variant === 'secondary' && styles.textSecondary,
+    styleText,
+  ]
+
+  return (
+    <Pressable
+      hitSlop={hitSlop}
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => [rootStyle, { opacity: pressed ? 0.6 : 1 }]}
+    >
+      <View style={wrapperStyles}>
+        <Text style={textStyles}>{children}</Text>
+        {loading ? <ActivityIndicator size="small" style={styles.loadingIndicator} /> : null}
+        {disabled ? <View style={styles.disabled} /> : null}
+      </View>
+    </Pressable>
+  )
+}
+
+export default BaseButton
+
+const styles = StyleSheet.create({
+  disabled: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: colors.transparentBlack,
+  },
+  loadingIndicator: {
+    marginLeft: 5,
+  },
+  primary: {
+    backgroundColor: colors.primary,
+  },
+  secondary: {
+    backgroundColor: colors.transparent,
+    borderWidth: 0,
+  },
+  textPrimary: {
+    color: colors.onPrimary,
+  },
+  textSecondary: {
+    color: colors.secondary,
+  },
+  wrapper: {
+    alignItems: 'center',
+    borderRadius: BORDER_RADIUS,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 8,
+  },
+})

template/src/config/ui/colors.ts

@@ -8,6 +8,7 @@ enum Palette {
   ANGRY = '#dd3333',
   DEEP_PURPLE = '#5D2555',
   TRANSPARENT = 'rgba(0, 0, 0, 0)',
+  TRANSPARENT_BLACK = 'rgba(0,0,1,0.14)',
 }
 
 const Colors = {
@@ -23,6 +24,7 @@ const Colors = {
   error: Palette.ANGRY,
   onError: Palette.WHITE,
   transparent: Palette.TRANSPARENT,
+  transparentBlack: Palette.TRANSPARENT_BLACK,
 }
 
 export default Colors