created SingleSelectButtonGroup component

app/(tabs)/settings/index.tsx

@@ -1,18 +1,35 @@
-import React from "react";
-import { Text } from "react-native";
+import React, { useState } from "react";
+import { Button, Text } from "react-native";
+import SingleSelectButtonGroup from "../../../component/global/select_button";
 
 export default function Index() {
-  /**********************************狀態管理**********************************/
-  /**********************************狀態管理**********************************/
-  /**********************************組件初始化**********************************/
-  /**********************************組件初始化**********************************/
-  /**********************************異步函數**********************************/
-  /**********************************異步函數**********************************/
+	/**********************************狀態管理**********************************/
+	/**********************************狀態管理**********************************/
+	/**********************************組件初始化**********************************/
+	/**********************************組件初始化**********************************/
+	/**********************************異步函數**********************************/
+	/**********************************異步函數**********************************/
 
-  return (
-    ////testing component here
-    <>
-      <Text>Test Here</Text>
-    </>
-  );
+	//receiving option value from child component
+	const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+	//Imitating the next button for testing purpose
+	const [nextIsClicked, setNextIsClicked] = useState<boolean>(false);
+
+	const options = [{ label: "信用卡" }, { label: "支付寶" }, { label: "微信支付" }];
+
+	return (
+		////testing component here
+		<>
+			<SingleSelectButtonGroup
+				options={options}
+				selectedOption={selectedOption}
+				onSelectionChange={setSelectedOption}
+				//only show red outline when next button is clicked AND no value is selected
+				shouldShowRedOutline={nextIsClicked === true && selectedOption === null}
+			/>
+
+			<Button title="next" onPress={() => setNextIsClicked(true)} />
+		</>
+	);
 }

component/global/select_button.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Text, View, StyleSheet, ViewStyle, StyleProp, TouchableOpacity } from "react-native";
+
+type Option = {
+	label: string;
+};
+
+interface SingleSelectButtonGroupProps {
+	options: Option[];
+	onSelectionChange: (value: string) => void;
+	extendedStyle?: StyleProp<ViewStyle>;
+	shouldShowRedOutline: boolean;
+	selectedOption: string | null;
+}
+
+const SingleSelectButtonGroup: React.FC<SingleSelectButtonGroupProps> = ({
+	options,
+	onSelectionChange,
+	extendedStyle,
+	shouldShowRedOutline,
+	selectedOption,
+}) => {
+	return (
+		<View>
+			{options.map((option, index) => (
+				<TouchableOpacity
+					key={index}
+					style={[
+						styles.button,
+						selectedOption === option.label && styles.selectedButton,
+						shouldShowRedOutline && styles.redOutline,
+						extendedStyle,
+					]}
+					onPress={() => onSelectionChange(option.label)}
+				>
+					<Text>{option.label}</Text>
+					<View style={[styles.circle, selectedOption === option.label && styles.selectedCircle]} />
+				</TouchableOpacity>
+			))}
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		maxWidth: "100%",
+		padding: 15,
+		margin: 10,
+		borderWidth: 1,
+		justifyContent: "space-between",
+		alignItems: "center",
+		flexDirection: "row",
+		borderRadius: 8,
+		borderColor: "#bbbbbb",
+	},
+	circle: {
+		width: 10,
+		height: 10,
+		borderRadius: 5,
+		backgroundColor: "#e8e8e8",
+		borderWidth: 1,
+		borderColor: "#bbbbbb",
+	},
+	selectedButton: {
+		borderWidth: 1,
+		borderColor: "#949494",
+	},
+	selectedCircle: {
+		backgroundColor: "#949494",
+	},
+	redOutline: {
+		borderWidth: 1,
+		borderColor: "red",
+	},
+});
+
+export default SingleSelectButtonGroup;