I want to show my Bottom icons in the screen I have the array like this

export const bottomTabIcons = [
{
    name: 'Home',
    active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/home.png',
    inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/home.png',
},
{
    name: 'Search',
    active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/search.png',
    inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/search.png',
},
{
    name: 'Reels',
    active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/video.png',
    inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/video.png',
},
{
    name: 'Shop',
    active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/shopping-bag-full.png',
    inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/shopping-bag-full.png',
},
{
    name: 'Profile',
    active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/user-male-circle.png',
    inactive: 'https://img.icons8.com/ios/48/ffffff/user-male-circle.png',
}

]

Bottom Tabs Component like this

const BottomTab = (icons) => {
const [activeTab, setActiveTab] = useState('HOME')

const Icon = ({icon}) => (
    <TouchableOpacity onPress={() => setActiveTab(icon.name)}>
        <Image source={{uri: icon.active}} style={styles.icon} />
    </TouchableOpacity>
)
return (
    <View>
        {icons.map((icon, index) => (
            <Icon key={index} icon={icon} />
        ))}
    </View>
)

}

Because I am accessing it on home screen I do have access it like this,

<BottomTab icons={bottomTabIcons} />

It's erroring out for this

{icons.map((icon, index) => (
            <Icon key={index} icon={icon} />
        ))}

How to solve that...

CodePudding user response：

const BottomTab = ({icons}) => {}