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.FullScreen',
130            value: ImagePicker.UIImagePickerPresentationStyle.FullScreen,
131          },
132          {
133            name: 'UIImagePickerPresentationStyle.PageSheet',
134            value: ImagePicker.UIImagePickerPresentationStyle.PageSheet,
135          },
136          {
137            name: 'UIImagePickerPresentationStyle.FormSheet',
138            value: ImagePicker.UIImagePickerPresentationStyle.FormSheet,
139          },
140          {
141            name: 'UIImagePickerPresentationStyle.CurrentContext',
142            value: ImagePicker.UIImagePickerPresentationStyle.CurrentContext,
143          },
144          {
145            name: 'UIImagePickerPresentationStyle.OverFullScreen',
146            value: ImagePicker.UIImagePickerPresentationStyle.OverFullScreen,
147          },
148          {
149            name: 'UIImagePickerPresentationStyle.OverCurrentContext',
150            value: ImagePicker.UIImagePickerPresentationStyle.OverCurrentContext,
151          },
152          {
153            name: 'UIImagePickerPresentationStyle.Popover',
154            value: ImagePicker.UIImagePickerPresentationStyle.Popover,
155          },
156          {
157            name: 'UIImagePickerPresentationStyle.BlurOverFullScreen',
158            value: ImagePicker.UIImagePickerPresentationStyle.BlurOverFullScreen,
159          },
160          {
161            name: 'UIImagePickerPresentationStyle.Automatic',
162            value: ImagePicker.UIImagePickerPresentationStyle.Automatic,
163          },
164        ],
165      },
166    ],
167  },
168];
169
170const FUNCTIONS_DESCRIPTIONS: FunctionDescription[] = [
171  {
172    name: 'requestMediaLibraryPermissionsAsync',
173    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
174    actions: (writeOnly: boolean) => ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly),
175  },
176  {
177    name: 'getMediaLibraryPermissionsAsync',
178    parameters: [{ name: 'writeOnly', type: 'boolean', initial: false }],
179    actions: (writeOnly: boolean) => ImagePicker.getMediaLibraryPermissionsAsync(writeOnly),
180  },
181  {
182    name: 'requestCameraPermissionsAsync',
183    actions: () => ImagePicker.requestCameraPermissionsAsync(),
184  },
185  {
186    name: 'getCameraPermissionsAsync',
187    actions: () => ImagePicker.getCameraPermissionsAsync(),
188  },
189  {
190    name: 'launchImageLibraryAsync',
191    parameters: LAUNCH_PICKER_PARAMETERS,
192    actions: (options: ImagePicker.ImagePickerOptions) =>
193      ImagePicker.launchImageLibraryAsync(options),
194  },
195  {
196    name: 'launchCameraAsync',
197    parameters: LAUNCH_PICKER_PARAMETERS,
198    actions: (options: ImagePicker.ImagePickerOptions) => ImagePicker.launchCameraAsync(options),
199  },
200];
201
202function ImagePickerScreen() {
203  return (
204    <ScrollView contentContainerStyle={styles.container}>
205      {FUNCTIONS_DESCRIPTIONS.map((props, idx) => (
206        <FunctionDemo
207          key={idx}
208          namespace="ImagePicker"
209          {...props}
210          renderAdditionalResult={ImageOrVideoPreview}
211        />
212      ))}
213    </ScrollView>
214  );
215}
216
217ImagePickerScreen.navigationOptions = {
218  title: 'ImagePicker',
219};
220
221const styles = StyleSheet.create({
222  container: {
223    paddingHorizontal: 10,
224    justifyContent: 'center',
225  },
226});
227
228export default ImagePickerScreen;
229