ImagePicker did not allow to see all photos in IOS

[booncoder123]

https://imgur.com/a/XJVc5qG [This does not work]
https://imgur.com/a/CuwsQrU [This work]
As the title suggests, it did not allow the user to access to whole photos. I think it is because of some problem with permission, but on another phone it does work.

import { AntDesign } from "@expo/vector-icons";
import HeaderButton from "../../../components/UI/HeaderButton";
import React, { useMemo, useState, useEffect } from "react";
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
  Pressable,
} from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import { MediaType } from "expo-media-library";
import { Colors, Fonts } from "../../../constants/defaultStyle";
import { Ionicons, Feather } from "@expo/vector-icons";
import ImageBrowser from "../../../components/ImagePicker/ImageBrowser";
import Back from "../../../assets/Icon/ProfileIcon/Back";
import BackButton from "../../../components/Button/BackButton";
import Back2 from "../../../assets/Icon/Back2";
// import HeaderButton from "../components/UI/HeaderButton";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

//NOTE Redux
//NOTE Redux
import { useSelector, useDispatch } from "react-redux";
import {
  ButtonShownActions,
  ImagePickerActions,
  ExtraNavigationActions,
} from "../../../store/index";

export default function ImagePickerScreen(props) {
  const dispatch = useDispatch();
  const show = useSelector((state) => state.ButtonShown);
  const images = useSelector((state) => state.ImagePicker.value);
  return (
    <View style={styles.container}>
      {/* HEADER */}
      <View
        style={{
          backgroundColor: Colors.primaryColor,
        }}
      >
        <View
          style={{
            marginTop: (Fonts.normalText.fontSize * 52) / 20,
            flexDirection: "row",
            marginBottom: (Fonts.normalText.fontSize * 10) / 20,

            alignItems: "center",
          }}
        >
          <Pressable
            style={{
              shadowColor: "#000",
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.25,
              shadowRadius: 3.84,

              elevation: 10,
              width: (36 * Fonts.normalText.fontSize) / 20,
              height: (36 * Fonts.normalText.fontSize) / 20,
              borderRadius: (36 * Fonts.normalText.fontSize) / 2,

              backgroundColor: Colors.boxColor,
              justifyContent: "center",
              alignItems: "center",
              marginLeft: Fonts.normalText.fontSize / 2,
            }}
            onPress={() => {
              props.navigation.goBack();
            }}
          >
            <Back2 style={{ alignSelf: "center" }}></Back2>
          </Pressable>

          <Text
            style={{
              ...Fonts.HelvethaicaBold,
              fontSize: (40 * Fonts.normalText.fontSize) / 20,
              color: Colors.boxColor,
              marginLeft: (Fonts.normalText.fontSize * 101) / 20,
            }}
          >
            เพิ่มรูปภาพ
          </Text>

          {show.value > 0 && (
            <Pressable
              onPress={() => {
                props.navigation.goBack();
              }}
              style={{
                width: (Fonts.normalText.fontSize * 67) / 20,
                height: (Fonts.normalText.fontSize * 36) / 20,
                backgroundColor: Colors.boxColor,
                flexDirection: "row",
                borderRadius: 25,
                justifyContent: "center",
                alignSelf: "center",
                position: "absolute",
                alignSelf: "center",
                right: Fonts.normalText.fontSize / 2,
                shadowColor: "#000",
                shadowOffset: {
                  width: 0,
                  height: 2,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,

                elevation: 5,

                // height: (Fonts.normalText.fontSize * 36) / 20,
              }}
            >
              <Text
                style={{
                  ...Fonts.Helvethaica,
                  fontSize: (30 * Fonts.normalText.fontSize) / 20,
                  alignSelf: "center",
                }}
              >
                บันทึก
              </Text>
            </Pressable>
          )}
        </View>
      </View>

      <ImageBrowser
        selectedImages={images}
        max={10}
        onChange={(num, onSubmit) => {
          console.log(num);
          dispatch(ButtonShownActions.set(num));
          onSubmit(num);
        }}
        callback={async (callback) => {
          const items = await callback;

          dispatch(ImagePickerActions.set(items));
        }}
      />

      <View
        style={{
          width: "100%",
          height: windowHeight * (73 / 961),
          backgroundColor: "white",
          position: "absolute",
          bottom: 0,
          borderRadius: 10,
          justifyContent: "center",
        }}
      >
        <Text
          style={{
            textAlign: "center",

            ...Fonts.HelvethaicaBold,
            fontSize: 26,
            color: Colors.primaryColor,
          }}
        >
          เลือกไปเเล้ว ({images.length})
        </Text>
      </View>
    </View>
  );
}

export const screenOptions = (navData) => {
  // const show2 = useSelector((state) => state.ImagePicker.value);
  console.log("eiei", navData);
  return {
    headerShown: false,
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});