Skip to content

Commit 0d301cb

Browse files
luoxuhaivonovak
andauthored
feat: support transitionStyle on iOS (#549)
* feat: add transitionStyle option on ios * Update src/index.tsx Co-authored-by: Vojtech Novak <vonovak@gmail.com>
1 parent db3a4f2 commit 0d301cb

File tree

3 files changed

+26
-1
lines changed

3 files changed

+26
-1
lines changed

README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ Requires RN >= 0.63, Android 5.0+ and iOS 11+
3333
- [allowMultiSelection:boolean](#allowmultiselectionboolean)
3434
- [type:string|Array&lt;string&gt;](#typestringarraystring)
3535
- [[iOS only] presentationStyle:'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'](#ios-only-presentationstylefullscreen--pagesheet--formsheet--overfullscreen)
36+
- [[iOS only] transitionStyle:'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'](#ios-only-transitionstylecoververtical--fliphorizontal--crossdissolve--partialcurl)
3637
- [[iOS only] mode:"import" | "open"](#ios-only-modeimport--open)
3738
- [[iOS and Android only] copyTo:"cachesDirectory" | "documentDirectory"](#ios-and-android-only-copytocachesdirectory--documentdirectory)
3839
- [[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
106107

107108
Controls how the picker is presented, eg. on an iPad you may want to present it fullscreen. Defaults to `pageSheet`.
108109

110+
##### [iOS only] `transitionStyle`:`'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'`
111+
112+
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.
113+
109114
##### [iOS only] `mode`:`"import" | "open"`
110115

111116
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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,19 @@ @implementation RCTConvert (ModalPresentationStyle)
3737
integerValue)
3838
@end
3939

40+
@implementation RCTConvert (ModalTransitionStyle)
41+
42+
RCT_ENUM_CONVERTER(
43+
UIModalTransitionStyle,
44+
(@{
45+
@"coverVertical" : @(UIModalTransitionStyleCoverVertical),
46+
@"flipHorizontal" : @(UIModalTransitionStyleFlipHorizontal),
47+
@"crossDissolve" : @(UIModalTransitionStyleCrossDissolve),
48+
@"partialCurl" : @(UIModalTransitionStylePartialCurl),
49+
}),
50+
UIModalTransitionStyleCoverVertical,
51+
integerValue)
52+
@end
4053

4154
@interface RNDocumentPicker () <UIDocumentPickerDelegate, UIAdaptivePresentationControllerDelegate>
4255
@end
@@ -85,12 +98,14 @@ - (dispatch_queue_t)methodQueue
8598
mode = options[@"mode"] && [options[@"mode"] isEqualToString:@"open"] ? UIDocumentPickerModeOpen : UIDocumentPickerModeImport;
8699
copyDestination = options[@"copyTo"];
87100
UIModalPresentationStyle presentationStyle = [RCTConvert UIModalPresentationStyle:options[@"presentationStyle"]];
101+
UIModalTransitionStyle transitionStyle = [RCTConvert UIModalTransitionStyle:options[@"transitionStyle"]];
88102
[promiseWrapper setPromiseWithInProgressCheck:resolve rejecter:reject fromCallSite:@"pick"];
89103

90104
NSArray *allowedUTIs = [RCTConvert NSArray:options[OPTION_TYPE]];
91105
UIDocumentPickerViewController *documentPicker = [[UIDocumentPickerViewController alloc] initWithDocumentTypes:allowedUTIs inMode:mode];
92106

93107
documentPicker.modalPresentationStyle = presentationStyle;
108+
documentPicker.modalTransitionStyle = transitionStyle;
94109

95110
documentPicker.delegate = self;
96111
documentPicker.presentationController.delegate = self;

src/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ type DocumentPickerType = {
2626

2727
const RNDocumentPicker: DocumentPickerType = NativeModules.RNDocumentPicker
2828

29+
export type TransitionStyle = 'coverVertical' | 'flipHorizontal' | 'crossDissolve' | 'partialCurl'
30+
2931
export type DocumentPickerOptions<OS extends SupportedPlatforms> = {
3032
type?:
3133
| string
@@ -34,10 +36,11 @@ export type DocumentPickerOptions<OS extends SupportedPlatforms> = {
3436
mode?: 'import' | 'open'
3537
copyTo?: 'cachesDirectory' | 'documentDirectory'
3638
allowMultiSelection?: boolean
39+
transitionStyle?: TransitionStyle
3740
} & Pick<ModalPropsIOS, 'presentationStyle'>
3841

3942
export async function pickDirectory<OS extends SupportedPlatforms>(
40-
params?: Pick<DocumentPickerOptions<OS>, 'presentationStyle'>,
43+
params?: Pick<DocumentPickerOptions<OS>, 'presentationStyle' | 'transitionStyle'>,
4144
): Promise<DirectoryPickerResponse | null> {
4245
if (Platform.OS === 'ios') {
4346
const result = await pick({
@@ -83,6 +86,7 @@ export function pick<OS extends SupportedPlatforms>(
8386

8487
const newOpts: DoPickParams<OS> = {
8588
presentationStyle: 'formSheet',
89+
transitionStyle: 'coverVertical',
8690
...options,
8791
type: Array.isArray(options.type) ? options.type : [options.type],
8892
}
@@ -94,6 +98,7 @@ type DoPickParams<OS extends SupportedPlatforms> = DocumentPickerOptions<OS> & {
9498
type: Array<PlatformTypes[OS][keyof PlatformTypes[OS]] | string>
9599
allowMultiSelection: boolean
96100
presentationStyle: NonNullable<ModalPropsIOS['presentationStyle']>
101+
transitionStyle: TransitionStyle
97102
}
98103

99104
function doPick<OS extends SupportedPlatforms>(

0 commit comments

Comments
 (0)