feat: support presentationStyle on ios (#477)

README.md

@@ -44,8 +44,8 @@ Open a system directory picker. Returns a promise that resolves to (`{ uri: stri
 
 `pickSingle` and `pickMultiple` are "sugar functions" on top of `pick`, and they _might be removed_ in a future release for increased API clarity.
 
-- `pickSingle` will only allow a single selection and the Promise will resolve to that single result (same behavior as `pick` in v5)
-- `pickMultiple` will allow multiple selection and the Promise will resolve to an array of results.
+- `pickSingle` only allows a single selection and the Promise will resolve to that single result (same behavior as `pick` in v5)
+- `pickMultiple` allows multiple selection and the Promise will resolve to an array of results.
 
 ### Options
 
@@ -63,6 +63,10 @@ The type or types of documents to allow selection of. May be an array of types a
 - On iOS these must be Apple "[Uniform Type Identifiers](https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html)"
 - If `type` is omitted it will be treated as `*/*` or `public.item`.
 
+##### [iOS only] `presentationStyle`:`'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+
+Controls how the picker is presented, eg. on an iPad you may want to present it fullscreen. Defaults to `pageSheet`.
+
 ##### [iOS only] `mode`:`"import" | "open"`:
 
 Defaults to `import`. If `mode` is set to `import` the document picker imports the file from outside to inside the sandbox, otherwise if `mode` is set to `open` the document picker opens the file right in place.

example/ios/DocumentPickerExample.xcodeproj/project.pbxproj

@@ -555,6 +555,7 @@
 				PRODUCT_NAME = DocumentPickerExample;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -577,6 +578,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.example.reactnativedocumentpicker;
 				PRODUCT_NAME = DocumentPickerExample;
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

example/src/App.tsx

@@ -29,7 +29,9 @@ export default function App() {
       <Button
         title="open picker for single file selection"
         onPress={() => {
-          DocumentPicker.pickSingle()
+          DocumentPicker.pickSingle({
+            presentationStyle: 'fullScreen',
+          })
             .then((pickerResult) => setResult([pickerResult]))
             .catch(handleError)
         }}

ios/RNDocumentPicker.m

@@ -20,6 +20,23 @@
 static NSString *const FIELD_TYPE = @"type";
 static NSString *const FIELD_SIZE = @"size";
 
+@implementation RCTConvert (ModalPresentationStyle)
+
+
+// how to de-duplicate from https://github.com/facebook/react-native/blob/v0.66.0/React/Views/RCTModalHostViewManager.m?
+RCT_ENUM_CONVERTER(
+    UIModalPresentationStyle,
+    (@{
+      @"fullScreen" : @(UIModalPresentationFullScreen),
+      @"pageSheet" : @(UIModalPresentationPageSheet),
+      @"formSheet" : @(UIModalPresentationFormSheet),
+      @"overFullScreen" : @(UIModalPresentationOverFullScreen),
+    }),
+    UIModalPresentationFullScreen,
+    integerValue)
+@end
+
+
 @interface RNDocumentPicker () <UIDocumentPickerDelegate, UIAdaptivePresentationControllerDelegate>
 @end
 
@@ -66,11 +83,12 @@ - (dispatch_queue_t)methodQueue
 {
     mode = options[@"mode"] && [options[@"mode"] isEqualToString:@"open"] ? UIDocumentPickerModeOpen : UIDocumentPickerModeImport;
     copyDestination = options[@"copyTo"] ? options[@"copyTo"] : nil;
+    UIModalPresentationStyle presentationStyle = [RCTConvert UIModalPresentationStyle:options[@"presentationStyle"]];
     [promiseWrapper setPromiseWithInProgressCheck:resolve rejecter:reject fromCallSite:@"pick"];
 
     NSArray *allowedUTIs = [RCTConvert NSArray:options[OPTION_TYPE]];
     UIDocumentPickerViewController *documentPicker = [[UIDocumentPickerViewController alloc] initWithDocumentTypes:(NSArray *)allowedUTIs inMode:mode];
-    documentPicker.modalPresentationStyle = UIModalPresentationFormSheet;
+    documentPicker.modalPresentationStyle = presentationStyle;
 
     documentPicker.delegate = self;
     documentPicker.presentationController.delegate = self;

src/index.tsx

@@ -1,4 +1,4 @@
-import { Platform, NativeModules } from 'react-native'
+import { Platform, NativeModules, ModalPropsIOS } from 'react-native'
 import invariant from 'invariant'
 import type { PlatformTypes, SupportedPlatforms } from './fileTypes'
 import { perPlatformTypes } from './fileTypes'
@@ -34,7 +34,7 @@ export type DocumentPickerOptions<OS extends SupportedPlatforms> = {
   mode?: 'import' | 'open'
   copyTo?: 'cachesDirectory' | 'documentDirectory'
   allowMultiSelection?: boolean
-}
+} & Pick<ModalPropsIOS, 'presentationStyle'>
 
 export function pickDirectory(): Promise<DirectoryPickerResponse | null> {
   if (Platform.OS === 'android' || Platform.OS === 'windows') {
@@ -75,6 +75,7 @@ export function pick<OS extends SupportedPlatforms>(
   }
 
   const newOpts: DoPickParams<OS> = {
+    presentationStyle: 'formSheet',
     ...options,
     type: Array.isArray(options.type) ? options.type : [options.type],
   }
@@ -85,6 +86,7 @@ export function pick<OS extends SupportedPlatforms>(
 type DoPickParams<OS extends SupportedPlatforms> = DocumentPickerOptions<OS> & {
   type: Array<PlatformTypes[OS][keyof PlatformTypes[OS]] | string>
   allowMultiSelection: boolean
+  presentationStyle: NonNullable<ModalPropsIOS['presentationStyle']>
 }
 
 function doPick<OS extends SupportedPlatforms>(