From 2554f263874de792496fd566516bc36c3cc8c0c8 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Tue, 6 Sep 2016 14:31:15 -0700
Subject: [PATCH] Fix CameraRollExample crash

Reviewed By: fkgozali

Differential Revision: D3817912

fbshipit-source-id: f3c83675d06149a1e027b9ccd33d3c6cde234be3
---
 Examples/UIExplorer/js/CameraRollExample.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/Examples/UIExplorer/js/CameraRollExample.js b/Examples/UIExplorer/js/CameraRollExample.js
index be1f9254f..07d6498dc 100644
--- a/Examples/UIExplorer/js/CameraRollExample.js
+++ b/Examples/UIExplorer/js/CameraRollExample.js
@@ -35,25 +35,26 @@ const {
   TouchableOpacity
 } = ReactNative;
 
+const invariant = require('invariant');
+
 const CameraRollView = require('./CameraRollView');
 
 const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
-const CAMERA_ROLL_VIEW = 'camera_roll_view';
-
 class CameraRollExample extends React.Component {
   state = {
     groupTypes: 'SavedPhotos',
     sliderValue: 1,
     bigImages: true,
   };
-
+  _cameraRollView: ?CameraRollView;
   render() {
     return (
       <View>
         <Switch
           onValueChange={this._onSwitchChange}
-          value={this.state.bigImages} />
+          value={this.state.bigImages}
+        />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
         <Slider
           value={this.state.sliderValue}
@@ -61,7 +62,7 @@ class CameraRollExample extends React.Component {
         />
         <Text>{'Group Type: ' + this.state.groupTypes}</Text>
         <CameraRollView
-          ref={CAMERA_ROLL_VIEW}
+          ref={(ref) => { this._cameraRollView = ref; }}
           batchSize={20}
           groupTypes={this.state.groupTypes}
           renderImage={this._renderImage}
@@ -84,8 +85,8 @@ class CameraRollExample extends React.Component {
   _renderImage = (asset) => {
     const imageSize = this.state.bigImages ? 150 : 75;
     const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const location = asset.node.location.longitude ?
-      JSON.stringify(asset.node.location) : 'Unknown location';
+    const {location} = asset.node;
+    const locationStr = location ? JSON.stringify(location) : 'Unknown location';
     return (
       <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
         <View style={styles.row}>
@@ -95,7 +96,7 @@ class CameraRollExample extends React.Component {
           />
           <View style={styles.info}>
             <Text style={styles.url}>{asset.node.image.uri}</Text>
-            <Text>{location}</Text>
+            <Text>{locationStr}</Text>
             <Text>{asset.node.group_name}</Text>
             <Text>{new Date(asset.node.timestamp).toString()}</Text>
           </View>
@@ -114,7 +115,8 @@ class CameraRollExample extends React.Component {
   };
 
   _onSwitchChange = (value) => {
-    this.refs[CAMERA_ROLL_VIEW].rendererChanged();
+    invariant(this._cameraRollView, 'ref should be set');
+    this._cameraRollView.rendererChanged();
     this.setState({ bigImages: value });
   };
 }