Created styled-components example

with-styled-components/App.js

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components/native";
+import { View, Text } from "react-native";
+
+export default function App() {
+  return (
+    <Container>
+      <Title color="palevioletred">Expo with 💅 Styled Components</Title>
+      <Title color="chocolate">iOS • Android • web</Title>
+    </Container>
+  );
+}
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: papayawhip;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 24px;
+  font-weight: 500;
+  color: ${(props) => props.color};
+`;

with-styled-components/README.md

@@ -0,0 +1,19 @@
+# Styled Components Example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+## 🚀 How to use
+
+- Install with `yarn` or `npm install`.
+- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out.
+
+## 📝 Notes
+
+- [Styled Components docs](https://styled-components.com/)

with-styled-components/package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "expo": "^37.0.7",
+    "react": "16.8.3",
+    "react-dom": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-web": "0.11.7",
+    "styled-components": "^5.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0"
+  }
+}