From 8716a019fb9cb2ec7314b56a8243b5b6f2da8cee Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Tue, 4 Feb 2020 16:43:53 -0800
Subject: [PATCH] Create styled-components guide (#6961)

* Create using-styled-components.md

* Update docs/pages/versions/unversioned/guides/using-styled-components.md

Co-Authored-By: Juwan Wheatley <datwheat@gmail.com>

Co-authored-by: Juwan Wheatley <datwheat@gmail.com>
---
 .../guides/using-styled-components.md         | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 docs/pages/versions/unversioned/guides/using-styled-components.md

diff --git a/docs/pages/versions/unversioned/guides/using-styled-components.md b/docs/pages/versions/unversioned/guides/using-styled-components.md
new file mode 100644
index 0000000000000..e68f68e594520
--- /dev/null
+++ b/docs/pages/versions/unversioned/guides/using-styled-components.md
@@ -0,0 +1,86 @@
+---
+title: Using Styled Components with Expo
+---
+
+Styled Components is a CSS-in-JS solution that enables you to create React components with a given style very easily. Using `styled-components` with Expo, you can create universal styles that'll work the same across web, mobile, and desktop!
+
+## Getting Started
+
+Install the package:
+
+```sh
+yarn add styled-components
+```
+
+Use `styled-components/native` instead of `styled-components`:
+
+```tsx
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Container = styled.View`
+  flex: 1;
+  background-color: #fff;
+  align-items: center;
+  justify-content: center;
+`
+const Title = styled.Text`
+  color: #000;
+  text-align: center;
+  font-size: 16px;
+`
+export default () => (
+    <Container>
+        <Title>Hello</Title>
+    </Container>
+)
+```
+
+## Usage with Next.js
+
+Usage with Next.js is a little different because we need to apply the React Native aliases manually, this can be done via `@expo/webpack-config` (which is in `@expo/next-adapter`).
+
+- Add `@expo/next-adapter` to your project:
+
+```sh
+npx @expo/next-adapter
+```
+
+- Install the styled-components Babel plugin:
+
+```sh
+yarn add -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 you would in a regular Expo project!
+
+## Considerations
+
+### 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`.
+
+### Why styled-components/native
+
+Technically you can use `styled-components` directly like this:
+
+```diff
+- import styled from 'styled-components/native';
++ import styled from 'styled-components';
+
+- const Container = styled.View`
++ const Container = styled(View)`
+    background-color: #fff;
+`
+```
+
+But doing this in the browser will throw the error: `Warning: Using the "className" prop on <View> is deprecated.`.