From 652b6c5f302f99b86168b3f5802a05a1fb6eac26 Mon Sep 17 00:00:00 2001
From: Aman Mittal <amandeepmittal@live.com>
Date: Mon, 26 Jun 2023 17:13:51 +0530
Subject: [PATCH] docs: Add information about Expo and usage with Expo and
 Next.js

---
 sections/basics/react-native.mdx              | 37 ++++++++++++++++++-
 .../NavBar/__snapshots__/Navbar.spec.tsx.snap |  1 +
 .../NavBar/__snapshots__/index.spec.tsx.snap  |  1 +
 .../__snapshots__/DocsLayout.spec.tsx.snap    |  1 +
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/sections/basics/react-native.mdx b/sections/basics/react-native.mdx
index 5c4784a5..ff58f66a 100644
--- a/sections/basics/react-native.mdx
+++ b/sections/basics/react-native.mdx
@@ -1,7 +1,7 @@
 ## React Native
 
 styled-components can be used with React Native in the same way and with the
-same import. Try this example with [Snack by Expo](https://snack.expo.io/@danielmschmidt/styled-components).
+same import. Try this example with [Snack by Expo](https://snack.expo.dev/@danielmschmidt/styled-components).
 
 ```tsx
 import React from 'react'
@@ -58,3 +58,38 @@ nest your CSS.
 ### Simpler usage with the metro bundler
 
 If you'd prefer to just import `styled-components` instead of `styled-components/native`, you can add a [`resolverMainFields` configuration](https://facebook.github.io/metro/docs/configuration#resolvermainfields) that includes `"react-native"`. This used to be supported in metro by default (and currently does work in haul) but appears to have been removed at some point.
+
+## Expo
+
+styled-components can be used in an [Expo](https://github.com/expo/expo) project the same way in a React Native project for native platforms.
+
+### Usage with Expo and Next.js
+
+Using Expo and Next.js to create a [universal app](https://docs.expo.dev/workflow/web/) is a bit different. You'll need to apply the React Native aliases manually. This is done by `@expo/webpack-config` (which is in [`@expo/next-adapter`](https://github.com/expo/expo-cli/tree/main/packages/next-adapter#readme)).
+
+- Add `@expo/next-adapter` to your project:
+
+```sh
+npx @expo/next-adapter
+```
+
+- Install the styled-components Babel plugin:
+
+```sh
+$ npm install -D babel-plugin-styled-components
+```
+
+- Use the Babel plugin in your **babel.config.js** file:
+
+```diff
+module.exports = {
+  presets: ['@expo/next-adapter/babel'],
++ plugins: [['styled-components', { ssr: true }]]
+}
+```
+
+Now you can use `styled-components/native` just like in a regular Expo project!
+
+### Tree-Shaking
+
+styled-components imports all of `react-native-web` which [breaks React Native web tree-shaking](https://github.com/styled-components/styled-components/pull/2797#issuecomment-574955289). This means your bundle size will be larger and include all of the components exported from `react-native-web`.
\ No newline at end of file
diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
index 6a9a4b9a..a723dc3e 100644
--- a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
+++ b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
@@ -165,6 +165,7 @@ exports[`Navbar renders correctly 1`] = `
   align-items: center;
   background-color: rgba(12, 13, 15, 0.7);
   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   box-sizing: border-box;
   color: white;
   display: flex;
diff --git a/test/components/NavBar/__snapshots__/index.spec.tsx.snap b/test/components/NavBar/__snapshots__/index.spec.tsx.snap
index f460a051..bc78a0bc 100644
--- a/test/components/NavBar/__snapshots__/index.spec.tsx.snap
+++ b/test/components/NavBar/__snapshots__/index.spec.tsx.snap
@@ -173,6 +173,7 @@ exports[`Nav renders correctly 1`] = `
   align-items: center;
   background-color: rgba(12, 13, 15, 0.7);
   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   box-sizing: border-box;
   color: white;
   display: flex;
diff --git a/test/components/__snapshots__/DocsLayout.spec.tsx.snap b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
index 330f28e6..cbfc2054 100644
--- a/test/components/__snapshots__/DocsLayout.spec.tsx.snap
+++ b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
@@ -197,6 +197,7 @@ exports[`DocsLayout renders correctly 1`] = `
   align-items: center;
   background-color: rgba(12, 13, 15, 0.7);
   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   box-sizing: border-box;
   color: white;
   display: flex;