Untitled

    <View>
      <ScrollView
        contentContainerStyle={{}}
        horizontal={true}
        showsHorizontalScrollIndicator={true}
      >
        <View style={{ marginRight: 12, flex: 1 }}>
          <Image
            style={{
              marginBottom: 12,
              maxHeight: 198,
              maxWidth: 198,
              borderRadius: 20,
            }}
            source={require("../../assets/menuItem.jpg")}
          />

          <Heading5 style={{ marginBottom: 12 }}>Mixed Salad Bonb</Heading5>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
            }}
          >
            <BodyMedium12 style={{ marginRight: 6 }}>15 km</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>4.8</BodyMedium12>
            <BodyMedium12>(1.2k)</BodyMedium12>
          </View>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
              alignItems: "center",
            }}
          >
            <Heading5Primary style={{ marginRight: 6 }}>$6.00</Heading5Primary>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="moped-outline"
              color={colors.brand.primary}
            />
            <BodyMedium12>$2.00</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="heart-outline"
              color={colors.brand.primary}
            />
          </View>
        </View>

        <View style={{ marginRight: 12 }}>
          <Image
            style={{
              marginBottom: 12,
              maxHeight: 198,
              maxWidth: 198,
              borderRadius: 20,
            }}
            source={require("../../assets/menuItem2.jpg")}
          />

          <Heading5 style={{ marginBottom: 12 }}>Salad Chow Chow</Heading5>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
            }}
          >
            <BodyMedium12 style={{ marginRight: 6 }}>10 km</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>4.4</BodyMedium12>
            <BodyMedium12>(1.8k)</BodyMedium12>
          </View>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
              alignItems: "center",
            }}
          >
            <Heading5Primary style={{ marginRight: 6 }}>$4.00</Heading5Primary>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="moped-outline"
              color={colors.brand.primary}
            />
            <BodyMedium12>$2.00</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="heart-outline"
              color={colors.brand.primary}
            />
          </View>
        </View>

        <View style={{ marginRight: 12 }}>
          <Image
            style={{
              marginBottom: 12,
              maxHeight: 198,
              maxWidth: 198,
              borderRadius: 20,
            }}
            source={require("../../assets/menuItem.jpg")}
          />

          <Heading5 style={{ marginBottom: 12 }}>Mixed Salad Bonb</Heading5>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
            }}
          >
            <BodyMedium12 style={{ marginRight: 6 }}>15 km</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <BodyMedium12 style={{ marginRight: 6 }}>4.8</BodyMedium12>
            <BodyMedium12>(1.2k)</BodyMedium12>
          </View>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "flex-start",
              alignItems: "center",
            }}
          >
            <Heading5Primary style={{ marginRight: 6 }}>$6.00</Heading5Primary>
            <BodyMedium12 style={{ marginRight: 6 }}>|</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="moped-outline"
              color={colors.brand.primary}
            />
            <BodyMedium12>$2.00</BodyMedium12>
            <Avatar.Icon
              backgroundColor="white"
              size={48}
              icon="heart-outline"
              color={colors.brand.primary}
            />
          </View>
        </View>
      </ScrollView>
    </View>