Rewrite palette function, Redesign color palette UI

Extension of commit 2287da6. Passing the colorData array correctly into the sharepalette screen to remove redundant code and map the array. Redesigned the color palette export as well.

README.md

@@ -1,15 +1,14 @@
-# HexSplash
+# <img src="https://github.com/ChitrakshTarun/HexSplash/blob/main/assets/images/icon.png" height="32"> HexSplash
 
 Color palette generator app, generating 5 random colours for being used as design inspiration to be used in a design. The app functions on the frontend, and uses a randomiser function to randomise the colors on the screen.
 
 # Tech Stack
 
-### Frameworks & Languages
+### Frameworks, Tools & Languages
 
 - React Native
 - Expo
-- JavaScript
-- TypeScript
+- JavaScript/TypeScript
 
 ### Dependencies
 
@@ -36,7 +35,7 @@ Color palette generator app, generating 5 random colours for being used as desig
 
 - Node.js
 - Expo CLI
-- Expo Go Mobile App
+- Android/iOS Emulator (A Physical Device works as well)
 
 ### Installation
 
@@ -56,18 +55,18 @@ cd HexSplash
 npm install
 ```
 
-3. Start up the app
+3. Build a prebuild of the app, and then run the app.
 
 ```
-npx expo start
+npx expo prebuild
 ```
 
-4. Use the Expo Go app to scan the QR code and run the app on your mobile device.
-
-You can alternatively use an emulator using Android Studio or XCode to run the app on an emulator as well.
+```
+npx expo run:android
+```
 
 # Contributions
 
-I have developed this app as a learning project to learn about the concepts of React/React Native/Expo. I am open to open-source contributions towards this app, if any, which can help in optimising the code or improving/adding the features inside the app.
+I have developed this app as a learning project to learn about the concepts of React Native, Expo and JavaScript/TypeScript. I am open to open-source contributions towards this app, if any, which can help in optimising the code or improving/adding the features inside the app.
 
 [ This project has been inspired from the https://coolors.co/ tool. ]

app/generator.tsx

@@ -4,10 +4,10 @@ import { Ionicons } from "@expo/vector-icons";
 import InfoModal from "@/components/InfoModal";
 import { useRouter } from "expo-router";
 import Colors from "@/constants/Colors";
+import { isColorDark } from "@/components/IsColorDark";
 
 const Generator = () => {
 	const router = useRouter();
-	/* FUNCTION: Generates a random hex code everytime the function is rendered. */
 	const getRandomHexCode = (): string => {
 		const letters = "0123456789ABCDEF";
 		let hexCode = "#";
@@ -20,19 +20,6 @@ const Generator = () => {
 	const [modalVisible, setModalVisible] = useState<boolean>(false);
 	const [colorCode, setColorCode] = useState<string[]>(Array.from({ length: 5 }, () => getRandomHexCode()));
 	const [locks, setLocks] = useState<boolean[]>(new Array(5).fill(false));
-	/* 
-	FUNCTION: Identify if color is light or dark.
-	(Copilot clutched out on this code. Function finds the luma of the color and returns if it is < 128. Using this to determine whether the text above the color should be white or black.)
-	*/
-	const isColorDark = (color: string): boolean => {
-		const c = color.substring(1);
-		const rgb = parseInt(c, 16);
-		const r = (rgb >> 16) & 0xff;
-		const g = (rgb >> 8) & 0xff;
-		const b = (rgb >> 0) & 0xff;
-		const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-		return luma < 128;
-	};
 	const generateRandomHexCodes = (): void => {
 		colorCode.forEach((color, index) => {
 			if (!locks[index]) {
@@ -129,15 +116,8 @@ const Generator = () => {
 					onPress={() => {
 						router.push({
 							pathname: "/sharepalette",
-							/* 
-							TODO: Rewrite this section of the code to pass the entire array instead of individually doing it.
-							*/
 							params: {
-								color1: colorCode[0],
-								color2: colorCode[1],
-								color3: colorCode[2],
-								color4: colorCode[3],
-								color5: colorCode[4],
+								colors: JSON.stringify([...colorCode]),
 							},
 						});
 					}}

app/sharepalette.tsx

@@ -5,46 +5,37 @@ import { useLocalSearchParams } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import ViewShot from "react-native-view-shot";
 import Share from "react-native-share";
+import { isColorDark } from "@/components/IsColorDark";
 
 /* 
 TODO: Add Download functionality as well. Save to an album named HexSplash into the user's gallery.
-TODO: Improve UI of this page as well as the way the color palette looks.
 */
 const SharePalette = () => {
-	const { color1, color2, color3, color4, color5 } = useLocalSearchParams();
+	const { colors } = useLocalSearchParams();
+	const parsedColors = JSON.parse(colors);
 	const ref = useRef();
 	const [uri, setUri] = useState<string>("Test");
 	useEffect(() => {
 		ref.current.capture().then((uri: any) => {
-			console.log("Captured URI", uri);
+			// console.log("Captured URI", uri);
 			setUri(uri);
 		});
 	}, []);
 	return (
 		<View style={styles.container}>
+			<Text style={styles.headerText}>My Color Palette | HexSplash</Text>
 			<ViewShot ref={ref}>
 				<View style={styles.paletteContainer}>
-					<Text style={styles.headerText}>My Color Palette | HexSplash</Text>
-					<View style={styles.paletteElementContainer}>
-						<View style={{ backgroundColor: color1.toString(), width: 40, height: 40 }}></View>
-						<Text style={styles.colorText}>{color1}</Text>
-					</View>
-					<View style={styles.paletteElementContainer}>
-						<View style={{ backgroundColor: color2.toString(), width: 40, height: 40 }}></View>
-						<Text style={styles.colorText}>{color2}</Text>
-					</View>
-					<View style={styles.paletteElementContainer}>
-						<View style={{ backgroundColor: color3.toString(), width: 40, height: 40 }}></View>
-						<Text style={styles.colorText}>{color3}</Text>
-					</View>
-					<View style={styles.paletteElementContainer}>
-						<View style={{ backgroundColor: color4.toString(), width: 40, height: 40 }}></View>
-						<Text style={styles.colorText}>{color4}</Text>
-					</View>
-					<View style={styles.paletteElementContainer}>
-						<View style={{ backgroundColor: color5.toString(), width: 40, height: 40 }}></View>
-						<Text style={styles.colorText}>{color5}</Text>
-					</View>
+					{parsedColors.map((color: string, index: number) => (
+						<View
+							key={index}
+							style={styles.paletteElementContainer}
+						>
+							<View style={{ backgroundColor: color, width: "100%", height: "100%" }}>
+								<Text style={[styles.colorText, { color: isColorDark(color) ? "white" : "black" }]}>{color}</Text>
+							</View>
+						</View>
+					))}
 				</View>
 			</ViewShot>
 			<Pressable
@@ -71,8 +62,8 @@ const SharePalette = () => {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
+		paddingTop: 30,
 		backgroundColor: "#fff",
-		justifyContent: "center",
 		gap: 64,
 		alignItems: "center",
 	},
@@ -85,26 +76,24 @@ const styles = StyleSheet.create({
 		backgroundColor: "#fff",
 		aspectRatio: 1,
 		borderWidth: 1,
-		borderRadius: 12,
-		flexWrap: "wrap",
 		justifyContent: "center",
 		alignItems: "flex-start",
-		paddingHorizontal: 30,
-		gap: 20,
 	},
 	paletteElementContainer: {
 		flexDirection: "row",
+		flex: 1,
 		height: 40,
-		width: "90%",
+		width: "100%",
 		borderRadius: 20,
 		gap: 20,
 		justifyContent: "flex-start",
 		alignItems: "center",
 	},
 	colorText: {
 		fontSize: 22,
-		color: "#000",
 		fontWeight: "bold",
+		left: 5,
+		top: 5,
 	},
 	downloadButton: {
 		flexDirection: "row",

components/IsColorDark.tsx

@@ -0,0 +1,13 @@
+/* 
+FUNCTION: Identify if color is light or dark.
+(Copilot clutched out on this code. Function finds the luma of the color and returns if it is < 128. Using this to determine whether the text above the color should be white or black.)
+*/
+export const isColorDark = (color: string): boolean => {
+	const c = color.substring(1);
+	const rgb = parseInt(c, 16);
+	const r = (rgb >> 16) & 0xff;
+	const g = (rgb >> 8) & 0xff;
+	const b = (rgb >> 0) & 0xff;
+	const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+	return luma < 128;
+};