Emotion Native

.flowconfig

@@ -13,6 +13,8 @@
 
 [declarations]
 .*/node_modules/polished/.*
+.*/node_modules/react-native/.*
+
 
 [options]
 suppress_comment=.*\\$FlowFixMe

__mocks__/react-native.js

@@ -0,0 +1,61 @@
+// @flow
+/* eslint-env jest */
+
+let components = [
+  'ActivityIndicator',
+  'ActivityIndicatorIOS',
+  'ART',
+  'Button',
+  'DatePickerIOS',
+  'DrawerLayoutAndroid',
+  'Image',
+  'ImageBackground',
+  'ImageEditor',
+  'ImageStore',
+  'KeyboardAvoidingView',
+  'ListView',
+  'MapView',
+  'Modal',
+  'NavigatorIOS',
+  'Picker',
+  'PickerIOS',
+  'ProgressBarAndroid',
+  'ProgressViewIOS',
+  'ScrollView',
+  'SegmentedControlIOS',
+  'Slider',
+  'SliderIOS',
+  'SnapshotViewIOS',
+  'Switch',
+  'RecyclerViewBackedScrollView',
+  'RefreshControl',
+  'SafeAreaView',
+  'StatusBar',
+  'SwipeableListView',
+  'SwitchAndroid',
+  'SwitchIOS',
+  'TabBarIOS',
+  'Text',
+  'TextInput',
+  'ToastAndroid',
+  'ToolbarAndroid',
+  'Touchable',
+  'TouchableHighlight',
+  'TouchableNativeFeedback',
+  'TouchableOpacity',
+  'TouchableWithoutFeedback',
+  'View',
+  'ViewPagerAndroid',
+  'WebView',
+  'FlatList',
+  'SectionList',
+  'VirtualizedList'
+]
+
+module.exports = {
+  ...jest.requireActual('react-primitives'),
+  ...components.reduce((obj, key) => {
+    obj[key] = key
+    return obj
+  }, {})
+}

__mocks__/react-primitives.js

@@ -0,0 +1,8 @@
+// @flow
+/* eslint-env jest */
+module.exports = {
+  ...jest.requireActual('react-primitives'),
+  View: 'View',
+  Image: 'Image',
+  Text: 'Text'
+}

package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@babel/core": "7.0.0-beta.51",
     "@babel/plugin-external-helpers": "7.0.0-beta.51",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.51",
     "@babel/preset-env": "7.0.0-beta.51",
     "@babel/preset-flow": "7.0.0-beta.51",
     "@babel/preset-react": "7.0.0-beta.51",

packages/native/README.md

@@ -0,0 +1,181 @@
+# @emotion/native
+
+> Style and render React Native components using emotion
+
+## Install
+
+```
+npm install @emotion/native
+```
+
+or if you use yarn
+
+```
+yarn add @emotion/native
+```
+
+This package also depends on `react`, `react-native` and `prop-types` so make sure you've them installed.
+
+## Example
+
+```js
+import React from 'react'
+import { AppRegistry } from 'react-native';
+import styled, { css } from '@emotion/native'
+
+const Container = styled.View`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 50px;
+`
+
+const Description = styled.Text({
+  color: 'hotpink'
+})
+
+const Image = styled.Image`
+  padding: 40px;
+`
+
+const emotionLogo =
+  'https://cdn.rawgit.com/emotion-js/emotion/master/emotion.png'
+
+class App extends React.Component {
+  render() {
+    return (
+      <Container
+        style={css`
+          border-radius: 10px;
+        `}
+      >
+        <Description style={{ fontSize: 45, fontWeight: 'bold' }}>
+          Emotion Primitives
+        </Description>
+        <Image
+          source={{
+            uri: emotionLogo,
+            height: 150,
+            width: 150
+          }}
+        />
+      </Container>
+    )
+  }
+}
+
+AppRegistry.registerComponent('ExampleApp', () => App);
+```
+
+## Theming
+
+Use `emotion-theming` for theming support.
+
+```js
+import React from 'react'
+import styled, { css } from '@emotion/native'
+
+import { ThemeProvider } from 'emotion-theming'
+
+const theme = {
+  color: 'hotpink',
+  backgroundColor: 'purple'
+}
+
+const Container = styled.View`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 50px;
+  border: 5px solid red;
+  background-color: ${props => props.theme.backgroundColor};
+`
+
+const Description = styled.Text({
+  color: 'hotpink'
+})
+
+const Image = styled.Image`
+  padding: 40px;
+`
+
+const emotionLogo =
+  'https://cdn.rawgit.com/emotion-js/emotion/master/emotion.png'
+
+class App extends React.Component {
+  render() {
+    return (
+      <ThemeProvider theme={theme}>
+        <Container
+          style={css`
+            border-radius: 10px;
+          `}
+        >
+          <Description style={{ fontSize: 45, fontWeight: 'bold' }}>
+            Emotion Primitives
+          </Description>
+          <Image
+            source={{
+              uri: emotionLogo,
+              height: 150,
+              width: 150
+            }}
+          />
+        </Container>
+      </ThemeProvider>
+    )
+  }
+}
+```
+
+## Usage with `react-360`
+
+`@emotion/native` can also be used with `react-360` for styling VR applications. Check out [this](https://facebook.github.io/react-360/docs/setup.html) guide for setting up a `react-360` project.
+
+### Example
+
+```js
+import React from 'react';
+import { AppRegistry, StyleSheet, Text, View } from 'react-360';
+import styled from '@emotion/native';
+
+const StyledName = styled.Text`
+	font-size: 40px;
+	color: hotpink;
+`;
+
+export default class App extends React.Component {
+	render() {
+		return (
+			<View style={styles.panel}>
+				<View style={styles.greetingBox}>
+					<StyledName>Emotion Native</StyledName>
+				</View>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	panel: {
+		// Fill the entire surface
+		width: 1000,
+		height: 600,
+		backgroundColor: 'rgba(255, 255, 255, 0.4)',
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	greetingBox: {
+		padding: 20,
+		backgroundColor: '#000000',
+		borderColor: '#639dda',
+		borderWidth: 2,
+	},
+	greeting: {
+		fontSize: 30,
+	},
+});
+
+AppRegistry.registerComponent('App', () => App);
+
+```

packages/native/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@emotion/native",
+	"version": "1.0.0",
+	"description": "Style and render React Native components using emotion",
+	"main": "dist/index.cjs.js",
+	"module": "dist/index.esm.js",
+	"files": ["src", "dist"],
+	"devDependencies": {
+		"emotion-theming": "^9.2.5",
+		"react": "^16.4.1",
+		"react-native": "^0.56.0"
+	},
+	"dependencies": {
+		"@emotion/primitives-core": "1.0.0"
+	},
+	"peerDependencies": {
+		"prop-types": "15.x",
+		"react": "15.x || 16.x",
+		"react-native": ">=0.14.0 && < 1"
+	},
+	"homepage": "https://emotion.sh",
+	"license": "MIT",
+	"repository": "https://github.com/emotion-js/emotion/tree/master/packages/native",
+	"keywords": ["styles", "emotion", "react", "css", "css-in-js", "native"],
+	"bugs": {
+		"url": "https://github.com/emotion-js/emotion/issues"
+	}
+}

packages/native/src/index.js

@@ -0,0 +1,71 @@
+import reactNative from 'react-native'
+import { createCss } from '@emotion/primitives-core'
+
+import { styled } from './styled'
+
+const css = createCss(reactNative.StyleSheet)
+
+const components = [
+  'ActivityIndicator',
+  'ActivityIndicatorIOS',
+  'ART',
+  'Button',
+  'DatePickerIOS',
+  'DrawerLayoutAndroid',
+  'Image',
+  'ImageBackground',
+  'ImageEditor',
+  'ImageStore',
+  'KeyboardAvoidingView',
+  'ListView',
+  'MapView',
+  'Modal',
+  'NavigatorIOS',
+  'Picker',
+  'PickerIOS',
+  'ProgressBarAndroid',
+  'ProgressViewIOS',
+  'ScrollView',
+  'SegmentedControlIOS',
+  'Slider',
+  'SliderIOS',
+  'SnapshotViewIOS',
+  'Switch',
+  'RecyclerViewBackedScrollView',
+  'RefreshControl',
+  'SafeAreaView',
+  'StatusBar',
+  'SwipeableListView',
+  'SwitchAndroid',
+  'SwitchIOS',
+  'TabBarIOS',
+  'Text',
+  'TextInput',
+  'ToastAndroid',
+  'ToolbarAndroid',
+  'Touchable',
+  'TouchableHighlight',
+  'TouchableNativeFeedback',
+  'TouchableOpacity',
+  'TouchableWithoutFeedback',
+  'View',
+  'ViewPagerAndroid',
+  'WebView',
+  'FlatList',
+  'SectionList',
+  'VirtualizedList'
+]
+
+export { css }
+
+export default components.reduce(
+  (acc, comp) =>
+    Object.defineProperty(acc, comp, {
+      enumerable: true,
+      configurable: false,
+      get() {
+        return styled(reactNative[comp])
+      }
+    }),
+  styled
+)

packages/native/src/styled.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+import { createStyled } from '@emotion/primitives-core'
+
+/**
+ * a function that returns a styled component which render styles in React Native
+ */
+let styled = createStyled(StyleSheet)
+
+export { styled }