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      {
122        name: 'allowsMultipleSelection',
123        type: 'boolean',
124        initial: false,
125        platforms: ['web', 'ios'],
126      },
127      {
128        name: 'selectionLimit',
129        type: 'number',
130        values: [0, 1, 3],
131        platforms: ['ios'],
132      },
133      {
134        name: 'orderedSelection',
135        type: 'boolean',
136        initial: false,
137        platforms: ['ios'],
138      },
139      { name: 'videoMaxDuration', type: 'number', values: [0, 10, 60] },
140      {
141        name: 'presentationStyle',
142        type: 'enum',
143        platforms: ['ios'],
144        values: [
145          {
146            name: 'UIImagePickerPresentationStyle.FULL_SCREEN',
147            value: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN,
148          },
149          {
150            name: 'UIImagePickerPresentationStyle.PAGE_SHEET',
151            value: ImagePicker.UIImagePickerPresentationStyle.PAGE_SHEET,
152          },
153          {
154            name: 'UIImagePickerPresentationStyle.FORM_SHEET',
155            value: ImagePicker.UIImagePickerPresentationStyle.FORM_SHEET,
156          },
157          {
158            name: 'UIImagePickerPresentationStyle.CURRENT_CONTEXT',
159            value: ImagePicker.UIImagePickerPresentationStyle.CURRENT_CONTEXT,
160          },
161          {
162            name: 'UIImagePickerPresentationStyle.OVER_FULL_SCREEN',
163            value: ImagePicker.UIImagePickerPresentationStyle.OVER_FULL_SCREEN,
164          },
165          {
166            name: 'UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT',
167            value: ImagePicker.UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT,
168          },
169          {
170            name: 'UIImagePickerPresentationStyle.POPOVER',
171            value: ImagePicker.UIImagePickerPresentationStyle.POPOVER,
172          },
173          {
174            name: 'UIImagePickerPresentationStyle.AUTOMATIC',
175            value: ImagePicker.UIImagePickerPresentationStyle.AUTOMATIC,
176          },
177        ],
178      },
179    ],
180  },
181];
182
183const FUNCTIONS_DESCRIPTIONS: FunctionDescription[] = [
184  {
185    name: 'requestMediaLibraryPermissionsAsync',
186    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
187    actions: (writeOnly: boolean) => ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly),
188  },
189  {
190    name: 'getMediaLibraryPermissionsAsync',
191    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
192    actions: (writeOnly: boolean) => ImagePicker.getMediaLibraryPermissionsAsync(writeOnly),
193  },
194  {
195    name: 'requestCameraPermissionsAsync',
196    actions: () => ImagePicker.requestCameraPermissionsAsync(),
197  },
198  {
199    name: 'getCameraPermissionsAsync',
200    actions: () => ImagePicker.getCameraPermissionsAsync(),
201  },
202  {
203    name: 'launchImageLibraryAsync',
204    parameters: LAUNCH_PICKER_PARAMETERS,
205    actions: (options: ImagePicker.ImagePickerOptions) =>
206      ImagePicker.launchImageLibraryAsync(options),
207  },
208  {
209    name: 'launchCameraAsync',
210    parameters: LAUNCH_PICKER_PARAMETERS,
211    actions: (options: ImagePicker.ImagePickerOptions) => ImagePicker.launchCameraAsync(options),
212  },
213];
214
215function ImagePickerScreen() {
216  return (
217    <ScrollView contentContainerStyle={styles.container}>
218      {FUNCTIONS_DESCRIPTIONS.map((props, idx) => (
219        <FunctionDemo
220          key={idx}
221          namespace="ImagePicker"
222          {...props}
223          renderAdditionalResult={ImageOrVideoPreview}
224        />
225      ))}
226    </ScrollView>
227  );
228}
229
230ImagePickerScreen.navigationOptions = {
231  title: 'ImagePicker',
232};
233
234const styles = StyleSheet.create({
235  container: {
236    paddingHorizontal: 10,
237    justifyContent: 'center',
238  },
239});
240
241export default ImagePickerScreen;
242