@@ -1,12 +1,11 @@
 ---
 id: apis/CameraRoll
 title: CameraRoll
-wip: false
 ---
 
 ## Methods
 
-- `saveToCameraRoll` allows saving photos and videos to the Camera Roll. File to be saved is specified as a tag which can be
+- `saveToCameraRoll` allows saving photos and videos to the Camera Roll or Photo Gallery. File to be saved is specified as a tag 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)
@@ -40,7 +39,9 @@ The function will return a `photoIdentifiersPage` object wrapped in a Promise, t
 
 ## Types
 
-- `getPhotosParams` can be constructed with its eponymous constructor
+- `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.
 
 ```reason
 getPhotosParams:
@@ -130,7 +131,99 @@ type action =
   | SetPath(string)
   | SetPhotos(array(CameraRoll.photoIdentifier));
 
-let textStyle = Style.style(~textAlign=`center, ());
+let styles = Style.(
+  StyleSheet.create({
+    "container":
+      style(
+        ~flex=1.,
+        ~flexDirection=`column,
+        ~alignItems=`center,
+        ~justifyContent=`spaceBetween,
+        (),
+      ),
+    "getPhotosExample":
+      style(
+        ~height=pt(0.25 *. windowHeight),
+        ~justifyContent=`spaceBetween,
+        (),
+      ),
+    "saveToCameraRollExample":
+      style(
+        ~width=pt(0.8 *. windowWidth),
+        ~height=pt(0.6 *. windowHeight),
+        ~margin=pt(0.1 *. windowWidth),
+        ~justifyContent=`spaceAround,
+        (),
+      ),
+    "image":
+      style(
+        ~width=pt(0.8 *. windowWidth),
+        ~height=pt(0.56 *. windowWidth),
+        (),
+      ),
+    "imageContainer":
+      style(
+        ~width=pt(0.8 *. windowWidth),
+        ~height=pt(0.56 *. windowWidth),
+        ~borderWidth=1.,
+        ~justifyContent=`center,
+        (),
+      ),
+    "text": style(~textAlign=`center, ()),
+    "textInput":
+      style(
+        ~textAlign=`center,
+        ~borderRadius=8.,
+        ~padding=pt(4.),
+        ~borderWidth=1.,
+        ~backgroundColor=Color.linen,
+        (),
+      ),
+    "thumbnail":
+      style(
+        ~width=pt(0.21 *. windowHeight),
+        ~height=pt(0.15 *. windowHeight),
+        (),
+      ),
+    "thumbnails":
+      style(
+        ~height=pt(0.15 *. windowHeight),
+        (),
+      ),
+  })
+);
+
+let styledText = s => {
+  <Text style=styles##text> s->React.string </Text>;
+};
+
+let thumbnails = photos => {
+  <View style=styles##thumbnails>
+    <ScrollView horizontal=true>
+      {photos
+       ->Belt.Array.mapWithIndex((i, s) =>
+           <Image
+             style=styles##thumbnail
+             source={Image.Source.fromUriSource(
+               Image.uriSource(~uri=s##node##image##uri, ()),
+             )}
+             key={string_of_int(i)}
+           />
+         )
+       ->React.array}
+    </ScrollView>
+  </View>;
+};
+
+let inputBox = (tag, dispatch) => {
+  <TextInput
+    style=styles##textInput
+    multiline=true
+    defaultValue="https://images.unsplash.com/photo-1520453803296-c39eabe2dab4"
+    value=tag
+    onChangeText={s => dispatch(SetTag(s))}
+  />;
+};
 
 [@react.component]
 let make = () => {
@@ -174,113 +267,43 @@ let make = () => {
     );
   };
 
-  <View
-    style={Style.style(
-      ~flex=1.,
-      ~flexDirection=`column,
-      ~alignItems=`center,
-      ~justifyContent=`spaceBetween,
-      (),
-    )}>
-    <View
-      style={Style.style(
-        ~width=Style.pt(0.8 *. windowWidth),
-        ~height=Style.pt(0.6 *. windowHeight),
-        ~margin=Style.pt(0.1 *. windowWidth),
-        // ~marginBottom=Style.pt(0.1 *. windowWidth),
-        ~justifyContent=`spaceAround,
-        (),
-      )}>
-      <View
-        style={Style.style(
-          ~width=Style.pt(0.8 *. windowWidth),
-          ~height=Style.pt(0.56 *. windowWidth),
-          ~borderWidth=1.,
-          ~justifyContent=`center,
-          (),
-        )}>
+  <View style=styles##container>
+    <View style=styles##saveToCameraRollExample>
+      <View style=styles##imageContainer>
         {switch (state.path) {
          | None =>
+           // default view, before a photo is saved to the Camera Roll or Photo Library
            <View>
-             <Text style=textStyle>
-               "Press the Save Photo button"->React.string
-             </Text>
-             <Text style=textStyle> "below to load photo"->React.string </Text>
+             {styledText("Press the Save Photo button")}
+             {styledText("below to load photo")}
            </View>
-
          | Some(p) =>
+           // Once a photo is saved to the Camera Roll or Photo Library, it will be displayed in this view
            <Image
-             style={Style.style(
-               ~width=Style.pt(0.8 *. windowWidth),
-               ~height=Style.pt(0.56 *. windowWidth),
-               (),
-             )}
+             style=styles##image
              source={Image.Source.fromUriSource(Image.uriSource(~uri=p, ()))}
            />
          }}
       </View>
       <View>
-        <Text style=textStyle>
-          "Enter a path for a photo to save,"->React.string
-        </Text>
-        <Text style=textStyle>
-          "or try the example given below"->React.string
-        </Text>
-        <TextInput
-          style={Style.array([|
-            textStyle,
-            Style.style(
-              ~borderRadius=8.,
-              ~padding=Style.pt(4.),
-              ~borderWidth=1.,
-              ~backgroundColor=Color.linen,
-              (),
-            ),
-          |])}
-          multiline=true
-          defaultValue="https://images.unsplash.com/photo-1520453803296-c39eabe2dab4"
-          value={state.tag}
-          onChangeText={s => dispatch(SetTag(s))}
-        />
+        {styledText("Enter a path for a photo to save,")}
+        {styledText("or try the example given below")}
+        // TextInput box to try other photo sources
+        {inputBox(state.tag, dispatch)}
+        // 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
         <Button
           onPress={_ => savePhoto(state.tag)}
           title={js|Save a Photo|js}
         />
       </View>
     </View>
-    <View
-      style={Style.style(
-        ~height=Style.pt(0.25 *. windowHeight),
-        ~justifyContent=`spaceBetween,
-        (),
-      )}>
+    <View style=styles##getPhotosExample>
       <View>
-        <Text style=textStyle>
-          "Saved photo will be in the Camera Roll"->React.string
-        </Text>
+        {styledText("Saved photo will appear in the Camera Roll")}
+        // An attempt will be made to get the most recent 20 photos from the Camera Roll or Photo Library
         <Button onPress={_ => getPhotos()} title={js|Open CameraRoll|js} />
       </View>
-      <View style={Style.style(~height=Style.pt(0.15 *. windowHeight), ())}>
-        <ScrollView horizontal=true>
-          {React.array(
-             Array.mapi(
-               (i, s) =>
-                 <Image
-                   style={Style.style(
-                     ~width=Style.pt(0.21 *. windowHeight),
-                     ~height=Style.pt(0.15 *. windowHeight),
-                     (),
-                   )}
-                   source={Image.Source.fromUriSource(
-                     Image.uriSource(~uri=s##node##image##uri, ()),
-                   )}
-                   key={string_of_int(i)}
-                 />,
-               state.photos,
-             ),
-           )}
-        </ScrollView>
-      </View>
+      {thumbnails(state.photos)}
     </View>
   </View>;
 };