diff --git a/docs/textinput.md b/docs/textinput.md
index 3f407a8d168..97dfad51faf 100644
--- a/docs/textinput.md
+++ b/docs/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/docs/view.md b/docs/view.md
index f26406d2412..fd096fb30c5 100644
--- a/docs/view.md
+++ b/docs/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>
diff --git a/plugins/remark-snackplayer/README.md b/plugins/remark-snackplayer/README.md
index 76aaf9de8c9..a66408803d6 100644
--- a/plugins/remark-snackplayer/README.md
+++ b/plugins/remark-snackplayer/README.md
@@ -40,6 +40,7 @@ The above code snippet would look like this:
 | supportedPlatforms | Supported platforms                                                                                             | `"ios,android,web"` |
 | theme              | SnackPlayer theme, `"light"` or `"dark"`                                                                        | `"light"`           |
 | preview            | Preview visible, `"true"` or `"false"`                                                                          | `"true"`            |
+| deviceAppearance   | Sets the preview mobile device appearance, `"light"` or `"dark"`                                                | `"light"`           |
 | loading            | iFrame loading attribute, `"auto"`, `"lazy"` or `"eager"`                                                       | `"lazy"`            |
 | deviceAndroid      | Emulator type used for Android, [see Appetize options](https://docs.appetize.io/core-features/playback-options) | `pixel4`            |
 | deviceIos          | Simulator type used for iOS, [see Appetize options](https://docs.appetize.io/core-features/playback-options)    | `iphone12`          |
diff --git a/plugins/remark-snackplayer/src/index.js b/plugins/remark-snackplayer/src/index.js
index c366f726ad2..c20cab84dbb 100644
--- a/plugins/remark-snackplayer/src/index.js
+++ b/plugins/remark-snackplayer/src/index.js
@@ -54,6 +54,7 @@ async function toJsxNode(node) {
   const theme = params.theme ?? 'light';
   const preview = params.preview ?? 'true';
   const loading = params.loading ?? 'lazy';
+  const deviceAppearance = params.deviceAppearance ?? 'light';
 
   // Need help constructing this AST node?
   // Use the MDX Playground and explore what your output mdast should look like
@@ -72,6 +73,7 @@ async function toJsxNode(node) {
       attr('data-snack-theme', theme),
       attr('data-snack-preview', preview),
       attr('data-snack-loading', loading),
+      attr('data-snack-device-appearance', deviceAppearance),
       attr('data-snack-device-frame', 'false'),
     ],
     children: [],
diff --git a/website/versioned_docs/version-0.77/textinput.md b/website/versioned_docs/version-0.77/textinput.md
index 0b17d801967..c1e74649128 100644
--- a/website/versioned_docs/version-0.77/textinput.md
+++ b/website/versioned_docs/version-0.77/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/website/versioned_docs/version-0.77/view.md b/website/versioned_docs/version-0.77/view.md
index 12a1f870e83..76aeec9ba11 100644
--- a/website/versioned_docs/version-0.77/view.md
+++ b/website/versioned_docs/version-0.77/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>
diff --git a/website/versioned_docs/version-0.78/textinput.md b/website/versioned_docs/version-0.78/textinput.md
index 0b17d801967..c1e74649128 100644
--- a/website/versioned_docs/version-0.78/textinput.md
+++ b/website/versioned_docs/version-0.78/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/website/versioned_docs/version-0.78/view.md b/website/versioned_docs/version-0.78/view.md
index f26406d2412..fd096fb30c5 100644
--- a/website/versioned_docs/version-0.78/view.md
+++ b/website/versioned_docs/version-0.78/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>
diff --git a/website/versioned_docs/version-0.79/textinput.md b/website/versioned_docs/version-0.79/textinput.md
index 8c2424d2e28..aa6ebd21a28 100644
--- a/website/versioned_docs/version-0.79/textinput.md
+++ b/website/versioned_docs/version-0.79/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/website/versioned_docs/version-0.79/view.md b/website/versioned_docs/version-0.79/view.md
index f26406d2412..fd096fb30c5 100644
--- a/website/versioned_docs/version-0.79/view.md
+++ b/website/versioned_docs/version-0.79/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>
diff --git a/website/versioned_docs/version-0.80/textinput.md b/website/versioned_docs/version-0.80/textinput.md
index 2ee26121400..1086ec3d8e9 100644
--- a/website/versioned_docs/version-0.80/textinput.md
+++ b/website/versioned_docs/version-0.80/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/website/versioned_docs/version-0.80/view.md b/website/versioned_docs/version-0.80/view.md
index f26406d2412..fd096fb30c5 100644
--- a/website/versioned_docs/version-0.80/view.md
+++ b/website/versioned_docs/version-0.80/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>
diff --git a/website/versioned_docs/version-0.81/textinput.md b/website/versioned_docs/version-0.81/textinput.md
index 3f407a8d168..97dfad51faf 100644
--- a/website/versioned_docs/version-0.81/textinput.md
+++ b/website/versioned_docs/version-0.81/textinput.md
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        style={[
-          styles.container,
-          {
-            backgroundColor: value,
-          },
-        ]}>
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
         <TextInput
           editable
           multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderBottomColor: '#000',
-    borderBottomWidth: 1,
-  },
   textInput: {
     padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
   },
 });
 
diff --git a/website/versioned_docs/version-0.81/view.md b/website/versioned_docs/version-0.81/view.md
index f26406d2412..fd096fb30c5 100644
--- a/website/versioned_docs/version-0.81/view.md
+++ b/website/versioned_docs/version-0.81/view.md
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 const ViewBoxesWithColorAndText = () => {
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
-        <View style={{backgroundColor: 'blue', flex: 0.2}} />
-        <View style={{backgroundColor: 'red', flex: 0.4}} />
+      <SafeAreaView style={{flexDirection: 'row'}}>
+        <View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
+        <View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
         <Text>Hello World!</Text>
       </SafeAreaView>
     </SafeAreaProvider>