ScrollView React Native with Flexbox won't work

Question

I created a set of 8 boxes. I used flexbox to position them. The boxes will not all fit on the screen so I added a to vertically scroll through them. But somehow it won't work. Only 8 boxes are shown and I cannot scroll down to see the rest. I am frustrated.

Any ideas what is wrong here?

Here is my code:

<View style={styles.background}> 
      <ScrollView style={styles.scrollView}>
             <View style={styles.LessonBoxRow}>
            <Animated.View
              entering={FadeInDown.delay(300).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
              <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
             <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
              <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
              <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
              <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
             <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
              <LessonBox/>
            </Animated.View>
            <Animated.View
              entering={FadeInDown.delay(400).duration(200)}
              easing={Easing.bezier(0.5, 0.01, 0, 1)}
            >
             <LessonBox/>
            </Animated.View>
            </View>
      </ScrollView>
      </View>
  );
}

const styles = StyleSheet.create({

  scrollView: {
    backgroundColor: 'pink',
    flex: 1,
  },
  LessonBoxRow: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    top: 140,
    flexWrap: "wrap",
    marginTop: 10,
  },

  background: {
    height: "100%",
  },

});