@reason-react-native/cameraroll

ReScript / Reason bindings for @react-native-community/cameraroll.

Exposed as ReactNativeCameraRoll module.

@reason-react-native/cameraroll X.y.* means it's compatible with @react-native-community/cameraroll X.y.*

Installation

When @react-native-community/cameraroll is properly installed & configured by following their installation instructions, you can install the bindings:

1npm install @reason-react-native/cameraroll
2# or
3yarn add @reason-react-native/cameraroll

@reason-react-native/cameraroll should be added to bs-dependencies in your bsconfig.json:

1{
2  //...
3  "bs-dependencies": [
4    "reason-react",
5    "reason-react-native",
6    // ...
7+    "@reason-react-native/cameraroll"
8  ],
9  //...
10}

Methods

save

Allows saving photos and videos to the Camera Roll or Photo Gallery, similar to saveToCameraRoll.

The function will return the URI for the saved file as a string wrapped in a Promise.

1save: string => Js.Promise.t(string)

saveWithOptions

Allows saving photos and videos to the Camera Roll or Photo Gallery, similar to saveToCameraRoll, however, a particular album may be specified in a saveOptions object.

The function will return the URI for the saved file as a string wrapped in a Promise.

1saveWithOptions: (string, saveOptions) => Js.Promise.t(string)

saveToCameraRoll

Allows saving photos and videos to the Camera Roll or Photo Gallery. File to be saved is specified as a tag (of type string) which can be

• on Android, a local image or video URI, such as "file:///sdcard/img.png"
• on iOS, a local video URI or any image URI (local, remote asset-library, or base64 data URIs)

Media type (photo or video) will be automatically inferred; any file will be inferred to be a photo, unless the file extension is mov or mp4, then it will be inferred to be a video.

The function will return the URI for the saved file as a string wrapped in a Promise.

1saveToCameraRoll: string => Js.Promise.t(string)

saveToCameraRollWithType

Allows saving photos and videos to the Camera Roll, where the tag will be specified as above, overriding the automatically determined type by specifying one of the polymorphic variants `photo or `video.

The function will return the URI for the saved file as a string wrapped in a Promise.

1saveToCameraRollWithType: (string, [ | `photo | `video]) => Js.Promise.t(string)

deletePhotos

To request deletion of photos (as array(string)) from the Camera Roll. Returns bool wrapped in a Promise. The Promise will be rejected if deletion does not succeed; on Android that would imply a system error whereas on iOS the user may have cancelled the request to delete.

On Android, the uri must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the uri can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI. The user will be presented with a dialog box that showing the asset(s) and asked for confirmation. This cannot be bypassed as per Apple Developer guidelines.

1deletePhotos: array(string) => Js.Promise.t(bool)

getAlbums

Returns a list of albums wrapped in a Promise.

1getAlbums: unit => Js.Promise.t(array(album))

getAlbumsWithParams

Returns a list of albums of type specified in a getAlbumsParams object, wrapped in a Promise.

1getAlbums: getAlbumsParams => Js.Promise.t(array(album))

getPhotos

Allows searching for photos or videos matching given parameters.

Takes as argument getPhotosParams and returns a photoIdentifiersPage object wrapped in a Promise. edges key of the photoIdentifiersPage object would be of type array(photoIdentifier), where each photoIdentifier object would contain details of each photo or video matching parameters provided in the getPhotosParam object.

1getPhotos: getPhotosParams => Js.Promise.t(photoIdentifiersPage)

Types

album

1type album = {
2  title: string,
3  count: int
4};

getAlbumsParams;

can be constructed with the constructor of the same name

1getAlbumsParams:
2  (
3    ~assetType: [@bs.string] [
4                   | `All
5                   | `Photos
6                   | `Videos
7                 ]
8  ) =>
9  getAlbumsParams

getPhotosParams

can be constructed with the constructor of the same name

• first takes an integer which specifies the number of files for which details will be returned. Files will match in reverse order (i.e. most recent first)
• after takes a string which should be obtained from photoIdentifiersPage returned in a previous getPhotos call, under the end_cursor key contained in turn under the page_info key.

1getPhotosParams:
2  (
3    ~first: int,
4    ~after: string=?,
5    ~groupTypes: [@bs.string] [
6                   | `Album
7                   | `All
8                   | `Event
9                   | `Faces
10                   | `Library
11                   | `PhotoStream
12                   | `SavedPhotos
13                 ]
14                   =?,
15    ~groupName: string=?,
16    ~assetType: [@bs.string] [ | `All | `Videos | `Photos]=?,
17    ~mimeTypes: array(string)=?,
18    ~fromTime: float=?,
19    ~toTime: float=?,
20    ~include_: array(string)=?,
21    unit
22  ) => getPhotosParams

image

1type image = {
2  filename: Js.Nullable.t(string),
3  uri: string,
4  height: Js.Nullable.t(float),
5  width: Js.Nullable.t(float),
6  fileSize: Js.Nullable.t(float),
7  playableDuration: Js.Nullable.t(float),
8}

location

1type location = {
2  latitude: Js.Nullable.t(float),
3  longitude: Js.Nullable.t(float),
4  altitude: Js.Nullable.t(float),
5  heading: Js.Nullable.t(float),
6  speed: Js.Nullable.t(float),
7};

node

1type node = {
2  [@bs.as "type"]
3  _type: string,
4  [@bs.as "group_name"]
5  groupName: string,
6  image,
7  timestamp: float,
8  location: Js.Nullable.t(location),
9}

pageInfo

1type pageInfo = {
2  [@bs.as "has_next_page"]
3  hasNextPage: bool,
4  [@bs.as "start_cursor"]
5  startCursor: Js.Nullable.t(string),
6  [@bs.as "end_curson"]
7  endCursor: Js.Nullable.t(string),
8};
9

photoIdentifiersPage

1type photoIdentifiersPage = {
2  edges: array(photoIdentifier),
3  [@bs.as "page_info"]
4  pageInfo,
5}

photoIdentifier

1  type photoIdentifier = {node}

saveOptions

can be constructed with the constructor of the same name

1saveOptions:
2  (
3    ~_type: [@bs.string] [
4                   | `auto
5                   | `photo
6                   | `video
7                 ],
8    ~album: string
9  ) =>
10  saveOptions

Example

1open ReactNative;
2open ReactNativeCameraRoll;
3
4let windowWidth = Dimensions.get(`window)##width;
5let windowHeight = Dimensions.get(`window)##height;
6
7type state = {
8  tag: string,
9  path: option(string),
10  photos: array(photoIdentifier),
11};
12
13type action =
14  | SetTag(string)
15  | SetPath(string)
16  | SetPhotos(array(photoIdentifier));
17
18let styles = Style.(
19  StyleSheet.create({
20    "container":
21      style(
22        ~flex=1.,
23        ~flexDirection=`column,
24        ~alignItems=`center,
25        ~justifyContent=`spaceBetween,
26        (),
27      ),
28    "getPhotosExample":
29      style(
30        ~height=(0.25 *. windowHeight)->dp,
31        ~justifyContent=`spaceBetween,
32        (),
33      ),
34    "saveToCameraRollExample":
35      style(
36        ~width=(0.8 *. windowWidth)->dp,
37        ~height=(0.6 *. windowHeight)->dp,
38        ~margin=(0.1 *. windowWidth)->dp,
39        ~justifyContent=`spaceAround,
40        (),
41      ),
42    "image":
43      style(
44        ~width=(0.8 *. windowWidth)->dp,
45        ~height=(0.56 *. windowWidth)->dp,
46        (),
47      ),
48    "imageContainer":
49      style(
50        ~width=(0.8 *. windowWidth)->dp,
51        ~height=(0.56 *. windowWidth)->dp,
52        ~borderWidth=1.,
53        ~justifyContent=`center,
54        (),
55      ),
56    "text": style(~textAlign=`center, ()),
57    "textInput":
58      style(
59        ~textAlign=`center,
60        ~borderRadius=8.,
61        ~padding=4.->dp,
62        ~borderWidth=1.,
63        ~backgroundColor=Color.linen,
64        (),
65      ),
66    "thumbnail":
67      style(
68        ~width=(0.21 *. windowHeight)->dp,
69        ~height=(0.15 *. windowHeight)->dp,
70        (),
71      ),
72    "thumbnails":
73      style(
74        ~height=(0.15 *. windowHeight)->dp,
75        (),
76      ),
77  })
78);
79
80let styledText = s => {
81  <Text style=styles##text> s->React.string </Text>;
82};
83
84let thumbnails = photos => {
85  <View style=styles##thumbnails>
86    <ScrollView horizontal=true>
87      {photos
88       ->Belt.Array.mapWithIndex((i, s) =>
89           <Image
90             style=styles##thumbnail
91             source={Image.Source.fromUriSource(
92               Image.uriSource(~uri=s.node.image.uri, ()),
93             )}
94             key={string_of_int(i)}
95           />
96         )
97       ->React.array}
98    </ScrollView>
99  </View>;
100};
101
102let inputBox = (tag, dispatch) => {
103  <TextInput
104    style=styles##textInput
105    multiline=true
106    defaultValue="https://images.unsplash.com/photo-1520453803296-c39eabe2dab4"
107    value=tag
108    onChangeText={s => dispatch(SetTag(s))}
109  />;
110};
111
112[@react.component]
113let make = () => {
114  let (state, dispatch) =
115    React.useReducer(
116      (state, action) =>
117        switch (action) {
118        | SetTag(uri) => {...state, tag: uri}
119        | SetPath(uri) => {...state, path: Some(uri)}
120        | SetPhotos(a) => {...state, photos: a}
121        },
122      {
123        tag: "https://images.unsplash.com/photo-1520453803296-c39eabe2dab4",
124        path: None,
125        photos: [||],
126      },
127    );
128
129  let getPhotos = () => {
130    Js.Promise.(
131      getPhotos(
132        getPhotosParams(
133          ~first=20,
134          ~assetType=`Photos,
135          ~groupTypes=`All,
136          (),
137        ),
138      )
139      |> then_(r => resolve(dispatch(SetPhotos(r.edges))))
140      |> catch(err => resolve(Js.Console.warn(err)))
141      |> ignore
142    );
143  };
144
145  let savePhoto = uri => {
146    Js.Promise.(
147      saveToCameraRoll(uri)
148      |> then_(r => resolve(dispatch(SetPath(r))))
149      |> catch(err => resolve(Js.Console.warn(err)))
150      |> ignore
151    );
152  };
153
154  <View style=styles##container>
155    <View style=styles##saveToCameraRollExample>
156      <View style=styles##imageContainer>
157        {switch (state.path) {
158         | None =>
159           // default view, before a photo is saved to the Camera Roll or Photo Library
160           <View>
161             {styledText("Press the Save Photo button")}
162             {styledText("below to load photo")}
163           </View>
164         | Some(p) =>
165           // Once a photo is saved to the Camera Roll or Photo Library, it will be displayed in this view
166           <Image
167             style=styles##image
168             source={Image.Source.fromUriSource(Image.uriSource(~uri=p, ()))}
169           />
170         }}
171      </View>
172      <View>
173        {styledText("Enter a path for a photo to save,")}
174        {styledText("or try the example given below")}
175        // TextInput box to try other photo sources
176        {inputBox(state.tag, dispatch)}
177        // An attempt will be made to save the photo file specified in the TextInput box to the Camera Roll or Photo Library once the button below is pressed
178        <Button
179          onPress={_ => savePhoto(state.tag)}
180          title={js|Save a Photo|js}
181        />
182      </View>
183    </View>
184    <View style=styles##getPhotosExample>
185      <View>
186        {styledText("Saved photo will appear in the Camera Roll")}
187        // An attempt will be made to get the most recent 20 photos from the Camera Roll or Photo Library
188        <Button onPress={_ => getPhotos()} title={js|Open CameraRoll|js} />
189      </View>
190      {thumbnails(state.photos)}
191    </View>
192  </View>;
193};
194

---

Changelog

Check the changelog for more informations about recent releases.

---

Contribute

Read the contribution guidelines before contributing.

Code of Conduct

We want this community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.