From c1849e7f4b0a36692ff45cf8cbcfd7b37aba74c4 Mon Sep 17 00:00:00 2001
From: Matt Revell <mattrevell82@me.com>
Date: Fri, 4 Dec 2015 06:56:41 -0800
Subject: [PATCH] Fix an issue with unsafe picker access to setNativeProps.

Summary:
Fixing an issue where PickerIOS and DatePicker are being accessed unsafely, As a side effect we are also using ref callbacks as oppose to strings.

Fixed after spotting an issue in our app where the picker is closed and the callback attempts to update native props for an item that no longer exists.
Closes https://github.com/facebook/react-native/pull/3920

Reviewed By: svcscm

Differential Revision: D2663634

Pulled By: nicklockwood

fb-gh-sync-id: 813b32a038f59864401d5d3985c7ea32f5e13301
---
 Libraries/Components/DatePicker/DatePickerIOS.ios.js | 8 +++-----
 Libraries/Picker/PickerIOS.ios.js                    | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
index ede2500ee..e42b6ac59 100644
--- a/Libraries/Components/DatePicker/DatePickerIOS.ios.js
+++ b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -22,8 +22,6 @@ var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var DATEPICKER = 'datepicker';
-
 type DefaultProps = {
   mode: 'date' | 'time' | 'datetime';
 };
@@ -108,8 +106,8 @@ var DatePickerIOS = React.createClass({
     // certain values. In other words, the embedder of this component should
     // be the source of truth, not the native component.
     var propsTimeStamp = this.props.date.getTime();
-    if (nativeTimeStamp !== propsTimeStamp) {
-      this.refs[DATEPICKER].setNativeProps({
+    if (this._picker && nativeTimeStamp !== propsTimeStamp) {
+      this._picker.setNativeProps({
         date: propsTimeStamp,
       });
     }
@@ -120,7 +118,7 @@ var DatePickerIOS = React.createClass({
     return (
       <View style={props.style}>
         <RCTDatePickerIOS
-          ref={DATEPICKER}
+          ref={ picker => this._picker = picker }
           style={styles.datePickerIOS}
           date={props.date.getTime()}
           maximumDate={
diff --git a/Libraries/Picker/PickerIOS.ios.js b/Libraries/Picker/PickerIOS.ios.js
index 5c245397d..ffda1f57d 100644
--- a/Libraries/Picker/PickerIOS.ios.js
+++ b/Libraries/Picker/PickerIOS.ios.js
@@ -21,8 +21,6 @@ var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PICKER = 'picker';
-
 var PickerIOS = React.createClass({
   mixins: [NativeMethodsMixin],
 
@@ -57,7 +55,7 @@ var PickerIOS = React.createClass({
     return (
       <View style={this.props.style}>
         <RCTPickerIOS
-          ref={PICKER}
+          ref={ picker => this._picker = picker }
           style={styles.pickerIOS}
           items={this.state.items}
           selectedIndex={this.state.selectedIndex}
@@ -81,8 +79,8 @@ var PickerIOS = React.createClass({
     // disallow/undo/mutate the selection of certain values. In other
     // words, the embedder of this component should be the source of
     // truth, not the native component.
-    if (this.state.selectedIndex !== event.nativeEvent.newIndex) {
-      this.refs[PICKER].setNativeProps({
+    if (this._picker && this.state.selectedIndex !== event.nativeEvent.newIndex) {
+      this._picker.setNativeProps({
         selectedIndex: this.state.selectedIndex
       });
     }