Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance would be greatly appreciated!
import { View, Text, StyleSheet, Image } from "react-native";
import React, { useState } from "react";
import { LinearGradient } from "expo-linear-gradient";
export default function Card(props: any) {
const colors = [
["#FE90B0", "#F45283", "#ff0047"],
["#89E5FE", "#43C5E9", "#00c9ff"],
["#AE9CFF", "#927FFC", "#2700ff"],
["#FED3A0", "#FFA741", "#ff8800"],
];
return (
<View
style={[styles.card, styles.shadow, { shadowColor: `${colors[0][2]}` }]}
>
// .... unrelated code
}
const styles = StyleSheet.create({
card: {
height: "33%",
width: "85%",
borderRadius: 35,
},
shadow: {
shadowColor: `${colors[0][2]}`,
shadowOffset: {
width: 0,
height: 18,
},
shadowOpacity: 0.25,
shadowRadius: 20.0,
elevation: 24,
},
fonts: {
padding: 15,
},
img: {
width: "100%",
height: "95%",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
},
});