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:

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:

npm install react-native-fs

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

react-native link react-native-fs

---

Permissions Setup

Android

Add the following permissions to your AndroidManifest.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.

---