From 0619edbcd0d6fe0e657b46706f8c64cb025f6b34 Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Sat, 7 Nov 2020 20:05:49 -0500
Subject: [PATCH 1/6] Add onShow and onDismiss behavior to modal example

---
 .../rn-tester/js/components/ExamplePage.js    |  1 +
 .../js/examples/Modal/ModalExample.js         | 37 ++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index ff9bf7f6f3ac85..466ac729cb44d5 100644
--- a/packages/rn-tester/js/components/ExamplePage.js
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -78,6 +78,7 @@ const styles = StyleSheet.create({
   examplesContainer: {
     width: ScreenWidth,
     flexGrow: 1,
+    flex:1
   },
   description: {
     marginVertical: 8,
diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index 9d8b07e63d8757..051135a3a3a5ac 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -21,6 +21,7 @@ const {
   Text,
   TouchableHighlight,
   View,
+  ScrollView
 } = require('react-native');
 
 const Item = Picker.Item;
@@ -81,6 +82,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     presentationStyle: 'fullScreen',
     selectedSupportedOrientation: '0',
     currentOrientation: 'unknown',
+    action: ''
   };
 
   _setModalVisible = visible => {
@@ -121,7 +123,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     };
 
     return (
-      <View>
+      <ScrollView contentContainerStyle={styles.ScrollView}>
         <Modal
           animationType={this.state.animationType}
           presentationStyle={this.state.presentationStyle}
@@ -135,7 +137,16 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
           }
           onOrientationChange={evt =>
             this.setState({currentOrientation: evt.nativeEvent.orientation})
-          }>
+          }
+          onDismiss={() =>
+            this.state.action === 'onDismiss' ? alert(this.state.action)
+            : null
+          }
+          onShow={() =>
+            this.state.action === 'onShow' ? alert(this.state.action)
+            : null
+          }
+          >
           <View style={[styles.container, modalBackgroundStyle]}>
             <View
               style={[styles.innerContainer, innerContainerTransparentStyle]}>
@@ -189,7 +200,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
         <Button onPress={this._setModalVisible.bind(this, true)}>
           Present
         </Button>
-      </View>
+      </ScrollView>
     );
   }
   renderPickers() {
@@ -213,13 +224,13 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             <Item label="Default presentationStyle" value={null} />
           </Picker>
         </View>
-
+            
         <View>
           <Text style={styles.rowTitle}>Supported orientations</Text>
           <Picker
             selectedValue={this.state.selectedSupportedOrientation}
             onValueChange={(_, i) =>
-              this.setState({selectedSupportedOrientation: i})
+              this.setState({selectedSupportedOrientation: i.toString()})
             }
             itemStyle={styles.pickerItem}>
             <Item label="Portrait" value={'0'} />
@@ -230,6 +241,18 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             <Item label="Default supportedOrientations" value={'5'} />
           </Picker>
         </View>
+
+        <View>
+          <Text style={styles.rowTitle}>Actions</Text>
+          <Picker
+            selectedValue={this.state.action}
+            onValueChange={action => this.setState({action})}
+            itemStyle={styles.pickerItem}>
+            <Item label="None" value=''/>
+            <Item label="On Dismiss" value="onDismiss"/>
+            <Item label="On Show" value="onShow"/>
+          </Picker>
+        </View>
       </View>
     );
   }
@@ -282,4 +305,8 @@ const styles = StyleSheet.create({
   pickerItem: {
     fontSize: 16,
   },
+  ScrollView: {
+    paddingTop:10,
+    paddingBottom:100
+  }
 });

From ab85ade2b23d71a9cf751e4c93d0eeefef65070f Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Mon, 16 Nov 2020 18:52:10 -0500
Subject: [PATCH 2/6] Add hardware accelerated and status bar translucent
 support for android

---
 .../js/examples/Modal/ModalExample.js         | 61 ++++++++++++++-----
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index 051135a3a3a5ac..e96a5fb055eff7 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -21,7 +21,7 @@ const {
   Text,
   TouchableHighlight,
   View,
-  ScrollView
+  ScrollView,
 } = require('react-native');
 
 const Item = Picker.Item;
@@ -79,10 +79,12 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     animationType: 'none',
     modalVisible: false,
     transparent: false,
+    hardwareAccelerated: false,
+    statusBarTranslucent: false,
     presentationStyle: 'fullScreen',
     selectedSupportedOrientation: '0',
     currentOrientation: 'unknown',
-    action: ''
+    action: '',
   };
 
   _setModalVisible = visible => {
@@ -97,10 +99,39 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     this.setState({transparent: !this.state.transparent});
   };
 
+  _toggleHardwareAccelerated = () => {
+    this.setState({hardwareAccelerated: !this.state.hardwareAccelerated});
+  }
+
+  _toggleStatusBarTranslucent = () => {
+    this.setState({statusBarTranslucent: !this.state.statusBarTranslucent});
+  }
+
   renderSwitch() {
     if (Platform.isTV) {
       return null;
     }
+    if (Platform.OS === 'android') {
+      return (
+        <>
+        <Text style={styles.rowTitle}>Hardware Accelerated</Text>
+        <Switch
+          value={this.state.hardwareAccelerated}
+          onValueChange={this._toggleHardwareAccelerated}
+        />
+        <Text style={styles.rowTitle}>Status Bar Translucent</Text>
+        <Switch
+          value={this.state.statusBarTranslucent}
+          onValueChange={this._toggleStatusBarTranslucent}
+        />
+        <Text style={styles.rowTitle}>Transparent</Text>
+        <Switch
+          value={this.state.transparent}
+          onValueChange={this._toggleTransparent}
+        />
+        </>
+      );
+    }
     return (
       <Switch
         value={this.state.transparent}
@@ -128,6 +159,8 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
           animationType={this.state.animationType}
           presentationStyle={this.state.presentationStyle}
           transparent={this.state.transparent}
+          hardwareAccelerated={this.state.hardwareAccelerated}
+          statusBarTranslucent={this.state.statusBarTranslucent}
           visible={this.state.modalVisible}
           onRequestClose={() => this._setModalVisible(false)}
           supportedOrientations={
@@ -139,14 +172,11 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             this.setState({currentOrientation: evt.nativeEvent.orientation})
           }
           onDismiss={() =>
-            this.state.action === 'onDismiss' ? alert(this.state.action)
-            : null
+            this.state.action === 'onDismiss' ? alert(this.state.action) : null
           }
           onShow={() =>
-            this.state.action === 'onShow' ? alert(this.state.action)
-            : null
-          }
-          >
+            this.state.action === 'onShow' ? alert(this.state.action) : null
+          }>
           <View style={[styles.container, modalBackgroundStyle]}>
             <View
               style={[styles.innerContainer, innerContainerTransparentStyle]}>
@@ -193,7 +223,6 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
         </View>
 
         <View style={styles.row}>
-          <Text style={styles.rowTitle}>Transparent</Text>
           {this.renderSwitch()}
         </View>
         {this.renderPickers()}
@@ -224,7 +253,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             <Item label="Default presentationStyle" value={null} />
           </Picker>
         </View>
-            
+
         <View>
           <Text style={styles.rowTitle}>Supported orientations</Text>
           <Picker
@@ -248,9 +277,9 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             selectedValue={this.state.action}
             onValueChange={action => this.setState({action})}
             itemStyle={styles.pickerItem}>
-            <Item label="None" value=''/>
-            <Item label="On Dismiss" value="onDismiss"/>
-            <Item label="On Show" value="onShow"/>
+            <Item label="None" value="" />
+            <Item label="On Dismiss" value="onDismiss" />
+            <Item label="On Show" value="onShow" />
           </Picker>
         </View>
       </View>
@@ -306,7 +335,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
   ScrollView: {
-    paddingTop:10,
-    paddingBottom:100
-  }
+    paddingTop: 10,
+    paddingBottom: 100,
+  },
 });

From 6a23e928bdd5faf7ae7970144ac762cee55f4217 Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Mon, 16 Nov 2020 19:06:46 -0500
Subject: [PATCH 3/6] Add conditional rendering of picker items

---
 packages/rn-tester/js/examples/Modal/ModalExample.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index e96a5fb055eff7..f3d31de2d51be0 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -273,6 +273,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
 
         <View>
           <Text style={styles.rowTitle}>Actions</Text>
+          {Platform.OS === 'ios' ?
           <Picker
             selectedValue={this.state.action}
             onValueChange={action => this.setState({action})}
@@ -281,6 +282,15 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
             <Item label="On Dismiss" value="onDismiss" />
             <Item label="On Show" value="onShow" />
           </Picker>
+          : 
+          <Picker
+            selectedValue={this.state.action}
+            onValueChange={action => this.setState({action})}
+            itemStyle={styles.pickerItem}>
+            <Item label="None" value="" />
+            <Item label="On Show" value="onShow" />
+          </Picker>
+          }
         </View>
       </View>
     );

From dc6d4de05793df128c965a19382c51148f6e40c9 Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Mon, 16 Nov 2020 19:32:51 -0500
Subject: [PATCH 4/6] Fix errors caused by eslint

---
 .../js/examples/Modal/ModalExample.js         | 74 +++++++++----------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index f3d31de2d51be0..7eb456148f7e30 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -101,11 +101,11 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
 
   _toggleHardwareAccelerated = () => {
     this.setState({hardwareAccelerated: !this.state.hardwareAccelerated});
-  }
+  };
 
   _toggleStatusBarTranslucent = () => {
     this.setState({statusBarTranslucent: !this.state.statusBarTranslucent});
-  }
+  };
 
   renderSwitch() {
     if (Platform.isTV) {
@@ -114,21 +114,21 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     if (Platform.OS === 'android') {
       return (
         <>
-        <Text style={styles.rowTitle}>Hardware Accelerated</Text>
-        <Switch
-          value={this.state.hardwareAccelerated}
-          onValueChange={this._toggleHardwareAccelerated}
-        />
-        <Text style={styles.rowTitle}>Status Bar Translucent</Text>
-        <Switch
-          value={this.state.statusBarTranslucent}
-          onValueChange={this._toggleStatusBarTranslucent}
-        />
-        <Text style={styles.rowTitle}>Transparent</Text>
-        <Switch
-          value={this.state.transparent}
-          onValueChange={this._toggleTransparent}
-        />
+          <Text style={styles.rowTitle}>Hardware Accelerated</Text>
+          <Switch
+            value={this.state.hardwareAccelerated}
+            onValueChange={this._toggleHardwareAccelerated}
+          />
+          <Text style={styles.rowTitle}>Status Bar Translucent</Text>
+          <Switch
+            value={this.state.statusBarTranslucent}
+            onValueChange={this._toggleStatusBarTranslucent}
+          />
+          <Text style={styles.rowTitle}>Transparent</Text>
+          <Switch
+            value={this.state.transparent}
+            onValueChange={this._toggleTransparent}
+          />
         </>
       );
     }
@@ -222,9 +222,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
           </Button>
         </View>
 
-        <View style={styles.row}>
-          {this.renderSwitch()}
-        </View>
+        <View style={styles.row}>{this.renderSwitch()}</View>
         {this.renderPickers()}
         <Button onPress={this._setModalVisible.bind(this, true)}>
           Present
@@ -273,24 +271,24 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
 
         <View>
           <Text style={styles.rowTitle}>Actions</Text>
-          {Platform.OS === 'ios' ?
-          <Picker
-            selectedValue={this.state.action}
-            onValueChange={action => this.setState({action})}
-            itemStyle={styles.pickerItem}>
-            <Item label="None" value="" />
-            <Item label="On Dismiss" value="onDismiss" />
-            <Item label="On Show" value="onShow" />
-          </Picker>
-          : 
-          <Picker
-            selectedValue={this.state.action}
-            onValueChange={action => this.setState({action})}
-            itemStyle={styles.pickerItem}>
-            <Item label="None" value="" />
-            <Item label="On Show" value="onShow" />
-          </Picker>
-          }
+          {Platform.OS === 'ios' ? (
+            <Picker
+              selectedValue={this.state.action}
+              onValueChange={action => this.setState({action})}
+              itemStyle={styles.pickerItem}>
+              <Item label="None" value="" />
+              <Item label="On Dismiss" value="onDismiss" />
+              <Item label="On Show" value="onShow" />
+            </Picker>
+          ) : (
+            <Picker
+              selectedValue={this.state.action}
+              onValueChange={action => this.setState({action})}
+              itemStyle={styles.pickerItem}>
+              <Item label="None" value="" />
+              <Item label="On Show" value="onShow" />
+            </Picker>
+          )}
         </View>
       </View>
     );

From 5c34e79cda56300796318e3f3f1a7cbe61e522b9 Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Tue, 24 Nov 2020 18:36:17 -0500
Subject: [PATCH 5/6] Fix flow check error

---
 packages/rn-tester/js/examples/Modal/ModalExample.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index 7eb456148f7e30..6e508317ec3f4e 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -171,11 +171,13 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
           onOrientationChange={evt =>
             this.setState({currentOrientation: evt.nativeEvent.orientation})
           }
-          onDismiss={() =>
-            this.state.action === 'onDismiss' ? alert(this.state.action) : null
+          onDismiss={() => {
+            if (this.state.action === 'onDismiss') alert(this.state.action);
+          }
+          }
+          onShow={() => {
+            if (this.state.action === 'onShow') alert(this.state.action);
           }
-          onShow={() =>
-            this.state.action === 'onShow' ? alert(this.state.action) : null
           }>
           <View style={[styles.container, modalBackgroundStyle]}>
             <View

From 98286f5efca4722d415d9e45c2e8d4710d3f152c Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Thu, 3 Dec 2020 14:51:22 -0500
Subject: [PATCH 6/6] Fix format-check error

---
 packages/rn-tester/js/components/ExamplePage.js      | 2 +-
 packages/rn-tester/js/examples/Modal/ModalExample.js | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index 466ac729cb44d5..09ed2bc33f8ed6 100644
--- a/packages/rn-tester/js/components/ExamplePage.js
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
   examplesContainer: {
     width: ScreenWidth,
     flexGrow: 1,
-    flex:1
+    flex: 1,
   },
   description: {
     marginVertical: 8,
diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index 6e508317ec3f4e..fec5a88bb54908 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -173,12 +173,10 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
           }
           onDismiss={() => {
             if (this.state.action === 'onDismiss') alert(this.state.action);
-          }
-          }
+          }}
           onShow={() => {
             if (this.state.action === 'onShow') alert(this.state.action);
-          }
-          }>
+          }}>
           <View style={[styles.container, modalBackgroundStyle]}>
             <View
               style={[styles.innerContainer, innerContainerTransparentStyle]}>