Solved antipattern issue

Reverted part of #483 due to arising bugs when locals change. Migrated from controlled-uncontrolled antipattern

Author: alvaromb

lib/templates/bootstrap/select.ios.js

@@ -16,25 +16,12 @@ class CollapsiblePickerIOS extends React.Component {
       isCollapsed,
       height: new Animated.Value(isCollapsed ? 0 : UIPICKER_HEIGHT)
     };
-    this.animatePicker = this.animatePicker.bind(this);
-    this.togglePicker = this.togglePicker.bind(this);
+    this.animatePicker = this._animatePicker.bind(this);
+    this.togglePicker = this._togglePicker.bind(this);
+    this.onValueChange = this._onValueChange.bind(this);
   }
 
-  componentWillReceiveProps(props) {
-    const isCollapsed =
-      typeof props.locals.isCollapsed === typeof true
-        ? props.locals.isCollapsed
-        : this.props.locals.isCollapsed;
-    if (isCollapsed !== this.state.isCollapsed) {
-      this.animatePicker(isCollapsed);
-      this.setState({ isCollapsed });
-      if (typeof props.locals.onCollapseChange === "function") {
-        props.locals.onCollapseChange(isCollapsed);
-      }
-    }
-  }
-
-  animatePicker(isCollapsed) {
+  _animatePicker(isCollapsed) {
     const locals = this.props.locals;
     let animation = Animated.timing;
     let animationConfig = {
@@ -48,7 +35,6 @@ class CollapsiblePickerIOS extends React.Component {
         animationConfig = locals.config.animationConfig;
       }
     }
-
     animation(
       this.state.height,
       Object.assign(
@@ -60,7 +46,7 @@ class CollapsiblePickerIOS extends React.Component {
     ).start();
   }
 
-  togglePicker() {
+  _togglePicker() {
     this.setState({ isCollapsed: !this.state.isCollapsed }, () => {
       this.animatePicker(this.state.isCollapsed);
       if (typeof this.props.locals.onCollapseChange === "function") {
@@ -69,6 +55,14 @@ class CollapsiblePickerIOS extends React.Component {
     });
   }
 
+  _onValueChange(val) {
+    const { onChange, value } = this.props.locals;
+    if (val !== value) {
+      this.togglePicker();
+      onChange(val);
+    }
+  }
+
   render() {
     const locals = this.props.locals;
     const { stylesheet } = locals;
@@ -97,6 +91,7 @@ class CollapsiblePickerIOS extends React.Component {
     );
 
     const height = this.state.isCollapsed ? 0 : UIPICKER_HEIGHT;
+
     return (
       <View
         style={[
@@ -122,7 +117,7 @@ class CollapsiblePickerIOS extends React.Component {
             ref="input"
             style={selectStyle}
             selectedValue={locals.value}
-            onValueChange={locals.onChange}
+            onValueChange={this.onValueChange}
             help={locals.help}
             enabled={!locals.disabled}
             mode={locals.mode}