card footer not displaying

[asidapara]

Hi there,

I am using the card component on an react native expo deployment of UiKitten, and for some reason, the footer is not displaying in the card. I am not sure if it is because of the way I have hard-coded the height of the card or something else. I am following the demo to include a card and both a header and footer:

Footer code:

const Footer = (props) => (
  <View {...props} style={[styles.footerContainer]}>
                    <Text category='p2'>Test Footer</Text>

  </View>
);

Card code:

<Card style={styles.card} 
    header={ <View>
                <Text category='h6'>Ford and GM Scale Back Production Amid Chip Shortage</Text>
                <Text category='p2'>Wall Street Journal</Text>
              </View>} 
    footer={
      Footer
    }
>
    <Image
      source={{ uri: 'https://images.wsj.net/im-297335?width=860&size=1.5&pixel_ratio=2'}}
      style={styles.cardImage}
    />  
    </Card>

Style code:

const styles = StyleSheet.create({
  topContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  card: {
    margin: 10,
    height: 300
  },
  cardImage: {
    width: '100%',
    height: '100%', 
    resizeMode: 'cover'

  },
  footerContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  footerControl: {
    marginHorizontal: 2,
  },
});

This is the output: