Update

components/DetailButton.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  PressableProps,
+} from "react-native";
+
+interface DetailButtonProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const DetailButton: React.FC<DetailButtonProps> = ({
+  children,
+  style,
+  ...rest
+}) => {
+  return (
+    <Pressable
+      style={({ focused }) => [
+        styles.button,
+        style,
+        focused && styles.buttonFocused,
+      ]}
+      {...rest}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#333",
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+    borderRadius: 8,
+    margin: 5,
+    borderWidth: 2,
+    borderColor: "transparent",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  buttonFocused: {
+    backgroundColor: "#0056b3",
+    borderColor: "#fff",
+    elevation: 5,
+    shadowColor: "#fff",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 15,
+  },
+});