React Native ScrollView Horizontal not working

Question

I'm new to react native, and I'm trying to put a horizontal scrollview on my screen.

I've tried to put <ScrollView horizontal={true}> but it's not working at all, I want the blue box scrollable.

here' the image of my screen :

and this for my component code :

import React from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';

export default function Body() {
  return (
    <View>
      <View style={styles.jadwal}>
        <ScrollView horizontal={true}>
          <View style={styles.box}>
            <Text style={styles.title}>Math</Text>
            <View style={styles.wrap}>
              <View style={styles.alert}>
                <Text style={styles.pr}>3 Homework</Text>
                <Image
                  style={styles.img}
                  source={require('../assets/math.png')}
                />
              </View>
            </View>
          </View>

          <View style={styles.box}>
            <Text style={styles.title}>Biology</Text>
            <View style={styles.wrap}>
              <View style={styles.alert}>
                <Text style={styles.pr}>10 Homework</Text>
                <Image
                  style={styles.img}
                  source={require('../assets/math.png')}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  jadwal: {
    marginLeft: 10,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    position: 'absolute',
  },
  box: {
    height: 100,
    width: 230,
    borderRadius: 10,
    backgroundColor: '#327fe3',
    marginLeft: 10,
  },
  alert: {
    height: 20,
    marginLeft: 15,
    width: 80,
    borderRadius: 10,
    backgroundColor: '#7CD5FF',
  },
  title: {
    marginTop: 20,
    marginLeft: 20,
    fontFamily: 'MontserratSemiBold',
    fontSize: 15,
    color: '#fff',
  },
  pr: {
    marginLeft: 14,
    fontSize: 8,
    color: '#fff',
    marginTop: 4,
    justifyContent: 'flex-start',
    fontFamily: 'MontserratLight',
  },
  wrap: {
    marginTop: 5,
  },
  img: {
    height: 50,
    width: 50,
    marginLeft: 140,
    marginTop: -35,
  },
});

is there anything wrong ?, did I put the <ScrollView> on wrong position ?

Thanks for reading this, and sorry for my bad english.

Answer 1

There's one error of font-family cause, this font is not installed in my laptop.

Overall your scroll view is working fine.

Note: scroll view is scrolling area is in between the opening and closing tag of scroll.