feat: support transitionStyle on iOS (#549)

* feat: add transitionStyle option on ios

* Update src/index.tsx

Co-authored-by: Vojtech Novak <vonovak@gmail.com>

Author: luoxuhai

README.md

@@ -33,6 +33,7 @@ Requires RN >= 0.63, Android 5.0+ and iOS 11+
       - [allowMultiSelection:boolean](#allowmultiselectionboolean)
       - [type:string|Array<string>](#typestringarraystring)
       - [[iOS only] presentationStyle:'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'](#ios-only-presentationstylefullscreen--pagesheet--formsheet--overfullscreen)
+      - [[iOS only] transitionStyle:'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'](#ios-only-transitionstylecoververtical--fliphorizontal--crossdissolve--partialcurl)
       - [[iOS only] mode:"import" | "open"](#ios-only-modeimport--open)
       - [[iOS and Android only] copyTo:"cachesDirectory" | "documentDirectory"](#ios-and-android-only-copytocachesdirectory--documentdirectory)
       - [[Windows only] readContent:boolean](#windows-only-readcontentboolean)
@@ -106,6 +107,10 @@ The type or types of documents to allow selection of. May be an array of types a
 
 Controls how the picker is presented, eg. on an iPad you may want to present it fullscreen. Defaults to `pageSheet`.
 
+##### [iOS only] `transitionStyle`:`'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'`
+
+Configure the transition style of the picker. Defaults to `coverVertical`, when the picker is presented, its view slides up from the bottom of the screen.
+
 ##### [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.

ios/RNDocumentPicker.m

@@ -37,6 +37,19 @@ @implementation RCTConvert (ModalPresentationStyle)
     integerValue)
 @end
 
+@implementation RCTConvert (ModalTransitionStyle)
+
+RCT_ENUM_CONVERTER(
+    UIModalTransitionStyle,
+    (@{
+      @"coverVertical" : @(UIModalTransitionStyleCoverVertical),
+      @"flipHorizontal" : @(UIModalTransitionStyleFlipHorizontal),
+      @"crossDissolve" : @(UIModalTransitionStyleCrossDissolve),
+      @"partialCurl" : @(UIModalTransitionStylePartialCurl),
+    }),
+    UIModalTransitionStyleCoverVertical,
+    integerValue)
+@end
 
 @interface RNDocumentPicker () <UIDocumentPickerDelegate, UIAdaptivePresentationControllerDelegate>
 @end
@@ -85,12 +98,14 @@ - (dispatch_queue_t)methodQueue
     mode = options[@"mode"] && [options[@"mode"] isEqualToString:@"open"] ? UIDocumentPickerModeOpen : UIDocumentPickerModeImport;
     copyDestination = options[@"copyTo"];
     UIModalPresentationStyle presentationStyle = [RCTConvert UIModalPresentationStyle:options[@"presentationStyle"]];
+    UIModalTransitionStyle transitionStyle = [RCTConvert UIModalTransitionStyle:options[@"transitionStyle"]];
     [promiseWrapper setPromiseWithInProgressCheck:resolve rejecter:reject fromCallSite:@"pick"];
 
     NSArray *allowedUTIs = [RCTConvert NSArray:options[OPTION_TYPE]];
     UIDocumentPickerViewController *documentPicker = [[UIDocumentPickerViewController alloc] initWithDocumentTypes:allowedUTIs inMode:mode];
 
     documentPicker.modalPresentationStyle = presentationStyle;
+    documentPicker.modalTransitionStyle = transitionStyle;
 
     documentPicker.delegate = self;
     documentPicker.presentationController.delegate = self;

src/index.tsx

@@ -26,6 +26,8 @@ type DocumentPickerType = {
 
 const RNDocumentPicker: DocumentPickerType = NativeModules.RNDocumentPicker
 
+export type TransitionStyle = 'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'
+
 export type DocumentPickerOptions<OS extends SupportedPlatforms> = {
   type?:
     | string
@@ -34,10 +36,11 @@ export type DocumentPickerOptions<OS extends SupportedPlatforms> = {
   mode?: 'import' | 'open'
   copyTo?: 'cachesDirectory' | 'documentDirectory'
   allowMultiSelection?: boolean
+  transitionStyle?: TransitionStyle
 } & Pick<ModalPropsIOS, 'presentationStyle'>
 
 export async function pickDirectory<OS extends SupportedPlatforms>(
-  params?: Pick<DocumentPickerOptions<OS>, 'presentationStyle'>,
+  params?: Pick<DocumentPickerOptions<OS>, 'presentationStyle' | 'transitionStyle'>,
 ): Promise<DirectoryPickerResponse | null> {
   if (Platform.OS === 'ios') {
     const result = await pick({
@@ -83,6 +86,7 @@ export function pick<OS extends SupportedPlatforms>(
 
   const newOpts: DoPickParams<OS> = {
     presentationStyle: 'formSheet',
+    transitionStyle: 'coverVertical',
     ...options,
     type: Array.isArray(options.type) ? options.type : [options.type],
   }
@@ -94,6 +98,7 @@ type DoPickParams<OS extends SupportedPlatforms> = DocumentPickerOptions<OS> & {
   type: Array<PlatformTypes[OS][keyof PlatformTypes[OS]] | string>
   allowMultiSelection: boolean
   presentationStyle: NonNullable<ModalPropsIOS['presentationStyle']>
+  transitionStyle: TransitionStyle
 }
 
 function doPick<OS extends SupportedPlatforms>(