> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/react-native/file-downloads.md).

# File Downloads

This implementation allows users to download `.ics` files (calendar events) from the LiSA Player running in a WebView, and save them to the device for easy "Add to Calendar" functionality.

### **Extended `WebView` with `.ics` File Download Handling**

#### **Basic WebView Setup**

Below is the basic implementation of a `WebView` in React Native, extended to handle `.ics` file downloads:

```jsx
import * as IntentLauncher from 'expo-intent-launcher'; // Optional: If you're using Expo

import React from 'react';
import { Platform, PermissionsAndroid, Alert, Linking } from 'react-native';
import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';

const WebViewScreen = () => {
  const requestAndroidPermissions = async () => {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: 'Storage Permission Required',
          message:
            'This app needs access to your storage to download calendar files.',
        }
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    }
    return true;
  };

  const handleFileDownload = async (url, mimeType) => {
    if (Platform.OS === 'android') {
      const hasPermission = await requestAndroidPermissions();
      if (!hasPermission) {
        Alert.alert('Permission Denied', 'Cannot download the file without permission.');
        return;
      }

      const fileName = url.split('/').pop(); // Extract the filename
      const downloadPath = `${RNFS.DownloadDirectoryPath}/${fileName}`;

      // Download the file using RNFS
      RNFS.downloadFile({
        fromUrl: url,
        toFile: downloadPath,
      })
        .promise.then(() => {
          Alert.alert('Download Complete', `File saved to ${downloadPath}`);
        })
        .catch((err) => {
          Alert.alert('Download Failed', `Error: ${err.message}`);
        });
    } else if (Platform.OS === 'ios') {
      // Open the `.ics` file directly on iOS
      Linking.openURL(url).catch(() => {
        Alert.alert('Error', 'Unable to open the calendar file.');
      });
    }
  };

  return (
    <WebView
      source={{ uri: 'https://{clientId}.loveslisa.tech/s/{showId}' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowsInlineMediaPlayback={true}
      onShouldStartLoadWithRequest={(request) => {
        const { url } = request;

        // Handle `.ics` file download
        if (url.endsWith('.ics')) {
          handleFileDownload(url, 'text/calendar');
          return false; // Prevent the WebView from handling the download itself
        }

        return true; // Allow other navigation
      }}
    />
  );
};

export default WebViewScreen;
```

***

### **Key Implementation Details**

#### **iOS**

**Opening `.ics` Files**

iOS handles `.ics` files natively. The implementation uses `Linking.openURL` to open the `.ics` file directly in the default calendar app.

#### **Android**

**Download Handling**

* Android requires runtime permissions to write files to storage. The implementation uses `PermissionsAndroid` to request storage access.
* Files are saved to the `Downloads` directory using the `react-native-fs` library.

**React Native FS (File System)**

Install the library to handle file downloads:

```bash
npm install react-native-fs
```

Link the native modules if you're not using React Native 0.60+:

```bash
react-native link react-native-fs
```

***

### **Permissions Setup**

#### **Android**

Add the following permissions to your `AndroidManifest.xml`:

```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```

#### **iOS**

No special permissions are required for `.ics` downloads on iOS, but ensure the server URL is HTTPS to comply with App Transport Security.

***

### **Features and Limitations**

#### **Features**

1. **File Detection:** The `onShouldStartLoadWithRequest` method detects `.ics` files by checking the URL and MIME type.
2. **Platform-Specific Behavior:**
   * iOS: Opens `.ics` files directly in the default calendar app.
   * Android: Downloads `.ics` files to the `Downloads` directory for manual import into calendar apps.
3. **Permissions Handling:** Asks for storage permission on Android during runtime.

#### **Limitations:**

* **iOS Safari View Fallback:** If you prefer opening files directly in a Safari View or an external browser, you can use `react-native-inappbrowser-reborn` instead of WebView.
* **Custom Calendar Handling:** If you need to handle `.ics` files programmatically (e.g., parsing the file), additional libraries or custom solutions are required.

***

####