From e2a1e455bffa0ca05014a26b2be35f9c1994123f Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 27 Mar 2020 17:21:03 +0100
Subject: [PATCH] update SegmentedControliOS page generated for 0.61

---
 .../version-0.61/segmentedcontrolios.md       | 48 ++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/website/versioned_docs/version-0.61/segmentedcontrolios.md b/website/versioned_docs/version-0.61/segmentedcontrolios.md
index b666b14cbe6..e53ae833ffb 100644
--- a/website/versioned_docs/version-0.61/segmentedcontrolios.md
+++ b/website/versioned_docs/version-0.61/segmentedcontrolios.md
@@ -14,18 +14,40 @@ The selected index can be changed on the fly by assigning the selectedIndex prop
 
 ## Example
 
-```jsx
-<SegmentedControlIOS
-  values={['One', 'Two']}
-  selectedIndex={this.state.selectedIndex}
-  onChange={(event) => {
-    this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
-  }}
-/>
+```SnackPlayer name=SegmentedControlIOS%20Example&supportedPlatforms=ios
+import React, { useState } from "react";
+import { SegmentedControlIOS, StyleSheet, Text, View } from "react-native";
+
+export default App = () => {
+  const [index, setIndex] = useState(0);
+  return (
+    <View style={styles.container}>
+      <SegmentedControlIOS
+        values={['One', 'Two']}
+        selectedIndex={index}
+        onChange={(event) => {
+          setIndex(event.nativeEvent.selectedSegmentIndex);
+        }}
+      />
+      <Text style={styles.text}>
+        Selected index: {index}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: "center"
+  },
+  text: {
+    marginTop: 24
+  }
+});
 ```
 
-<center><img src="/docs/assets/SegmentedControlIOS/example.gif" width="360"></img></center>
-
 ---
 
 # Reference
@@ -42,8 +64,6 @@ If false the user won't be able to interact with the control. Default value is t
 | ---- | -------- |
 | bool | No       |
 
-<center><img src="/docs/assets/SegmentedControlIOS/enabled.png" width="360"></img></center>
-
 ---
 
 ### `momentary`
@@ -54,8 +74,6 @@ If true, then selecting a segment won't persist visually. The `onValueChange` ca
 | ---- | -------- |
 | bool | No       |
 
-<center><img src="/docs/assets/SegmentedControlIOS/momentary.gif" width="360"></img></center>
-
 ---
 
 ### `onChange`
@@ -96,8 +114,6 @@ Accent color of the control.
 | ------ | -------- |
 | string | No       |
 
-<center><img src="/docs/assets/SegmentedControlIOS/tintColor.png" width="360"></img></center>
-
 ---
 
 ### `values`