diff --git a/docs/platform.md b/docs/platform.md
index 833edfa2de8..79f435ccd56 100644
--- a/docs/platform.md
+++ b/docs/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.77/platform.md b/website/versioned_docs/version-0.77/platform.md
index af8b2cccb49..aefb269e53a 100644
--- a/website/versioned_docs/version-0.77/platform.md
+++ b/website/versioned_docs/version-0.77/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.78/platform.md b/website/versioned_docs/version-0.78/platform.md
index a160c11b291..bd8daeeb6f3 100644
--- a/website/versioned_docs/version-0.78/platform.md
+++ b/website/versioned_docs/version-0.78/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.79/platform.md b/website/versioned_docs/version-0.79/platform.md
index af8b2cccb49..aefb269e53a 100644
--- a/website/versioned_docs/version-0.79/platform.md
+++ b/website/versioned_docs/version-0.79/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.80/platform.md b/website/versioned_docs/version-0.80/platform.md
index af8b2cccb49..aefb269e53a 100644
--- a/website/versioned_docs/version-0.80/platform.md
+++ b/website/versioned_docs/version-0.80/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.81/platform.md b/website/versioned_docs/version-0.81/platform.md
index af8b2cccb49..aefb269e53a 100644
--- a/website/versioned_docs/version-0.81/platform.md
+++ b/website/versioned_docs/version-0.81/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/website/versioned_docs/version-0.82/platform.md b/website/versioned_docs/version-0.82/platform.md
index 833edfa2de8..79f435ccd56 100644
--- a/website/versioned_docs/version-0.82/platform.md
+++ b/website/versioned_docs/version-0.82/platform.md
@@ -13,7 +13,7 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const App = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView>
+      <SafeAreaView style={styles.safeArea}>
         <ScrollView contentContainerStyle={styles.container}>
           <Text>OS</Text>
           <Text style={styles.value}>{Platform.OS}</Text>
@@ -48,6 +48,9 @@ const styles = StyleSheet.create({
     padding: 4,
     marginBottom: 8,
   },
+  safeArea: {
+    flex: 1,
+  },
 });
 
 export default App;