diff --git a/docs/guides/style.md b/docs/guides/style.md
index 7d54b941..6e02fc05 100644
--- a/docs/guides/style.md
+++ b/docs/guides/style.md
@@ -148,8 +148,8 @@ styles defined using `StyleSheet.create` will ultimately be rendered using CSS
 class names.
 
 React Native for Web introduced a novel strategy to achieve this. Each rule is
-broken down into declarations, properties are expanded to their long-form, and
-the resulting key-value pairs are mapped to unique "atomic CSS" class names.
+broken down into declarations and the resulting key-value pairs are mapped to
+unique "atomic CSS" class names.
 
 Input:
 
@@ -158,7 +158,9 @@ const Box = () => <View style={styles.box} />
 
 const styles = StyleSheet.create({
   box: {
-    margin: 0
+    backgroundColor: 'red',
+    height: 100,
+    width: 100,
   }
 });
 ```
@@ -167,13 +169,12 @@ Output:
 
 ```html
 <style>
-.rn-1mnahxq { margin-top: 0px; }
-.rn-61z16t { margin-right: 0px; }
-.rn-p1pxzi { margin-bottom: 0px; }
-.rn-11wrixw { margin-left: 0px; }
+.r-1mnahxq { background-color: red; }
+.r-p1pxzi { height: 100px; }
+.r-61z16t { width: 100px; }
 </style>
 
-<div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw"></div>
+<div class="rn-156q2ks rn-61z16t rn-p1pxzi"></div>
 ```
 
 This ensures that CSS order doesn't impact rendering and CSS rules are
@@ -226,6 +227,6 @@ handled at the component-level.
 
 ### What about using Dev Tools?
 
-React Dev Tools supports inspecting and editing of React Native styles. It's
+React Dev Tools supports inspecting of React Native styles. It's
 recommended that you rely more on React Dev Tools and live/hot-reloading rather
 than inspecting and editing the DOM directly.
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
index 928eba45..e53cc7db 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -2,28 +2,28 @@
 
 exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": Additional CSS for styled app 1`] = `
 "
-.rn-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00)}
-.rn-borderTopWidth-10pzpfo{border-top-width:1234px}
-.rn-borderRightWidth-1y24uml{border-right-width:1234px}
-.rn-borderBottomWidth-98wxn4{border-bottom-width:1234px}
-.rn-borderLeftWidth-150mub4{border-left-width:1234px}"
+.r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00)}
+.r-borderTopWidth-10pzpfo{border-top-width:1234px}
+.r-borderRightWidth-1y24uml{border-right-width:1234px}
+.r-borderBottomWidth-98wxn4{border-bottom-width:1234px}
+.r-borderLeftWidth-150mub4{border-left-width:1234px}"
 `;
 
 exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": CSS for an unstyled app 1`] = `
-":focus:not([data-rn-focusvisible-x92cna]){outline: none;}
+":focus:not([data-r-focusvisible-x92cna]){outline: none;}
 @media all{
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-.rn-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
-.rn-pointer{cursor:pointer;}
+.r-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
+.r-pointer{cursor:pointer;}
 }
-.rn-pointerEvents-12vffkv > *{pointer-events:auto}
-.rn-pointerEvents-12vffkv{pointer-events:none !important}
-.rn-flexGrow-16y2uox{-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}
-.rn-flexShrink-1wbh5a2{-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1}
-.rn-flexBasis-1ro0kt6{-ms-flex-preferred-size:0%;-webkit-flex-basis:0%;flex-basis:0%}"
+.r-pointerEvents-12vffkv > *{pointer-events:auto}
+.r-pointerEvents-12vffkv{pointer-events:none !important}
+.r-flexGrow-16y2uox{-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}
+.r-flexShrink-1wbh5a2{-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1}
+.r-flexBasis-1ro0kt6{-ms-flex-preferred-size:0%;-webkit-flex-basis:0%;flex-basis:0%}"
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
@@ -35,20 +35,20 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`]
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
-"<style id=\\"react-native-stylesheet\\">:focus:not([data-rn-focusvisible-x92cna]){outline: none;}
+"<style id=\\"react-native-stylesheet\\">:focus:not([data-r-focusvisible-x92cna]){outline: none;}
 @media all{
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-.rn-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
-.rn-pointer{cursor:pointer;}
+.r-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
+.r-pointer{cursor:pointer;}
 }
-.rn-ui-textinput-11ngujt{-moz-appearance:textfield;-webkit-appearance:none;background-color:transparent;border-radius:0px;border:0 solid black;box-sizing:border-box;font-family:14px System;padding:0px;resize:none}
-.rn-ui-textSingleLine-1xjj19i{max-width:100%;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
-.rn-ui-textHasAncestor-z2plr{color:inherit;font:inherit;text-decoration:inherit;white-space:inherit}
-.rn-ui-textIsRoot-gw3a6r{color:black;font:normal 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif;text-decoration:none;white-space:pre-wrap}
-.rn-ui-text-1ntzlq4{background-color:transparent;border-width:0px;box-sizing:border-box;display:inline;margin:0px;padding:0px;text-align:inherit;word-wrap:break-word}
-.rn-ui-hitSlop-14nrb4u{bottom:0px;left:0px;position:absolute;right:0px;top:0px;z-index:-1}
-.rn-ui-view-15pvbv0{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;background-color:transparent;border:0 solid black;box-sizing:border-box;color:inherit;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;font:inherit;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;z-index:0}</style>"
+.r-ui-textinput-14mbsun{-moz-appearance:textfield;-webkit-appearance:none;background-color:transparent;border-radius:0px;border:0 solid black;box-sizing:border-box;font-family:14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif;padding:0px;resize:none}
+.r-ui-textSingleLine-1xjj19i{max-width:100%;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
+.r-ui-textHasAncestor-z2plr{color:inherit;font:inherit;text-decoration:inherit;white-space:inherit}
+.r-ui-textIsRoot-gw3a6r{color:black;font:normal 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif;text-decoration:none;white-space:pre-wrap}
+.r-ui-text-1ntzlq4{background-color:transparent;border-width:0px;box-sizing:border-box;display:inline;margin:0px;padding:0px;text-align:inherit;word-wrap:break-word}
+.r-ui-hitSlop-14nrb4u{bottom:0px;left:0px;position:absolute;right:0px;top:0px;z-index:-1}
+.r-ui-view-15pvbv0{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;background-color:transparent;border:0 solid black;box-sizing:border-box;color:inherit;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;font:inherit;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;z-index:0}</style>"
 `;
diff --git a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
index a5a042ce..0dbd27fa 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
@@ -10,7 +10,7 @@ exports[`components/Picker prop "children" items 1`] = `
 
 exports[`components/Picker prop "children" renders items 1`] = `
 <select
-  className="rn-fontFamily-14xgk7a rn-fontSize-7cikom rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw"
+  className="r-fontFamily-14xgk7a r-fontSize-7cikom r-marginTop-1mnahxq r-marginRight-61z16t r-marginBottom-p1pxzi r-marginLeft-11wrixw"
   data-focusable={true}
   onChange={[Function]}
 >
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
index fbfe6a8d..260b7487 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
@@ -17,7 +17,7 @@ const STYLE_ELEMENT_ID = 'react-native-stylesheet';
 
 const createClassName = (name, value) => {
   const hashed = hash(name + normalizeValue(value));
-  return process.env.NODE_ENV !== 'production' ? `rn-${name}-${hashed}` : `rn-${hashed}`;
+  return process.env.NODE_ENV !== 'production' ? `r-${name}-${hashed}` : `r-${hashed}`;
 };
 
 const normalizeValue = value => (typeof value === 'object' ? JSON.stringify(value) : value);
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
index fe72af72..2478d838 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
@@ -3,102 +3,102 @@
 exports[`StyleSheet/ReactNativeStyleResolver resolve resolves inline-style pointerEvents to classname 1`] = `
 Object {
   "classList": Array [
-    "rn-pointerEvents-12vffkv",
+    "r-pointerEvents-12vffkv",
   ],
-  "className": "rn-pointerEvents-12vffkv",
+  "className": "r-pointerEvents-12vffkv",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register before RTL, resolves to correct className 1`] = `
 Object {
   "classList": Array [
-    "rn-marginRight-zso239",
-    "rn-right-1bnbe1j",
-    "rn-textAlign-1ff274t",
+    "r-marginRight-zso239",
+    "r-right-1bnbe1j",
+    "r-textAlign-1ff274t",
   ],
-  "className": "rn-marginRight-zso239 rn-right-1bnbe1j rn-textAlign-1ff274t",
+  "className": "r-marginRight-zso239 r-right-1bnbe1j r-textAlign-1ff274t",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register before RTL, resolves to correct className 2`] = `
 Object {
   "classList": Array [
-    "rn-left-2s0hu9",
-    "rn-marginLeft-1n0xq6e",
-    "rn-textAlign-fdjqy7",
+    "r-left-2s0hu9",
+    "r-marginLeft-1n0xq6e",
+    "r-textAlign-fdjqy7",
   ],
-  "className": "rn-left-2s0hu9 rn-marginLeft-1n0xq6e rn-textAlign-fdjqy7",
+  "className": "r-left-2s0hu9 r-marginLeft-1n0xq6e r-textAlign-fdjqy7",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 1`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
-    "rn-width-b8lwoo",
+    "r-borderTopColor-3vzq9n",
+    "r-borderRightColor-ycnuvz",
+    "r-borderBottomColor-wqks8h",
+    "r-borderLeftColor-3se2kx",
+    "r-borderTopWidth-13yce4e",
+    "r-borderRightWidth-fnigne",
+    "r-borderBottomWidth-ndvcnb",
+    "r-borderLeftWidth-gxnn5r",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
+    "r-width-b8lwoo",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
+  "className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 2`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
-    "rn-width-l0gwng",
+    "r-borderTopColor-3vzq9n",
+    "r-borderRightColor-ycnuvz",
+    "r-borderBottomColor-wqks8h",
+    "r-borderLeftColor-3se2kx",
+    "r-borderTopWidth-13yce4e",
+    "r-borderRightWidth-fnigne",
+    "r-borderBottomWidth-ndvcnb",
+    "r-borderLeftWidth-gxnn5r",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
+    "r-width-l0gwng",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
+  "className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 3`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
-    "rn-width-b8lwoo",
+    "r-borderTopColor-3vzq9n",
+    "r-borderRightColor-ycnuvz",
+    "r-borderBottomColor-wqks8h",
+    "r-borderLeftColor-3se2kx",
+    "r-borderTopWidth-13yce4e",
+    "r-borderRightWidth-fnigne",
+    "r-borderBottomWidth-ndvcnb",
+    "r-borderLeftWidth-gxnn5r",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
+    "r-width-b8lwoo",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
+  "className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 1`] = `
 Object {
   "classList": Array [
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
   ],
-  "className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
+  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
   "style": Object {
     "borderBottomColor": "rgba(255,0,0,1.00)",
     "borderBottomWidth": "0px",
@@ -116,12 +116,12 @@ Object {
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 2`] = `
 Object {
   "classList": Array [
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
-    "rn-width-l0gwng",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
+    "r-width-l0gwng",
   ],
-  "className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
+  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
   "style": Object {
     "borderBottomColor": "rgba(255,0,0,1.00)",
     "borderBottomWidth": "0px",
@@ -138,11 +138,11 @@ Object {
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 3`] = `
 Object {
   "classList": Array [
-    "rn-left-1tsx3h3",
-    "rn-opacity-icoktb",
-    "rn-position-u8s1d",
+    "r-left-1tsx3h3",
+    "r-opacity-icoktb",
+    "r-position-u8s1d",
   ],
-  "className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
+  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
   "style": Object {
     "borderBottomColor": "rgba(255,0,0,1.00)",
     "borderBottomWidth": "0px",
@@ -222,7 +222,7 @@ Object {
 
 exports[`StyleSheet/ReactNativeStyleResolver resolveWithNode next class names have priority over current inline styles 1`] = `
 Object {
-  "className": "rn-opacity-6dt33c",
+  "className": "r-opacity-6dt33c",
   "style": Object {
     "opacity": "",
   },
@@ -270,7 +270,7 @@ Object {
 
 exports[`StyleSheet/ReactNativeStyleResolver resolveWithNode when isRTL=true, resolves to flipped classNames 1`] = `
 Object {
-  "className": "rn-left-1u10d71 rn-marginRight-zso239",
+  "className": "r-left-1u10d71 r-marginRight-zso239",
   "style": Object {
     "marginRight": "",
     "right": "5px",
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
index 31c22f58..c1959cd2 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
@@ -5,15 +5,15 @@ exports[`StyleSheet/StyleSheetManager getClassName 1`] = `undefined`;
 exports[`StyleSheet/StyleSheetManager getStyleSheet 1`] = `
 Object {
   "id": "react-native-stylesheet",
-  "textContent": ":focus:not([data-rn-focusvisible-x92cna]){outline: none;}
+  "textContent": ":focus:not([data-r-focusvisible-x92cna]){outline: none;}
 @media all{
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-.rn-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
-.rn-pointer{cursor:pointer;}
+.r-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;}
+.r-pointer{cursor:pointer;}
 }
-.rn---test-property-ax3bxi{--test-property:test-value}",
+.r---test-property-ax3bxi{--test-property:test-value}",
 }
 `;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
index 1a5c1b5f..12d9a66d 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
@@ -2,11 +2,11 @@
 
 exports[`StyleSheet/createAtomicRules transforms custom "animationName" declaration 1`] = `
 Array [
-  "@-webkit-keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
-  "@keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
-  "@-webkit-keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
-  "@keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
-  ".test{-webkit-animation-name:rn-anim-2k74q5,rn-anim-zc91cv;animation-name:rn-anim-2k74q5,rn-anim-zc91cv}",
+  "@-webkit-keyframes r-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
+  "@keyframes r-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
+  "@-webkit-keyframes r-anim-zc91cv{from{left:0px}to{left:10px}}",
+  "@keyframes r-anim-zc91cv{from{left:0px}to{left:10px}}",
+  ".test{-webkit-animation-name:r-anim-2k74q5,r-anim-zc91cv;animation-name:r-anim-2k74q5,r-anim-zc91cv}",
 ]
 `;
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js b/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js
index 537f5d54..1f058004 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js
@@ -7,7 +7,7 @@ const hashObject = obj => hash(JSON.stringify(obj));
 
 const createIdentifier = obj => {
   const hashed = hashObject(obj);
-  return process.env.NODE_ENV !== 'production' ? `rn-anim-${hashed}` : `rn-${hashed}`;
+  return process.env.NODE_ENV !== 'production' ? `r-anim-${hashed}` : `r-${hashed}`;
 };
 
 const prefixes = ['-webkit-', ''];
diff --git a/packages/react-native-web/src/exports/StyleSheet/initialRules.js b/packages/react-native-web/src/exports/StyleSheet/initialRules.js
index 1ca82cc4..acbdaae8 100644
--- a/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+++ b/packages/react-native-web/src/exports/StyleSheet/initialRules.js
@@ -29,7 +29,7 @@ const resets = [
     'display:none;' +
     '}',
   // Reset styles for heading, link, and list DOM elements
-  '.rn-reset{' +
+  '.r-reset{' +
     'background-color:transparent;' +
     'color:inherit;' +
     'font:inherit;' +
@@ -39,7 +39,7 @@ const resets = [
     'text-decoration:none;' +
     '}',
   // For pressable elements
-  '.rn-pointer{cursor:pointer;}'
+  '.r-pointer{cursor:pointer;}'
 ];
 
 const reset = [safeRule(resets.join('\n'))];
diff --git a/packages/react-native-web/src/exports/StyleSheet/modality.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
index bb7b276c..4ecc2414 100644
--- a/packages/react-native-web/src/exports/StyleSheet/modality.js
+++ b/packages/react-native-web/src/exports/StyleSheet/modality.js
@@ -22,9 +22,7 @@ import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import hash from '../../vendor/hash';
 
 const focusVisibleAttributeName =
-  'data-rn-' +
-  (process.env.NODE_ENV !== 'production' ? 'focusvisible-' : '') +
-  hash('focusvisible');
+  'data-r-' + (process.env.NODE_ENV !== 'production' ? 'focusvisible-' : '') + hash('focusvisible');
 
 const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
 
diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
index 5fa4b210..97963d5a 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`components/Text prop "children" 1`] = `
 <span
-  class="rn-ui-text-1ntzlq4 rn-ui-textHasAncestor-z2plr"
+  class="r-ui-text-1ntzlq4 r-ui-textHasAncestor-z2plr"
   data-testid="child"
   dir="auto"
 />
@@ -10,7 +10,7 @@ exports[`components/Text prop "children" 1`] = `
 
 exports[`components/Text prop "onPress" 1`] = `
 <div
-  className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r rn-cursor-1loqt21"
+  className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r r-cursor-1loqt21"
   data-focusable={true}
   dir="auto"
   onClick={[Function]}
@@ -21,14 +21,14 @@ exports[`components/Text prop "onPress" 1`] = `
 
 exports[`components/Text prop "selectable" 1`] = `
 <div
-  className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r"
+  className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "selectable" 2`] = `
 <div
-  className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r rn-userSelect-lrvibr"
+  className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r r-userSelect-lrvibr"
   dir="auto"
 />
 `;
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
index 742ae014..5f64c00c 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`modules/createDOMProps includes "rel" values for "a" elements (to securely open external links) 1`] = `" noopener noreferrer"`;
 
-exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"rn-reset"`;
+exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"r-reset"`;
 
-exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"rn-reset"`;
+exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"r-reset"`;
 
-exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"rn-reset"`;
+exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"r-reset"`;
 
-exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"rn-reset"`;
+exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"r-reset"`;
 
-exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"rn-pointer"`;
+exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"r-pointer"`;
 
-exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"rn-pointer"`;
+exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"r-pointer"`;
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index ea67b8a0..087c515e 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -137,7 +137,7 @@ const createDOMProps = (component, props, styleResolver) => {
   let c;
   // style interactive elements for mouse and mobile browsers
   if ((role === 'button' || role === 'link') && !disabled) {
-    c = 'rn-pointer';
+    c = 'r-pointer';
   }
   // style reset various elements (not all are used internally)
   if (
@@ -147,7 +147,7 @@ const createDOMProps = (component, props, styleResolver) => {
     component === 'ul' ||
     role === 'heading'
   ) {
-    c = 'rn-reset' + (c != null ? ' ' + c : '');
+    c = 'r-reset' + (c != null ? ' ' + c : '');
   }
   // style from createElement use
   if (props.className != null) {