Additional Flow changes to files that use this component

Summary:
This diff includes:
1. Touchups to the `CameraRollView` typings.
2. Typings for `CameraRollViewExmaple`.
3. Flow fixes for internal callsites.

Reviewed By: yungsters

Differential Revision: D10362686

fbshipit-source-id: 48bf3fba0566e9c5c062aee3342d669f6c143d9f

Author: RSNara

Libraries/CameraRoll/CameraRoll.js

@@ -32,10 +32,12 @@ const ASSET_TYPE_OPTIONS = {
   Photos: 'Photos',
 };
 
-type GetPhotosParams = {
+export type GroupTypes = $Keys<typeof GROUP_TYPES_OPTIONS>;
+
+export type GetPhotosParams = {
   first: number,
   after?: string,
-  groupTypes?: $Keys<typeof GROUP_TYPES_OPTIONS>,
+  groupTypes?: GroupTypes,
   groupName?: string,
   assetType?: $Keys<typeof ASSET_TYPE_OPTIONS>,
   mimeTypes?: Array<string>,
@@ -84,6 +86,7 @@ export type PhotoIdentifier = {
     type: string,
     group_name: string,
     image: {
+      filename: string,
       uri: string,
       height: number,
       width: number,
@@ -153,8 +156,8 @@ const getPhotosReturnChecker = deprecatedCreateStrictShapeTypeChecker({
  * See https://facebook.github.io/react-native/docs/cameraroll.html
  */
 class CameraRoll {
-  static GroupTypesOptions: Object = GROUP_TYPES_OPTIONS;
-  static AssetTypeOptions: Object = ASSET_TYPE_OPTIONS;
+  static GroupTypesOptions = GROUP_TYPES_OPTIONS;
+  static AssetTypeOptions = ASSET_TYPE_OPTIONS;
 
   /**
    * `CameraRoll.saveImageWithTag()` is deprecated. Use `CameraRoll.saveToCameraRoll()` instead.

RNTester/js/AssetScaledImageExample.js

@@ -14,10 +14,17 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {Image, StyleSheet, View, ScrollView} = ReactNative;
 
-class AssetScaledImageExample extends React.Component<
-  $FlowFixMeProps,
-  $FlowFixMeState,
-> {
+import type {PhotoIdentifier} from 'CameraRoll';
+
+type Props = $ReadOnly<{|
+  asset: PhotoIdentifier,
+|}>;
+
+type State = {|
+  asset: PhotoIdentifier,
+|};
+
+class AssetScaledImageExample extends React.Component<Props, State> {
   state = {
     asset: this.props.asset,
   };

RNTester/js/CameraRollExample.js

@@ -28,18 +28,32 @@ const CameraRollView = require('./CameraRollView');
 
 const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
-import type {PhotoIdentifier} from 'CameraRoll';
+import type {PhotoIdentifier, GroupTypes} from 'CameraRoll';
 
-class CameraRollExample extends React.Component<
-  $FlowFixMeProps,
-  $FlowFixMeState,
-> {
+type Props = $ReadOnly<{|
+  navigator?: ?Array<
+    $ReadOnly<{|
+      title: string,
+      component: Class<React.Component<any, any>>,
+      backButtonTitle: string,
+      passProps: $ReadOnly<{|asset: PhotoIdentifier|}>,
+    |}>,
+  >,
+|}>;
+
+type State = {|
+  groupTypes: GroupTypes,
+  sliderValue: number,
+  bigImages: boolean,
+|};
+
+class CameraRollExample extends React.Component<Props, State> {
   state = {
     groupTypes: 'SavedPhotos',
     sliderValue: 1,
     bigImages: true,
   };
-  _cameraRollView: ?CameraRollView;
+  _cameraRollView: ?React.ElementRef<typeof CameraRollView>;
   render() {
     return (
       <View>
@@ -139,7 +153,7 @@ exports.description =
 exports.examples = [
   {
     title: 'Photos',
-    render(): React.Element<any> {
+    render(): React.Node {
       return <CameraRollExample />;
     },
   },

RNTester/js/CameraRollView.js

@@ -28,9 +28,13 @@ const ListViewDataSource = require('ListViewDataSource');
 const groupByEveryN = require('groupByEveryN');
 const logError = require('logError');
 
-import type {PhotoIdentifier, PhotoIdentifiersPage} from 'CameraRoll';
+import type {
+  PhotoIdentifier,
+  PhotoIdentifiersPage,
+  GetPhotosParams,
+} from 'CameraRoll';
 
-const rowHasChanged = function(r1: Array<Image>, r2: Array<Image>): boolean {
+function rowHasChanged<T>(r1: Array<T>, r2: Array<T>): boolean {
   if (r1.length !== r2.length) {
     return true;
   }
@@ -42,9 +46,9 @@ const rowHasChanged = function(r1: Array<Image>, r2: Array<Image>): boolean {
   }
 
   return false;
-};
+}
 
-type PropsObject = {|
+type Props = $ReadOnly<{|
   /**
    * The group where the photos will be fetched from. Possible
    * values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream'
@@ -79,9 +83,7 @@ type PropsObject = {|
    * The asset type, one of 'Photos', 'Videos' or 'All'
    */
   assetType: 'Photos' | 'Videos' | 'All',
-|};
-
-type Props = $ReadOnly<PropsObject>;
+|}>;
 
 type State = {|
   assets: Array<PhotoIdentifier>,
@@ -131,7 +133,7 @@ class CameraRollView extends React.Component<Props, State> {
     this.fetch();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: $Shape<PropsObject>) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.groupTypes !== nextProps.groupTypes) {
       this.fetch(true);
     }
@@ -157,7 +159,7 @@ class CameraRollView extends React.Component<Props, State> {
       }
     }
 
-    const fetchParams: Object = {
+    const fetchParams: GetPhotosParams = {
       first: this.props.batchSize,
       groupTypes: this.props.groupTypes,
       assetType: this.props.assetType,