1import * as ImagePicker from 'expo-image-picker';
2import React from 'react';
3import { ScrollView, StyleSheet } from 'react-native';
4
5import FunctionDemo, {
6  FunctionDescription,
7  FunctionParameter,
8} from '../../components/FunctionDemo';
9import ImageOrVideoPreview from './ImageOrVideoPreview';
10
11const LAUNCH_PICKER_PARAMETERS: FunctionParameter[] = [
12  {
13    type: 'object',
14    name: 'options',
15    properties: [
16      {
17        name: 'mediaTypes',
18        type: 'enum',
19        values: [
20          { name: 'MediaTypeOptions.Images', value: ImagePicker.MediaTypeOptions.Images },
21          { name: 'MediaTypeOptions.Videos', value: ImagePicker.MediaTypeOptions.Videos },
22          { name: 'MediaTypeOptions.All', value: ImagePicker.MediaTypeOptions.All },
23        ],
24      },
25      { name: 'allowsEditing', type: 'boolean', initial: false },
26      {
27        name: 'aspect',
28        type: 'enum',
29        values: [
30          { name: '[4, 3]', value: [4, 3] },
31          { name: '[1, 1]', value: [1, 1] },
32          { name: '[1, 2]', value: [1, 2] },
33        ],
34        platforms: ['android'],
35      },
36      { name: 'quality', type: 'number', values: [0, 0.2, 0.7, 1.0] },
37      { name: 'exif', type: 'boolean', initial: false },
38      { name: 'base64', type: 'boolean', initial: false },
39      {
40        name: 'videoExportPreset',
41        type: 'enum',
42        platforms: ['ios'],
43        values: [
44          {
45            name: 'VideoExportPreset.Passthrough',
46            value: ImagePicker.VideoExportPreset.Passthrough,
47          },
48          {
49            name: 'VideoExportPreset.LowQuality',
50            value: ImagePicker.VideoExportPreset.LowQuality,
51          },
52          {
53            name: 'VideoExportPreset.MediumQuality',
54            value: ImagePicker.VideoExportPreset.MediumQuality,
55          },
56          {
57            name: 'VideoExportPreset.HighestQuality',
58            value: ImagePicker.VideoExportPreset.HighestQuality,
59          },
60          {
61            name: 'VideoExportPreset.H264_640x480',
62            value: ImagePicker.VideoExportPreset.H264_640x480,
63          },
64          {
65            name: 'VideoExportPreset.H264_960x540',
66            value: ImagePicker.VideoExportPreset.H264_960x540,
67          },
68          {
69            name: 'VideoExportPreset.H264_1280x720',
70            value: ImagePicker.VideoExportPreset.H264_1280x720,
71          },
72          {
73            name: 'VideoExportPreset.H264_1920x1080',
74            value: ImagePicker.VideoExportPreset.H264_1920x1080,
75          },
76          {
77            name: 'VideoExportPreset.H264_3840x2160',
78            value: ImagePicker.VideoExportPreset.H264_3840x2160,
79          },
80          {
81            name: 'VideoExportPreset.HEVC_1920x1080',
82            value: ImagePicker.VideoExportPreset.HEVC_1920x1080,
83          },
84          {
85            name: 'VideoExportPreset.HEVC_3840x2160',
86            value: ImagePicker.VideoExportPreset.HEVC_3840x2160,
87          },
88        ],
89      },
90      {
91        name: 'videoQuality',
92        type: 'enum',
93        platforms: ['ios'],
94        values: [
95          {
96            name: 'UIImagePickerControllerQualityType.High',
97            value: ImagePicker.UIImagePickerControllerQualityType.High,
98          },
99          {
100            name: 'UIImagePickerControllerQualityType.Medium',
101            value: ImagePicker.UIImagePickerControllerQualityType.Medium,
102          },
103          {
104            name: 'UIImagePickerControllerQualityType.Low',
105            value: ImagePicker.UIImagePickerControllerQualityType.Low,
106          },
107          {
108            name: 'UIImagePickerControllerQualityType.VGA640x480',
109            value: ImagePicker.UIImagePickerControllerQualityType.VGA640x480,
110          },
111          {
112            name: 'UIImagePickerControllerQualityType.IFrame960x540',
113            value: ImagePicker.UIImagePickerControllerQualityType.IFrame960x540,
114          },
115          {
116            name: 'UIImagePickerControllerQualityType.IFrame1280x720',
117            value: ImagePicker.UIImagePickerControllerQualityType.IFrame1280x720,
118          },
119        ],
120      },
121      { name: 'allowsMultipleSelection', type: 'boolean', initial: false, platforms: ['web'] },
122      { name: 'videoMaxDuration', type: 'number', values: [0, 10, 60] },
123      {
124        name: 'presentationStyle',
125        type: 'enum',
126        platforms: ['ios'],
127        values: [
128          {
129            name: 'UIImagePickerPresentationStyle.FULL_SCREEN',
130            value: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN,
131          },
132          {
133            name: 'UIImagePickerPresentationStyle.PAGE_SHEET',
134            value: ImagePicker.UIImagePickerPresentationStyle.PAGE_SHEET,
135          },
136          {
137            name: 'UIImagePickerPresentationStyle.FORM_SHEET',
138            value: ImagePicker.UIImagePickerPresentationStyle.FORM_SHEET,
139          },
140          {
141            name: 'UIImagePickerPresentationStyle.CURRENT_CONTEXT',
142            value: ImagePicker.UIImagePickerPresentationStyle.CURRENT_CONTEXT,
143          },
144          {
145            name: 'UIImagePickerPresentationStyle.OVER_FULL_SCREEN',
146            value: ImagePicker.UIImagePickerPresentationStyle.OVER_FULL_SCREEN,
147          },
148          {
149            name: 'UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT',
150            value: ImagePicker.UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT,
151          },
152          {
153            name: 'UIImagePickerPresentationStyle.POPOVER',
154            value: ImagePicker.UIImagePickerPresentationStyle.POPOVER,
155          },
156          {
157            name: 'UIImagePickerPresentationStyle.AUTOMATIC',
158            value: ImagePicker.UIImagePickerPresentationStyle.AUTOMATIC,
159          },
160        ],
161      },
162    ],
163  },
164];
165
166const FUNCTIONS_DESCRIPTIONS: FunctionDescription[] = [
167  {
168    name: 'requestMediaLibraryPermissionsAsync',
169    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
170    actions: (writeOnly: boolean) => ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly),
171  },
172  {
173    name: 'getMediaLibraryPermissionsAsync',
174    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
175    actions: (writeOnly: boolean) => ImagePicker.getMediaLibraryPermissionsAsync(writeOnly),
176  },
177  {
178    name: 'requestCameraPermissionsAsync',
179    actions: () => ImagePicker.requestCameraPermissionsAsync(),
180  },
181  {
182    name: 'getCameraPermissionsAsync',
183    actions: () => ImagePicker.getCameraPermissionsAsync(),
184  },
185  {
186    name: 'launchImageLibraryAsync',
187    parameters: LAUNCH_PICKER_PARAMETERS,
188    actions: (options: ImagePicker.ImagePickerOptions) =>
189      ImagePicker.launchImageLibraryAsync(options),
190  },
191  {
192    name: 'launchCameraAsync',
193    parameters: LAUNCH_PICKER_PARAMETERS,
194    actions: (options: ImagePicker.ImagePickerOptions) => ImagePicker.launchCameraAsync(options),
195  },
196];
197
198function ImagePickerScreen() {
199  return (
200    <ScrollView contentContainerStyle={styles.container}>
201      {FUNCTIONS_DESCRIPTIONS.map((props, idx) => (
202        <FunctionDemo
203          key={idx}
204          namespace="ImagePicker"
205          {...props}
206          renderAdditionalResult={ImageOrVideoPreview}
207        />
208      ))}
209    </ScrollView>
210  );
211}
212
213ImagePickerScreen.navigationOptions = {
214  title: 'ImagePicker',
215};
216
217const styles = StyleSheet.create({
218  container: {
219    paddingHorizontal: 10,
220    justifyContent: 'center',
221  },
222});
223
224export default ImagePickerScreen;
225