solved

app/index.tsx

@@ -1,17 +1,22 @@
 import PetList from "@/components/PetList";
-import { View, StyleSheet } from "react-native";
+import { useState } from "react";
+import { View, StyleSheet, Switch } from "react-native";
 
 export default function Index() {
-  return (
-    <View style={styles.container}>
-      <PetList />
-    </View>
-  );
+	// const [toggle, setToggle] = useState(false);
+
+	return (
+		<View style={styles.container}>
+			<PetList />
+
+			{/* <Switch value={toggle} onChange={() => setToggle(!toggle)} /> */}
+		</View>
+	);
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f9e3be",
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "#f9e3be",
+	},
 });

components/NewComponent.tsx

@@ -0,0 +1,35 @@
+// rnfs
+
+// reactNativeFunctionalComponentWithStyles (ES7+ React/Redux/React-Native snippets)
+
+// import { StyleSheet, Switch, Text, View } from 'react-native'
+// import React from 'react'
+
+// export default function () {
+//   return (
+//     <View>
+//       <Text></Text>
+//     </View>
+//   )
+// }
+
+// const styles = StyleSheet.create({})
+
+// rnfes
+
+// reactNativeFunctionalExportComponentWithStyles (ES7+ React/Redux/React-Native snippets)
+
+// import { StyleSheet, Text, View } from 'react-native'
+// import React from 'react'
+
+// const  = () => {
+//   return (
+//     <View>
+//       <Text></Text>
+//     </View>
+//   )
+// }
+
+// export default
+
+// const styles = StyleSheet.create({})

components/PetItem.tsx

@@ -1,109 +1,111 @@
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 
 interface PetItemProps {
-  pet: {
-    id: number;
-    name: string;
-    description: string;
-    type: string;
-    image: string;
-    image2: string;
-  };
+	pet: {
+		id: number;
+		name: string;
+		description: string;
+		type: string;
+		image: string;
+		image2: string;
+	};
 }
 
 const PetItem = ({ pet }: PetItemProps) => {
-  return (
-    <View style={styles.container}>
-      <View style={styles.petInfo}>
-        <Image source={{ uri: pet.image }} style={styles.image} />
+	const [imageUri, setImageUri] = useState(pet.image);
 
-        <Text style={styles.name}>{pet.name}</Text>
+	return (
+		<View style={styles.container}>
+			<View style={styles.petInfo}>
+				<Image source={{ uri: imageUri }} style={styles.image} />
 
-        <Text style={styles.description}>{pet.description}</Text>
-      </View>
+				<Text style={styles.name}>{pet.name}</Text>
 
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity style={styles.petButton}>
-          <Text style={styles.buttonText}>Pet</Text>
-        </TouchableOpacity>
+				<Text style={styles.description}>{pet.description}</Text>
+			</View>
 
-        <TouchableOpacity style={styles.adoptButton}>
-          <Text style={styles.buttonText}>Adopt</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
+			<View style={styles.buttonContainer}>
+				<TouchableOpacity style={styles.petButton} onPress={() => setImageUri(pet.image2)}>
+					<Text style={styles.buttonText}>Pet</Text>
+				</TouchableOpacity>
+
+				<TouchableOpacity style={styles.adoptButton}>
+					<Text style={styles.buttonText}>Adopt</Text>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
 };
 
 export default PetItem;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-    backgroundColor: "#f9e3be",
-    padding: 20,
-    margin: 10,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  image: {
-    width: 200,
-    height: 200,
-    borderRadius: 10,
-  },
-  petInfo: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10,
-    marginBottom: 20,
-  },
-  text: {
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  name: {
-    fontSize: 18,
-    textAlign: "center",
-    color: "purple",
-    fontWeight: "bold",
-  },
-  description: {
-    fontSize: 16,
-    color: "black",
-    fontWeight: "light",
-  },
-  type: {
-    fontSize: 18,
-    fontWeight: "semibold",
-  },
-  buttonContainer: {
-    flexDirection: "row",
-    gap: 10,
-  },
-  petButton: {
-    backgroundColor: "#4ade80",
-    padding: 10,
-    borderRadius: 10,
-    width: "50%",
-    marginBottom: 10,
-  },
-  buttonText: {
-    textAlign: "center",
-    fontWeight: "bold",
-  },
-  adoptButton: {
-    backgroundColor: "#f43f5e",
-    padding: 10,
-    borderRadius: 10,
-    width: "50%",
-    marginBottom: 10,
-  },
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+		backgroundColor: "#f9e3be",
+		padding: 20,
+		margin: 10,
+		shadowColor: "#000",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.25,
+		shadowRadius: 3.84,
+		elevation: 5,
+	},
+	image: {
+		width: 200,
+		height: 200,
+		borderRadius: 10,
+	},
+	petInfo: {
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 10,
+		marginBottom: 20,
+	},
+	text: {
+		fontSize: 16,
+		fontWeight: "bold",
+	},
+	name: {
+		fontSize: 18,
+		textAlign: "center",
+		color: "purple",
+		fontWeight: "bold",
+	},
+	description: {
+		fontSize: 16,
+		color: "black",
+		fontWeight: "light",
+	},
+	type: {
+		fontSize: 18,
+		fontWeight: "semibold",
+	},
+	buttonContainer: {
+		flexDirection: "row",
+		gap: 10,
+	},
+	petButton: {
+		backgroundColor: "#4ade80",
+		padding: 10,
+		borderRadius: 10,
+		width: "50%",
+		marginBottom: 10,
+	},
+	buttonText: {
+		textAlign: "center",
+		fontWeight: "bold",
+	},
+	adoptButton: {
+		backgroundColor: "#f43f5e",
+		padding: 10,
+		borderRadius: 10,
+		width: "50%",
+		marginBottom: 10,
+	},
 });