I am attempting to display a series of icons from an array called icons. However, when I try to use
{icons.map((icon, index) =>(<Icon key = {index} icon={icon}/>)}Below is the code snippet I am working on:
const BottomTabs = ({ icons }) => {
const [activeTab, setActiveTab] = useState('Home')
const Icon = ({icon}) => (
<TouchableOpacity onPress = {() => setActiveTab(icon.name)}>
<Image source = {icon.inactive} style= {styles.icon}/>
</TouchableOpacity>
)
return (
<View>
{ icons.map((icon, index) =>(
<Icon key = {index} icon={icon}/>
))}
</View>
)
}
Any insights on what may be causing this issue?
EDIT: This is how I am passing the array to the component:
<BottomTabs icons = {bottomTabIcons}/>Here is an example of the objects in the array:
const bottomTabIcons = [
{
name: 'Home',
active: require('../../assets/home-active.png'),
inactive: require('../../assets/home.png')
}
]
Is there something wrong with how I am passing the array to my BottomTabs component?