title: Navigation using images nested inside Touchable Opacity
body: <p><strong>Background:</strong></p>
  <p>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.</p>
  <p><strong>What I have tried</strong></p>
  <p>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:</p>
  <pre><code>export class Footer extends React.Component {
      
      render (){
          return (
              &lt;View style = { styles.footStyle } &gt;
  
                  &lt;TouchableOpacity onPress={ () =&gt; navigation.push('Home')} &gt;
                      &lt;Image 
                          style = { styles.iconStyle }
                          source = {require('./img/home.png')}/&gt;
                 &lt;/TouchableOpacity&gt;
                 
                 &lt;TouchableOpacity onPress={ () =&gt; navigation.push('Favoritos')} &gt;
                      &lt;Image 
                          style = { styles.iconStyle }
                          source = {require('./img/heart.png')}/&gt;
                  &lt;/TouchableOpacity&gt;
  
                  &lt;TouchableOpacity onPress={ () =&gt; navigation.push('Search')} &gt;
                      &lt;Image 
                          style = { styles.iconStyle }
                          source = {require('./img/search.png')}/&gt;
                  &lt;/TouchableOpacity&gt;
  
                  &lt;TouchableOpacity onPress={ () =&gt; navigation.push('Notifications')} &gt;
                      &lt;Image 
                          style = { styles.iconStyle }
                          source = {require('./img/bell.png')}/&gt;
                  &lt;/TouchableOpacity&gt;
                  
                  &lt;TouchableOpacity onPress={ () =&gt; navigation.push('Help')} &gt;
                      &lt;Image 
                          style = { styles.iconStyle }
                          source = {require('./img/circle.png')}/&gt;
                  &lt;/TouchableOpacity&gt;
  
              &lt;/View&gt;
          )
      }
  } 
  
  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
      }
  })
  </code></pre>
  <p><strong>Problem</strong></p>
  <p>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 &quot;button&quot; actually worked, that didn't work.</p>
  <p><strong>Question</strong></p>
  <p>How exactly can I nest an image within a TouchableOpacity component? Is it even possible to use this method with React Navigation?</p>
  <p>Thanks a lot!</p>