From a2fcf05fb79478a673534da025efd84eaad8d527 Mon Sep 17 00:00:00 2001
From: Pablo Espinosa <espipj@gmail.com>
Date: Tue, 11 Feb 2020 18:42:16 +0000
Subject: [PATCH 1/3] StatusBar example updated using Expo and Hooks

Fixed formatting
---
 docs/statusbar.md | 62 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/docs/statusbar.md b/docs/statusbar.md
index cc41264edee..ae6d032e7e5 100644
--- a/docs/statusbar.md
+++ b/docs/statusbar.md
@@ -9,14 +9,60 @@ Component to control the app status bar.
 
 It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted.
 
-```jsx
-<View>
-  <StatusBar backgroundColor="blue" barStyle="light-content" />
-  <View>
-    <StatusBar hidden={route.statusBarHidden} />
-    ...
-  </View>
-</View>
+```SnackPlayer name=StatusBar%20Android%20and%20iOS%20API%20Example&supportedPlatforms=android,ios
+import React, { useState } from "react";
+import { View, StyleSheet, StatusBar, Button } from "react-native";
+import Constants from "expo-constants";
+
+const App = () => {
+  const styleTypes = ['default', 'light-content', 'dark-content'];
+  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
+  const [statusBarStyle, setstatusBarStyle] = useState(styleTypes[0]);
+
+  const changeSBVisibility = () => {
+    setVisibleStatusBar(!visibleStatusBar);
+  };
+
+  const changeSBStyle = () => {
+    const idx = styleTypes.indexOf(statusBarStyle);
+    if(idx + 1 == styleTypes.length){
+      setstatusBarStyle(styleTypes[0]);
+      return;
+    }
+    setstatusBarStyle(styleTypes[idx+1]);
+    return;
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar backgroundColor="blue" barStyle={statusBarStyle} />
+      <View>
+        <StatusBar hidden={visibleStatusBar} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle StatusBar" onPress={() => changeSBVisibility()} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Change StatusBar Style" onPress={() => changeSBStyle()} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: "#ecf0f1",
+    padding: 8
+  },
+  buttonContainer:{
+    padding: 10
+  }
+});
+
+export default App;
 ```
 
 ### Imperative API

From 134efc81cf13b43b325ea41ac8907745ea177c95 Mon Sep 17 00:00:00 2001
From: Pablo Espinosa <espipj@gmail.com>
Date: Wed, 12 Feb 2020 17:27:16 +0000
Subject: [PATCH 2/3] Improving code styling

Co-Authored-By: Luiz Celso de Faria Alves <celsodesign@gmail.com>
---
 docs/statusbar.md | 52 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/docs/statusbar.md b/docs/statusbar.md
index ae6d032e7e5..9b35eecc117 100644
--- a/docs/statusbar.md
+++ b/docs/statusbar.md
@@ -11,6 +11,58 @@ It is possible to have multiple `StatusBar` components mounted at the same time.
 
 ```SnackPlayer name=StatusBar%20Android%20and%20iOS%20API%20Example&supportedPlatforms=android,ios
 import React, { useState } from "react";
+import { Button, StyleSheet, StatusBar, View } from "react-native";
+
+import Constants from "expo-constants";
+
+const App = () => {
+  const styleTypes = ['dark-content', 'light-content'];
+  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
+  const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);
+
+  const changeVisibilityStatusBar = () => {
+    setVisibleStatusBar(!visibleStatusBar);
+  };
+
+  const changeStyleStatusBar = () => {
+    const styleId = styleTypes.indexOf(styleStatusBar) + 1;
+    
+    if(styleId === styleTypes.length){
+      return setStyleStatusBar(styleTypes[0]);
+    }
+    return setStyleStatusBar(styleTypes[styleId]);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
+      <View>
+        <StatusBar hidden={visibleStatusBar} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: '#ECF0F1',
+    padding: 8
+  },
+  buttonContainer:{
+    padding: 10
+  }
+});
+
+export default App;
 import { View, StyleSheet, StatusBar, Button } from "react-native";
 import Constants from "expo-constants";
 

From da09c14ae7d4ad7c032ff497ccccdfc83fe1f6b3 Mon Sep 17 00:00:00 2001
From: Pablo Espinosa <espipj@gmail.com>
Date: Wed, 12 Feb 2020 17:43:55 +0000
Subject: [PATCH 3/3] Added StatusBar text indicators

---
 docs/statusbar.md | 63 +++++++----------------------------------------
 1 file changed, 9 insertions(+), 54 deletions(-)

diff --git a/docs/statusbar.md b/docs/statusbar.md
index 9b35eecc117..731b875ca89 100644
--- a/docs/statusbar.md
+++ b/docs/statusbar.md
@@ -9,14 +9,14 @@ Component to control the app status bar.
 
 It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted.
 
-```SnackPlayer name=StatusBar%20Android%20and%20iOS%20API%20Example&supportedPlatforms=android,ios
+```SnackPlayer name=StatusBar%20Android%20and%20iOS%20Component%20Example&supportedPlatforms=android,ios
 import React, { useState } from "react";
-import { Button, StyleSheet, StatusBar, View } from "react-native";
+import { Button, Text, StyleSheet, StatusBar, View } from "react-native";
 
 import Constants from "expo-constants";
 
 const App = () => {
-  const styleTypes = ['dark-content', 'light-content'];
+  const styleTypes = ['default','dark-content', 'light-content'];
   const [visibleStatusBar, setVisibleStatusBar] = useState(false);
   const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);
 
@@ -35,6 +35,10 @@ const App = () => {
 
   return (
     <View style={styles.container}>
+      <View>
+        <Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
+        <Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible': 'Hidden'}</Text>
+      </View>
       <StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
       <View>
         <StatusBar hidden={visibleStatusBar} />
@@ -59,58 +63,9 @@ const styles = StyleSheet.create({
   },
   buttonContainer:{
     padding: 10
-  }
-});
-
-export default App;
-import { View, StyleSheet, StatusBar, Button } from "react-native";
-import Constants from "expo-constants";
-
-const App = () => {
-  const styleTypes = ['default', 'light-content', 'dark-content'];
-  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
-  const [statusBarStyle, setstatusBarStyle] = useState(styleTypes[0]);
-
-  const changeSBVisibility = () => {
-    setVisibleStatusBar(!visibleStatusBar);
-  };
-
-  const changeSBStyle = () => {
-    const idx = styleTypes.indexOf(statusBarStyle);
-    if(idx + 1 == styleTypes.length){
-      setstatusBarStyle(styleTypes[0]);
-      return;
-    }
-    setstatusBarStyle(styleTypes[idx+1]);
-    return;
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar backgroundColor="blue" barStyle={statusBarStyle} />
-      <View>
-        <StatusBar hidden={visibleStatusBar} />
-      </View>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle StatusBar" onPress={() => changeSBVisibility()} />
-      </View>
-      <View style={styles.buttonContainer}>
-        <Button title="Change StatusBar Style" onPress={() => changeSBStyle()} />
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    paddingTop: Constants.statusBarHeight,
-    backgroundColor: "#ecf0f1",
-    padding: 8
   },
-  buttonContainer:{
-    padding: 10
+  textStyle:{
+    textAlign: 'center'
   }
 });