From 8796960cb9aed10b6692ddb85e39576024fd4e01 Mon Sep 17 00:00:00 2001
From: Miguel Bolivar <mbolivar360@gmail.com>
Date: Thu, 6 Feb 2020 12:09:33 -0400
Subject: [PATCH 1/6] New structure for class and functional components
 examples

- Adding new code blocks as shown by @rachelnabors
- Adding better styling for example
- Only initial functional example added
---
 docs/modal.md | 115 ++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 106 insertions(+), 9 deletions(-)

diff --git a/docs/modal.md b/docs/modal.md
index 08bedd65c32..3438146c95c 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -5,47 +5,144 @@ title: Modal
 
 The Modal component is a basic way to present content above an enclosing view.
 
+### Example
 
-```SnackPlayer name=rn-modal
+<block class="functional syntax" />
+
+```SnackPlayer name=rn-modal-function-example
 import React, {Component, useState} from 'react';
-import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
+import {Modal, Text, TouchableHighlight, View, Alert, StyleSheet} from 'react-native';
 
 export default function App() {
   const [modalVisible, setModalVisible] = useState(false);
   return (
-    <View style={{marginTop: 22}}>
+    <View style={{marginTop: 22, ...styles.centeredView}}>
       <Modal
         animationType="slide"
-        transparent={false}
+        transparent={true}
         visible={modalVisible}
         onRequestClose={() => {
           Alert.alert('Modal has been closed.');
         }}>
-        <View style={{marginTop: 22}}>
-          <View>
-            <Text>Hello World!</Text>
+        <View style={{marginTop: 22, ...styles.centeredView}}>
+          <View style={{...styles.modalView}}>
+            <Text style={styles.modalText}>Hello World!</Text>
 
             <TouchableHighlight
+              style={{...styles.openButton  , backgroundColor: "#2196F3"}}
               onPress={() => {
                 setModalVisible(!modalVisible);
               }}>
-              <Text>Hide Modal</Text>
+              <Text style={styles.textStyle}>Hide Modal</Text>
             </TouchableHighlight>
           </View>
         </View>
       </Modal>
 
       <TouchableHighlight
+        style={styles.openButton}
         onPress={() => {
           setModalVisible(true);
         }}>
-        <Text>Show Modal</Text>
+        <Text style={styles.textStyle}>Show Modal</Text>
       </TouchableHighlight>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  openButton: {
+    backgroundColor: "#F194FF",
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center"
+  }
+})
+
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=rn-modal-class-example
+import React, {Component} from 'react';
+import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
+
+class ModalExample extends Component {
+  state = {
+    modalVisible: false,
+  };
+
+  setModalVisible(visible) {
+    this.setState({modalVisible: visible});
+  }
+
+  render() {
+    return (
+      <View style={{marginTop: 22}}>
+        <Modal
+          animationType="slide"
+          transparent={false}
+          visible={this.state.modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+          }}>
+          <View style={{marginTop: 22}}>
+            <View>
+              <Text>Hello World!</Text>
+
+              <TouchableHighlight
+                onPress={() => {
+                  this.setModalVisible(!this.state.modalVisible);
+                }}>
+                <Text>Hide Modal</Text>
+              </TouchableHighlight>
+            </View>
+          </View>
+        </Modal>
+
+        <TouchableHighlight
+          onPress={() => {
+            this.setModalVisible(true);
+          }}>
+          <Text>Show Modal</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}
 ```
 
+<block class="endBlock syntax" />
+
 ---
 
 # Reference

From a5d0315e38d7f8fef066aebff501c90a01f55732 Mon Sep 17 00:00:00 2001
From: Miguel Bolivar <MBolivar360@gmail.com>
Date: Thu, 13 Feb 2020 15:40:23 -0400
Subject: [PATCH 2/6] Updating example of class based component

---
 docs/modal.md | 136 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 101 insertions(+), 35 deletions(-)

diff --git a/docs/modal.md b/docs/modal.md
index 3438146c95c..10132036c28 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -10,29 +10,38 @@ The Modal component is a basic way to present content above an enclosing view.
 <block class="functional syntax" />
 
 ```SnackPlayer name=rn-modal-function-example
-import React, {Component, useState} from 'react';
-import {Modal, Text, TouchableHighlight, View, Alert, StyleSheet} from 'react-native';
-
-export default function App() {
+import React, { Component, useState } from "react";
+import {
+  Modal,
+  Text,
+  TouchableHighlight,
+  View,
+  Alert,
+  StyleSheet
+} from "react-native";
+
+const App = () => {
   const [modalVisible, setModalVisible] = useState(false);
   return (
-    <View style={{marginTop: 22, ...styles.centeredView}}>
+    <View style={styles.centeredView}>
       <Modal
         animationType="slide"
         transparent={true}
         visible={modalVisible}
         onRequestClose={() => {
-          Alert.alert('Modal has been closed.');
-        }}>
-        <View style={{marginTop: 22, ...styles.centeredView}}>
-          <View style={{...styles.modalView}}>
+          Alert.alert("Modal has been closed.");
+        }}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
             <Text style={styles.modalText}>Hello World!</Text>
 
             <TouchableHighlight
-              style={{...styles.openButton  , backgroundColor: "#2196F3"}}
+              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
               onPress={() => {
                 setModalVisible(!modalVisible);
-              }}>
+              }}
+            >
               <Text style={styles.textStyle}>Hide Modal</Text>
             </TouchableHighlight>
           </View>
@@ -43,7 +52,8 @@ export default function App() {
         style={styles.openButton}
         onPress={() => {
           setModalVisible(true);
-        }}>
+        }}
+      >
         <Text style={styles.textStyle}>Show Modal</Text>
       </TouchableHighlight>
     </View>
@@ -53,23 +63,24 @@ export default function App() {
 const styles = StyleSheet.create({
   centeredView: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22
   },
   modalView: {
     margin: 20,
     backgroundColor: "white",
     borderRadius: 20,
     padding: 35,
-    alignItems: 'center',
+    alignItems: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 2,
+      height: 2
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5,
+    elevation: 5
   },
   openButton: {
     backgroundColor: "#F194FF",
@@ -86,17 +97,25 @@ const styles = StyleSheet.create({
     marginBottom: 15,
     textAlign: "center"
   }
-})
+});
 
+export default App;
 ```
 
 <block class="classical syntax" />
 
 ```SnackPlayer name=rn-modal-class-example
 import React, {Component} from 'react';
-import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
-
-class ModalExample extends Component {
+import {
+  Modal,
+  Text,
+  TouchableHighlight,
+  View,
+  Alert,
+  StyleSheet
+} from "react-native";
+
+class App extends Component {
   state = {
     modalVisible: false,
   };
@@ -106,39 +125,86 @@ class ModalExample extends Component {
   }
 
   render() {
+    const { modalVisible } = this.state;
     return (
-      <View style={{marginTop: 22}}>
+      <View style={styles.centeredView}>
         <Modal
           animationType="slide"
-          transparent={false}
-          visible={this.state.modalVisible}
+          transparent={true}
+          visible={modalVisible}
           onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-          }}>
-          <View style={{marginTop: 22}}>
-            <View>
-              <Text>Hello World!</Text>
+            Alert.alert("Modal has been closed.");
+          }}
+        >
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
 
               <TouchableHighlight
+                style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                 onPress={() => {
-                  this.setModalVisible(!this.state.modalVisible);
-                }}>
-                <Text>Hide Modal</Text>
+                  setModalVisible(!modalVisible);
+                }}
+              >
+                <Text style={styles.textStyle}>Hide Modal</Text>
               </TouchableHighlight>
             </View>
           </View>
         </Modal>
 
         <TouchableHighlight
+          style={styles.openButton}
           onPress={() => {
-            this.setModalVisible(true);
-          }}>
-          <Text>Show Modal</Text>
+            setModalVisible(true);
+          }}
+        >
+          <Text style={styles.textStyle}>Show Modal</Text>
         </TouchableHighlight>
       </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  },
+  openButton: {
+    backgroundColor: "#F194FF",
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center"
+  }
+});
+
+export default App;
 ```
 
 <block class="endBlock syntax" />

From 321d37107e293d4c1b76b5f13cdfcb9899b58b49 Mon Sep 17 00:00:00 2001
From: Miguel Bolivar <MBolivar360@gmail.com>
Date: Thu, 13 Feb 2020 15:53:00 -0400
Subject: [PATCH 3/6] Prettier code and adding correct SnackPlayer naming

---
 docs/modal.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/modal.md b/docs/modal.md
index 10132036c28..6d6324c2534 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -9,15 +9,15 @@ The Modal component is a basic way to present content above an enclosing view.
 
 <block class="functional syntax" />
 
-```SnackPlayer name=rn-modal-function-example
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
 import React, { Component, useState } from "react";
 import {
+  Alert,
   Modal,
+  StyleSheet,
   Text,
   TouchableHighlight,
-  View,
-  Alert,
-  StyleSheet
+  View
 } from "react-native";
 
 const App = () => {
@@ -58,7 +58,7 @@ const App = () => {
       </TouchableHighlight>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   centeredView: {
@@ -104,24 +104,24 @@ export default App;
 
 <block class="classical syntax" />
 
-```SnackPlayer name=rn-modal-class-example
-import React, {Component} from 'react';
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import React, { Component } from "react";
 import {
+  Alert,
   Modal,
+  StyleSheet,
   Text,
   TouchableHighlight,
-  View,
-  Alert,
-  StyleSheet
+  View
 } from "react-native";
 
 class App extends Component {
   state = {
-    modalVisible: false,
+    modalVisible: false
   };
 
   setModalVisible(visible) {
-    this.setState({modalVisible: visible});
+    this.setState({ modalVisible: visible });
   }
 
   render() {

From 4bfc8beea0083d8cc8c341898e142499aee49bd0 Mon Sep 17 00:00:00 2001
From: Miguel Bolivar <MBolivar360@gmail.com>
Date: Thu, 13 Feb 2020 16:02:40 -0400
Subject: [PATCH 4/6] Adding toggles for function or class component and fixing
 'setModalVisible' call

---
 docs/modal.md | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/modal.md b/docs/modal.md
index 6d6324c2534..ab9d58b5703 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -7,6 +7,17 @@ The Modal component is a basic way to present content above an enclosing view.
 
 ### Example
 
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
 <block class="functional syntax" />
 
 ```SnackPlayer name=Modal&supportedPlatforms=android,ios
@@ -120,7 +131,7 @@ class App extends Component {
     modalVisible: false
   };
 
-  setModalVisible(visible) {
+  setModalVisible = (visible) => {
     this.setState({ modalVisible: visible });
   }
 
@@ -143,7 +154,7 @@ class App extends Component {
               <TouchableHighlight
                 style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                 onPress={() => {
-                  setModalVisible(!modalVisible);
+                  this.setModalVisible(!modalVisible);
                 }}
               >
                 <Text style={styles.textStyle}>Hide Modal</Text>

From d01b8e89221e9142fd0e2d499f2faeeaa735ee0f Mon Sep 17 00:00:00 2001
From: Miguel Bolivar <MBolivar360@gmail.com>
Date: Thu, 13 Feb 2020 16:21:07 -0400
Subject: [PATCH 5/6] Adding missing this.setModalVisible on class example

---
 docs/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/modal.md b/docs/modal.md
index ab9d58b5703..6407a50a5af 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -166,7 +166,7 @@ class App extends Component {
         <TouchableHighlight
           style={styles.openButton}
           onPress={() => {
-            setModalVisible(true);
+            this.setModalVisible(true);
           }}
         >
           <Text style={styles.textStyle}>Show Modal</Text>

From 5ace07a69cf971991a9dd7d296915f23ed3bbae0 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Mon, 17 Feb 2020 00:44:29 +0000
Subject: [PATCH 6/6] Update modal.md

Seems like modal should work on Web
---
 docs/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/modal.md b/docs/modal.md
index 6407a50a5af..4d2d96a1b1c 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -20,7 +20,7 @@ The Modal component is a basic way to present content above an enclosing view.
 
 <block class="functional syntax" />
 
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
+```SnackPlayer name=Modal
 import React, { Component, useState } from "react";
 import {
   Alert,