From e570a23baf41dc1c2b7709c3b9305a5780107b92 Mon Sep 17 00:00:00 2001
From: "Mauro E. Bender" <mauro@amalgama.co>
Date: Thu, 26 Jan 2023 12:01:04 +0100
Subject: [PATCH] Fix several warnings in example apps

---
 example/src/components/CardExample.tsx          | 1 +
 example/src/components/PaletteColorGrid.tsx     | 8 ++++----
 web_example/src/components/CardExample.tsx      | 1 +
 web_example/src/components/PaletteColorGrid.tsx | 8 ++++----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/example/src/components/CardExample.tsx b/example/src/components/CardExample.tsx
index bb31046..c9f382f 100644
--- a/example/src/components/CardExample.tsx
+++ b/example/src/components/CardExample.tsx
@@ -15,6 +15,7 @@ const CardExample = () => (
 				rightActions={[
 					<IconButton
 						as={UIKitIcon}
+						key="more-button"
 						name="more-vertical-outline"
 						onPress={() => window.alert( 'more button pressed' )}
 					/>
diff --git a/example/src/components/PaletteColorGrid.tsx b/example/src/components/PaletteColorGrid.tsx
index 970d88e..3a0a669 100644
--- a/example/src/components/PaletteColorGrid.tsx
+++ b/example/src/components/PaletteColorGrid.tsx
@@ -104,7 +104,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<VStack>
 				{textStyles.map( ( { color, label } ) => (
-					<Text variant="body-special" color={color}>{label}</Text>
+					<Text key={color} variant="body-special" color={color}>{label}</Text>
 				) )}
 			</VStack>
 
@@ -114,7 +114,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundPrimaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="white">{label}</Text>
 					</Box>
 				) )}
@@ -126,7 +126,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundSecondaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}
@@ -138,7 +138,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{borderStyles.map( ( { color, label } ) => (
-					<Box borderColor={color} borderWidth="xs" height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} borderColor={color} borderWidth="xs" height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}
diff --git a/web_example/src/components/CardExample.tsx b/web_example/src/components/CardExample.tsx
index e61bddb..c5ac7bc 100644
--- a/web_example/src/components/CardExample.tsx
+++ b/web_example/src/components/CardExample.tsx
@@ -15,6 +15,7 @@ const CardExample = () => (
 				rightActions={[
 					<IconButton
 						as={UIKitIcon}
+						key="more-button"
 						name="more-vertical-outline"
 						onPress={() => window.alert( 'more button pressed' )}
 					/>
diff --git a/web_example/src/components/PaletteColorGrid.tsx b/web_example/src/components/PaletteColorGrid.tsx
index aefd3cc..d67362f 100644
--- a/web_example/src/components/PaletteColorGrid.tsx
+++ b/web_example/src/components/PaletteColorGrid.tsx
@@ -104,7 +104,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<VStack>
 				{textStyles.map( ( { color, label } ) => (
-					<Text variant="body-special" color={color}>{label}</Text>
+					<Text key={color} variant="body-special" color={color}>{label}</Text>
 				) )}
 			</VStack>
 
@@ -114,7 +114,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundPrimaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="white">{label}</Text>
 					</Box>
 				) )}
@@ -126,7 +126,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundSecondaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}
@@ -138,7 +138,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{borderStyles.map( ( { color, label } ) => (
-					<Box borderColor={color} borderWidth="sm" height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} borderColor={color} borderWidth="sm" height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}