PDF is not displayed in my react native expo project

Question

In my react native expo project, I have PDF documents that I access with API via Bunny.net. The storage with these documents appears, but when I click on the PDF links, these PDFs are not displayed. I have installed and tried everything with the required packages but still the PDF display fails. And there is no error message when I click on the PDF links.

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, ActivityIndicator, Pressable, Linking } from 'react-native';
import axios from 'axios';

const Bunny = ({ route }) => {
  const { modelKey } = route.params;
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const urlMapping = {
    //Industrial Series
      //Air Cooled Chillers
    'ARA': 'https://cdn.eracochillers.com/enthalpy/Industrial/Air%20Cooled%20Chillers/ARA/ARA%20101/Technical%20Drawings/ARA-101.pdf',
    'DCA-W': 'https://cdn.eracochillers.com/enthalpy/Industrial/Air%20Cooled%20Chillers/ARA/ARA%20101/Technical%20Drawings/ARA-101.pdf',
    'ENE-S': 'https://cdn.eracochillers.com/enthalpy/Industrial/Air%20Cooled%20Chillers/ARA/ARA%20101/Technical%20Drawings/ARA-101.pdf',
    'ENE-W': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Air%20Cooled%20Chillers/ENE-W/',
    'LSR-S': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Air%20Cooled%20Chillers/LSR-S/',
    'VSA-T': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Air%20Cooled%20Chillers/VSA-T/',
    //Dry Coolers
    'ER.FCV': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Dry%20Coolers/ER.FCV/',
    //Water Cooled Chillers
    'ARW': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Water%20Cooled%20Chillers/ARW/',
    'DCA-W': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/Industrial/Water%20Cooled%20Chillers/DCA-W/',
    //HVAC 
      //Air Cooled Chillers
    'HEA': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/HEA/',
    'HEA-HPS': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/HEA-HPS/',
    'HYD-S': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/HYD-S/',
    'HYD-W': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/HYD-W/',
    'KMA-T': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/KMA-T/',
    'RCA-W': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Air%20Cooled%20Chillers/RCA-W/',
      //Condenserless Chillers
    'HEA-CC': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Condenserless%20Chillers/HEA-CC/',
    'NVA-CC': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Condenserless%20Chillers/NVA-CC/',
    'RCA-CC': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Condenserless%20Chillers/RCA-CC/',
      //Water Cooled Chillers
    'HEW-S': 'https://storage.bunnycdn.com/eraco-cdn/enthalpy/HVAC/Water%20Cooled%20Chillers/HEW-S/',
  };

  useEffect(() => {
    const fetchFiles = async () => {
      try {
        const url = urlMapping[modelKey];
        if (!url) {
          throw new Error('Cannot load an empty url');
        }
        const response = await axios.get(url, {
          headers: {
            AccessKey: 'bunnypass'
          }
        });
        setFiles(response.data || []); 
      } catch (err) {
        console.error("Error fetching files:", err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchFiles();
  }, [modelKey]);

  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  if (error) {
    return <Text style={styles.errorText}>Error: {error.message}</Text>;
  }

  const renderItem = ({ item }) => (
    <Pressable onPress={() => Linking.openURL(`https://storage.bunnycdn.com/eraco-cdn/enthalpy/${item.ObjectName}`)}>
      <Text style={styles.fileItem}>{item.ObjectName}</Text>
    </Pressable>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={files}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fileItem: {
    fontSize: 18,
    padding: 10,
    color: 'blue',
  },
  errorText: {
    fontSize: 18,
    color: 'red',
  },
});

export default Bunny;

and the buttons I access to PDF links are as follows in Model.js:

const navigateToBunny = (modelKey) => {
  navigation.navigate('Bunny', { modelKey });
};
  const [expandedButtons, setExpandedButtons] = useState(false);

  const toggleExpansion = (type) => {
    switch (type) {
      case 'description':
        setExpandedDescription(!expandedDescription);
        break;
      case 'keyImages':
        setExpandedKeyImages(!expandedKeyImages);
        break;
      case 'buttons':
        setExpandedButtons(!expandedButtons);
        break;
      default:
        break;
    }
  };
 <View style={styles.card}>
            <Pressable onPress={() => toggleExpansion('buttons')}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', marginTop: 5, marginBottom: 10 }}>
                <Text style={styles.descriptionCombo}>Documents</Text>
                <Ionicons name={expandedButtons ? 'chevron-up' : 'chevron-down'} size={21} color="#00347C" marginBottom={-10} marginRight={10} />
              </View>
            </Pressable>
            {expandedButtons && (
              <View>
                <Pressable onPress={() => navigateToBunny(selectedModel.name)}>
                  <View style={styles.buttonRow}>
                    <Text style={styles.buttonText}>{selectedModel.guide}</Text>
                    <Ionicons name="document" size={24} color={COLORS.primary} />
                  </View>
                </Pressable>
                <Image source={require('../assets/images/minus.png')} style={{ width: 350, height: 3, borderRadius: 10, marginLeft: 15, marginBottom: 10, marginTop: 10 }} />
                <Pressable onPress={() => navigateToBunny(selectedModel.name)}>
                  <View style={styles.buttonRow}>
                    <Text style={styles.buttonText}>{selectedModel.catalog}</Text>
                    <Ionicons name="document" size={24} color={COLORS.primary} />
                  </View>
                </Pressable>
                {selectedModel.otherDoc && (
                  <>
                    <Image source={require('../assets/images/minus.png')} style={{ width: 350, height: 3, borderRadius: 10, marginLeft: 15, marginBottom: 10, marginTop: 10 }} />
                    <Pressable onPress={() => navigateToBunny(selectedModel.name)}>
                      <View style={styles.buttonRow}>
                        <Text style={styles.buttonText}>{selectedModel.otherDoc}</Text>
                        <Ionicons name="document" size={24} color={COLORS.primary} />
                      </View>
                    </Pressable>
                  </>
                )}
              </View>
            )}
          </View>