Navigation using images nested inside Touchable Opacity

Question

Background:

I've designed a custom footer for my app in React Native, I've set some images to act as icons. I'm trying to have them redirect to other pages of the app upon touch.

What I have tried

I've been trying to use the same images nested within TouchableOpacity components to have them redirect to other pages using react navigation. This is my code:

export class Footer extends React.Component {
    
    render (){
        return (
            <View style = { styles.footStyle } >

                <TouchableOpacity onPress={ () => navigation.push('Home')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/home.png')}/>
               </TouchableOpacity>
               
               <TouchableOpacity onPress={ () => navigation.push('Favoritos')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/heart.png')}/>
                </TouchableOpacity>

                <TouchableOpacity onPress={ () => navigation.push('Search')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/search.png')}/>
                </TouchableOpacity>

                <TouchableOpacity onPress={ () => navigation.push('Notifications')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/bell.png')}/>
                </TouchableOpacity>
                
                <TouchableOpacity onPress={ () => navigation.push('Help')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/circle.png')}/>
                </TouchableOpacity>

            </View>
        )
    }
} 

const styles = StyleSheet.create({
    footStyle: {
        paddingBottom: 0,
        paddingRight: 10,
        backgroundColor: '#ffffff',
        flex: 0.4,
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#000000'
    },
    iconStyle: {
        flex: 0.2,
        height: undefined,
        width: undefined
    }
})

Problem

When I try and run the app in expo, the images are not rendering at all. I get my blank footer without any content. I've tried touching the footer to see if the images weren't rendering but the "button" actually worked, that didn't work.

Question

How exactly can I nest an image within a TouchableOpacity component? Is it even possible to use this method with React Navigation?

Thanks a lot!

Answer 1

For an Image component to work you should provide a height and width in style.

Here you are setting it as undefined Try something like

 iconStyle: {
        flex: 0.2,
        height: 100,
        width: 100
    }

Also on the navigation, you will have to pass the navigation prop to the Footer. As its a class you should access it as this.props.navigation.navigate()

As your code for integrating the Footer is not here, its hard to comment on how to pass the prop to the footer.