From 7fe7c69d3bd651dbdd6cac646dfa198f642d62aa Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Wed, 5 Feb 2020 20:18:22 +0530
Subject: [PATCH 1/3] DatePickerIOS - Added Snack Examples

---
 docs/datepickerios.md | 63 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 3 deletions(-)

diff --git a/docs/datepickerios.md b/docs/datepickerios.md
index 347ace70be0..e91ab9558f2 100644
--- a/docs/datepickerios.md
+++ b/docs/datepickerios.md
@@ -9,9 +9,58 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co
 
 ### Example
 
-```jsx
+<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=DatePickerIOS
+import React, {useState} from 'react';
+import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
+
+export default function App () {
+
+  const [chosenDate, setChosenDate] = useState(new Date());
+
+  if(Platform.OS !== "ios") {
+    return (
+      <View style={styles.container}>
+        <Text>This Component only works on iOS</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <DatePickerIOS
+        date={chosenDate}
+        onDateChange={setChosenDate}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=DatePickerIOS
 import React, {Component} from 'react';
-import {DatePickerIOS, View, StyleSheet} from 'react-native';
+import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
 
 export default class App extends Component {
   constructor(props) {
@@ -26,6 +75,14 @@ export default class App extends Component {
   }
 
   render() {
+    if (Platform.OS !== 'ios') {
+      return (
+        <View style={styles.container}>
+          <Text>This Component only works on iOS</Text>
+        </View>
+      );
+    }
+
     return (
       <View style={styles.container}>
         <DatePickerIOS
@@ -45,7 +102,7 @@ const styles = StyleSheet.create({
 });
 ```
 
-<center><img src="/react-native/docs/assets/DatePickerIOS/example.gif" width="360"></img></center>
+<block class="endBlock syntax" />
 
 ---
 

From af16849a7ffc97bb402c117867385cd2084d09a0 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Wed, 5 Feb 2020 15:04:46 +0000
Subject: [PATCH 2/3] Update datepickerios.md

Added `&supportedPlatforms=ios` config to Snack player and removed platform checking code
---
 docs/datepickerios.md | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/docs/datepickerios.md b/docs/datepickerios.md
index e91ab9558f2..4877911777b 100644
--- a/docs/datepickerios.md
+++ b/docs/datepickerios.md
@@ -22,7 +22,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co
 
 <block class="functional syntax" />
 
-```SnackPlayer name=DatePickerIOS
+```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
 import React, {useState} from 'react';
 import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
 
@@ -30,14 +30,6 @@ export default function App () {
 
   const [chosenDate, setChosenDate] = useState(new Date());
 
-  if(Platform.OS !== "ios") {
-    return (
-      <View style={styles.container}>
-        <Text>This Component only works on iOS</Text>
-      </View>
-    )
-  }
-
   return (
     <View style={styles.container}>
       <DatePickerIOS
@@ -58,7 +50,7 @@ const styles = StyleSheet.create({
 
 <block class="classical syntax" />
 
-```SnackPlayer name=DatePickerIOS
+```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
 import React, {Component} from 'react';
 import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
 
@@ -74,15 +66,6 @@ export default class App extends Component {
     this.setState({chosenDate: newDate});
   }
 
-  render() {
-    if (Platform.OS !== 'ios') {
-      return (
-        <View style={styles.container}>
-          <Text>This Component only works on iOS</Text>
-        </View>
-      );
-    }
-
     return (
       <View style={styles.container}>
         <DatePickerIOS

From f882480691d4cc974b0e36306736141c7f8246a2 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Fri, 7 Feb 2020 04:09:19 +0530
Subject: [PATCH 3/3] removed unused import statements

---
 docs/datepickerios.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/datepickerios.md b/docs/datepickerios.md
index 4877911777b..c35343cbc21 100644
--- a/docs/datepickerios.md
+++ b/docs/datepickerios.md
@@ -24,7 +24,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co
 
 ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
 import React, {useState} from 'react';
-import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
+import {DatePickerIOS, View, StyleSheet} from 'react-native';
 
 export default function App () {
 
@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
 
 ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
 import React, {Component} from 'react';
-import {DatePickerIOS, View, StyleSheet, Text, Platform} from 'react-native';
+import {DatePickerIOS, View, StyleSheet} from 'react-native';
 
 export default class App extends Component {
   constructor(props) {
@@ -66,6 +66,7 @@ export default class App extends Component {
     this.setState({chosenDate: newDate});
   }
 
+  render() {
     return (
       <View style={styles.container}>
         <DatePickerIOS