From b4cf5f0b4eeca17d4ec16e4db1ee20b97000e653 Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Fri, 17 Jan 2020 14:31:35 -0500
Subject: [PATCH 1/2] working on iOS

---
 app/widgets/Select.js | 68 +++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/app/widgets/Select.js b/app/widgets/Select.js
index 65533381a..23c33a1df 100644
--- a/app/widgets/Select.js
+++ b/app/widgets/Select.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text, Container, ListItem, Left, Right, Icon } from 'native-base';
+import { Text, Container, ListItem, Left, Right, Icon } from 'native-base';
 import { Picker, Modal, StyleSheet, View } from 'react-native';
 import { colors } from '../theme';
 
 const styles = StyleSheet.create({
   paddingContent: {
-    padding: 20,
-    flexGrow: 1,
-  },
-  datePickerContainer: {
-    flexGrow: 1,
-    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: '40%',
+    borderTopWidth: 2,
+    borderTopColor: colors.grey,
+    justifyContent: 'flex-start',
   },
   label: {
     fontSize: 13,
@@ -24,6 +25,13 @@ export class Select extends React.Component {
     modalVisible: false,
   };
 
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({ modalVisible: false });
+    }
+  }
+
   setModalVisible(visible) {
     this.setState({ modalVisible: visible });
   }
@@ -56,38 +64,28 @@ export class Select extends React.Component {
         </ListItem>
         <Modal
           animationType="slide"
-          transparent={false}
+          transparent
           visible={this.state.modalVisible}
         >
           <Container style={styles.paddingContent}>
-            <Container style={styles.datePickerContainer}>
-              <Picker
-                selectedValue={value}
-                onValueChange={onChange}
-              >
-                {
-                  config.itemList.map((item, index) => (
-                    <Picker.Item
-                      label={item.name.en}
-                      value={item.value}
-                      key={index}
-                    />
-                  ))
-                }
-              </Picker>
-            </Container>
-            <Button
-              full
-              style={styles.okButton}
-              onPress={() => {
-                if (!value) {
-                  onChange(config.itemList[0].value);
-                }
-                this.setModalVisible(false);
-              }}
+            <Picker
+              selectedValue={value}
+              onValueChange={onChange}
             >
-              <Text>OK</Text>
-            </Button>
+              <Picker.Item
+                label="Select one"
+                value={config.itemList[0].value}
+              />
+              {
+                config.itemList.map((item, index) => (
+                  <Picker.Item
+                    label={item.name.en}
+                    value={item.value}
+                    key={index}
+                  />
+                ))
+              }
+            </Picker>
           </Container>
         </Modal>
       </View>

From 26f2ad18d1914a6faf3ab6c0ca9d557de46a9a17 Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Fri, 17 Jan 2020 15:31:21 -0500
Subject: [PATCH 2/2] Cross platform solution for Select component without
 modal

---
 CHANGELOG.md             |  3 +++
 android/app/build.gradle |  4 ++--
 app/widgets/Select.js    | 38 ++++++++++++++++----------------------
 ios/MDCApp/Info.plist    |  4 ++--
 package.json             |  2 +-
 5 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ca28c2cc..f0cc005ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 =======
 
+## [0.9.16] - 2020-01-17
+- :recycle: Cross platform refactor for Select Component without Modal
+
 ## [0.9.13] - 2019-01-08
 - :bug: Fix DatePickerIOS doesn't show on Dark Mode for iOS 13.3
 
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 537ef1e1d..d7e324030 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -101,8 +101,8 @@ android {
         applicationId "lab.childmindinstitute.data"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 106
-        versionName "0.9.13"
+        versionCode 109
+        versionName "0.9.16"
         ndk {
             abiFilters "arm64-v8a", "x86_64", "armeabi-v7a", "x86"
         }
diff --git a/app/widgets/Select.js b/app/widgets/Select.js
index 23c33a1df..d33cf3c6c 100644
--- a/app/widgets/Select.js
+++ b/app/widgets/Select.js
@@ -6,10 +6,7 @@ import { colors } from '../theme';
 
 const styles = StyleSheet.create({
   paddingContent: {
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    height: '40%',
+    flex: 1,
     borderTopWidth: 2,
     borderTopColor: colors.grey,
     justifyContent: 'flex-start',
@@ -50,23 +47,7 @@ export class Select extends React.Component {
     const selectedItem = config.itemList.find(item => item.value === value);
     return (
       <View style={{ marginBottom: 20 }}>
-        <ListItem
-          onPress={() => {
-            this.setModalVisible(true);
-          }}
-        >
-          <Left>
-            <Text>{selectedItem ? selectedItem.name.en : 'Select one'}</Text>
-          </Left>
-          <Right>
-            <Icon name="arrow-forward" />
-          </Right>
-        </ListItem>
-        <Modal
-          animationType="slide"
-          transparent
-          visible={this.state.modalVisible}
-        >
+        {this.state.modalVisible ? (
           <Container style={styles.paddingContent}>
             <Picker
               selectedValue={value}
@@ -87,7 +68,20 @@ export class Select extends React.Component {
               }
             </Picker>
           </Container>
-        </Modal>
+        ) : (
+          <ListItem
+            onPress={() => {
+              this.setModalVisible(true);
+            }}
+          >
+            <Left>
+              <Text>{selectedItem ? selectedItem.name.en : 'Select one'}</Text>
+            </Left>
+            <Right>
+              <Icon name="arrow-forward" />
+            </Right>
+          </ListItem>
+        )}
       </View>
     );
   }
diff --git a/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist
index de730018f..1b3c4cecf 100644
--- a/ios/MDCApp/Info.plist
+++ b/ios/MDCApp/Info.plist
@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.9.13</string>
+	<string>0.9.16</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>106</string>
+	<string>109</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
diff --git a/package.json b/package.json
index 0dde7d397..cc3eb88c7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "MindLogger",
-    "version": "0.9.13",
+    "version": "0.9.16",
     "private": true,
     "scripts": {
         "start": "node node_modules/react-native/local-cli/cli.js start",