Added drip shadow to IOS

Golf-Drill-Challenge-App · Apr 25, 2024 · b61056b · b61056b
1 parent 5a67271
commit b61056b
Showing 1 changed file with 87 additions and 66 deletions.
diff --git a/components/input/navigationRectangle.js b/components/input/navigationRectangle.js
@@ -4,98 +4,119 @@ import { Divider, Icon, Text } from "react-native-paper";
 import { getIconByKey } from "~/Utility";
 
 export default function NavigationRectangle({ drillInfo, inputValues, shot }) {
-  console.log("inputValues", inputValues);
+  // console.log("inputValues", inputValues);
   const keys = Object.keys(inputValues);
   return (
     <View
       style={{
-        backgroundColor: "#d9d9d9",
+        shadowColor: "black",
+        shadowOffset: {
+          width: 0,
+          height: 3,
+        },
+        backgroundColor: "transparent",
+        shadowOpacity: 0.2,
+        shadowRadius: 5,
         padding: 10,
         paddingLeft: 20,
         paddingRight: 20,
-        borderRadius: 10,
         maxHeight: 250,
-        width: "80%",
+        width: "90%",
         overflow: "hidden",
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        elevation: 5,
       }}
     >
-      <View>
-        <Text
-          style={{
-            fontSize: 20,
-          }}
-        >
-          Shot <Text style={{ fontWeight: "bold" }}>{shot.shotNum}</Text>
-        </Text>
-      </View>
-
       <View
         style={{
-          flexDirection: "column",
+          backgroundColor: "#d9d9d9",
+          padding: 10,
+          paddingLeft: 20,
+          paddingRight: 20,
+          borderRadius: 10,
+          maxHeight: 250,
+          width: "100%",
+          flexDirection: "row",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: "space-between",
+          elevation: 5,
         }}
       >
+        <View>
+          <Text
+            style={{
+              fontSize: 20,
+            }}
+          >
+            Shot <Text style={{ fontWeight: "bold" }}>{shot.shotNum}</Text>
+          </Text>
+        </View>
+
         <View
           style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            gap: 10,
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
-          {drillInfo.requirements.map((requirement) => (
-            <Text
-              key={requirement.name}
-              style={{
-                fontSize: 16,
-                padding: 2,
-              }}
-            >
-              {requirement.prompt}:
-              <Text style={{ fontWeight: "bold" }}>
-                {" "}
-                {shot.items[requirement.name]} {requirement.distanceMeasure}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              gap: 10,
+            }}
+          >
+            {drillInfo.requirements.map((requirement) => (
+              <Text
+                key={requirement.name}
+                style={{
+                  fontSize: 16,
+                  padding: 2,
+                }}
+              >
+                {requirement.prompt}:
+                <Text style={{ fontWeight: "bold" }}>
+                  {" "}
+                  {shot.items[requirement.name]} {requirement.distanceMeasure}
+                </Text>
               </Text>
-            </Text>
-          ))}
-        </View>
+            ))}
+          </View>
 
-        {keys.length > 0 && !keys.some((key) => !inputValues[key]) && (
-          <Divider
-            style={{ backgroundColor: "#A0A0A0", height: 1, width: "100%" }}
-          />
-        )}
+          {keys.length > 0 && !keys.some((key) => !inputValues[key]) && (
+            <Divider
+              style={{ backgroundColor: "#A0A0A0", height: 1, width: "100%" }}
+            />
+          )}
 
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-evenly",
-          }}
-        >
-          {drillInfo.inputs.map((input, id) => {
-            if (inputValues[input.id]) {
-              return (
-                <View
-                  style={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginTop: 10,
-                  }}
-                  key={id}
-                >
-                  <Icon source={getIconByKey(input.id)} size={15} />
-                  <Text style={{ fontSize: 13, padding: 2 }}>
-                    {inputValues[input.id]} {input.distanceMeasure}
-                  </Text>
-                </View>
-              );
-            }
-          })}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-evenly",
+            }}
+          >
+            {drillInfo.inputs.map((input, id) => {
+              if (inputValues[input.id]) {
+                return (
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      marginTop: 10,
+                    }}
+                    key={id}
+                  >
+                    <Icon source={getIconByKey(input.id)} size={15} />
+                    <Text style={{ fontSize: 13, padding: 2 }}>
+                      {inputValues[input.id]} {input.distanceMeasure}
+                    </Text>
+                  </View>
+                );
+              }
+            })}
+          </View>
         </View>
       </View>
     </View>