From 6406b5f6f21add3316825413158785d7ee5cff3c Mon Sep 17 00:00:00 2001
From: Luis Medina Huerta <luism3861@gmail.com>
Date: Wed, 2 Jun 2021 04:31:35 -0500
Subject: [PATCH] fix style in buttons in systrace example APfix style in
 buttons in systrace example API (#2628)

---
 docs/systrace.md                              | 24 +++++++++++++++----
 .../versioned_docs/version-0.64/systrace.md   | 24 +++++++++++++++----
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/docs/systrace.md b/docs/systrace.md
index f775766dd6a..0a8e33897fe 100644
--- a/docs/systrace.md
+++ b/docs/systrace.md
@@ -16,7 +16,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 ```SnackPlayer name=Systrace%20Function%20Component%20Example
 import React from "react";
-import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+import { Button, Text, View, SafeAreaView, StyleSheet, Systrace } from "react-native";
 
 const App = () =>  {
 
@@ -31,11 +31,13 @@ const App = () =>  {
   }
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+    <View style={styles.buttonRow}>
       <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
       <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
     </View>
+    </SafeAreaView>
   );
 }
 
@@ -55,7 +57,13 @@ const styles = StyleSheet.create({
   },
   paragraph: {
     margin: 24,
+    fontSize: 25,
     textAlign: "center"
+  },
+  buttonRow: {
+    flexBasis: 150,
+    marginVertical: 16,
+    justifyContent: 'space-evenly'
   }
 });
 
@@ -67,7 +75,7 @@ export default App;
 
 ```SnackPlayer name=Systrace%20Class%20Component%20Example
 import React, { Component } from "react";
-import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+import { Button, Text, View, SafeAreaView, StyleSheet, Systrace } from "react-native";
 
 class App extends Component {
 
@@ -83,11 +91,13 @@ class App extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+      <View style={styles.buttonRow}>
         <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
         <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
       </View>
+      </SafeAreaView>
     );
   }
 }
@@ -108,7 +118,13 @@ const styles = StyleSheet.create({
   },
   paragraph: {
     margin: 24,
+    fontSize: 25,
     textAlign: "center"
+  },
+  buttonRow: {
+    flexBasis: 150,
+    marginVertical: 16,
+    justifyContent: 'space-evenly'
   }
 });
 
diff --git a/website/versioned_docs/version-0.64/systrace.md b/website/versioned_docs/version-0.64/systrace.md
index f775766dd6a..0a8e33897fe 100644
--- a/website/versioned_docs/version-0.64/systrace.md
+++ b/website/versioned_docs/version-0.64/systrace.md
@@ -16,7 +16,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 ```SnackPlayer name=Systrace%20Function%20Component%20Example
 import React from "react";
-import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+import { Button, Text, View, SafeAreaView, StyleSheet, Systrace } from "react-native";
 
 const App = () =>  {
 
@@ -31,11 +31,13 @@ const App = () =>  {
   }
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+    <View style={styles.buttonRow}>
       <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
       <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
     </View>
+    </SafeAreaView>
   );
 }
 
@@ -55,7 +57,13 @@ const styles = StyleSheet.create({
   },
   paragraph: {
     margin: 24,
+    fontSize: 25,
     textAlign: "center"
+  },
+  buttonRow: {
+    flexBasis: 150,
+    marginVertical: 16,
+    justifyContent: 'space-evenly'
   }
 });
 
@@ -67,7 +75,7 @@ export default App;
 
 ```SnackPlayer name=Systrace%20Class%20Component%20Example
 import React, { Component } from "react";
-import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+import { Button, Text, View, SafeAreaView, StyleSheet, Systrace } from "react-native";
 
 class App extends Component {
 
@@ -83,11 +91,13 @@ class App extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+      <View style={styles.buttonRow}>
         <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
         <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
       </View>
+      </SafeAreaView>
     );
   }
 }
@@ -108,7 +118,13 @@ const styles = StyleSheet.create({
   },
   paragraph: {
     margin: 24,
+    fontSize: 25,
     textAlign: "center"
+  },
+  buttonRow: {
+    flexBasis: 150,
+    marginVertical: 16,
+    justifyContent: 'space-evenly'
   }
 });