React Native flex view will not shrink after device rotation

I am new to React Native and have been struggling for a couple of days now with my layout overflowing the container after rotating the device and then rotating it back. What seems to happen is when I rotate the device from horizontal to vertical the text in the body takes up more height. When rotating back to horizontal the height seems to be sticking for the body rather than resizing like it should. I am testing it in Android Studio. I have tried two different emulators with the same results.

This is what it looks like when I first load the page:

I rotate it vertical and get this:

When I rotate it back I get the following. Notice that the start button is missing in the first box.

Here is my code:

<ScrollView style={SiteStyle.mainContent} contentContainerStyle={SiteStyle.mainContentContainer}>
      <View style={SiteStyle.cardGroup}>
      <View style={SiteStyle.homeCardContainer}>
          <Card 
            title={
              <View style={SiteStyle.homeCardHeader}>
                <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                  <PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 1</Text>
                </View>
              </View>}
            containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('Pricing', {})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START <PSIcon name='controls-chevron-right'/>
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>
        <View style={SiteStyle.homeCardContainer}>
          <Card title={
            <View style={SiteStyle.homeCardHeader}>
              <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                <PSIcon color='#fff' name='chart-chart' size={24} style={{marginRight: 10}} /><Text style={SiteStyle.homeCardTitle}>Topic 2</Text>
              </View>  
            </View>} containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('TrendsAndAnalytics', {})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START  <PSIcon name='controls-chevron-right'/>
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>
        <View style={SiteStyle.homeCardContainer}>
          <Card title={
            <View style={SiteStyle.homeCardHeader}>
              <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                <PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 3</Text>
              </View>
            </View>} containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('MacroEconomics', {})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START <PSIcon name='controls-chevron-right' />
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>    
      </View> 
    </ScrollView>

These are the relevant styles:

    mainContentContainer: {
    paddingTop: 25, 
    alignItems: 'flex-start',
    backgroundColor: "red"
  },
  cardGroup: {
    flexDirection: 'row',
    flex: -1
  },
  homeCardContainer: {
    flex: 1,
    backgroundColor: 'blue',
    flexDirection: 'column',
  },
  homeCard: {
    flex: 1,
    padding: 0,
    marginTop: 0,
    marginHorizontal: 10,
    flexDirection: 'row',
    backgroundColor: 'green',
    height: '100%'
  }, 
  homeCardHeader: {
    backgroundColor: '#e0ab24',
    flex: -1,
    flexBasis: 55,
    height: 55,
    justifyContent: 'center', 
    paddingLeft: 20,
    paddingTop: 0
  },
  homeCardTitle: {
    color: '#ffffff', 
    fontSize: 22, 
    marginLeft: 0, 
    paddingRight: 0,
    textAlign: 'left'
  },
  homeCardBody: {
    flexDirection: 'column',
    flex: 1,
    paddingLeft: 25, 
    paddingRight: 25, 
    paddingTop: 25,
    paddingBottom: 25,
    backgroundColor: 'yellow'
  }, 
  homeCardBodyText: {
    fontSize: 16,
    backgroundColor: 'pink'
  }, 
  homeCardFooter: {
    flex: 0,
    flexBasis: 44,
    justifyContent: 'center',
    height: 44,
    borderTopColor: '#d3d3d3', 
    borderTopWidth: 1,
    backgroundColor: 'gray',
  }, 
  homeCardFooterText: {
    paddingLeft: 25,
    paddingRight: 25,
    color: '#ebad49',
    fontSize: 18
  },