Switch to use styled-components themeing API

.prettierrc

@@ -0,0 +1 @@
+trailingComma: "es5"

generators/base/templates/App/App.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import { Platform } from "react-native";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/lib/integration/react";
+import { ThemeProvider } from "styled-components";
+import Theme from "<%= name %>/App/Styles/Theme";
 import Router from "<%= name %>/App/Router";
 import { store, persistor } from "<%= name %>/App/Store";
 import { runSagaMiddleware } from "<%= name %>/App/Store/Middleware/Saga";
@@ -14,17 +16,19 @@ const prefix =
 class <%= name %> extends React.Component<{}> {
   render(): React.Node {
     return (
-      <App>
-        <Provider store={store}>
-          <PersistGate
-            loading={null}
-            onBeforeLift={runSagaMiddleware}
-            persistor={persistor}
-          >
-            <Router uriPrefix={prefix} />
-          </PersistGate>
-        </Provider>
-      </App>
+      <ThemeProvider theme={Theme}>
+        <App>
+          <Provider store={store}>
+            <PersistGate
+              loading={null}
+              onBeforeLift={runSagaMiddleware}
+              persistor={persistor}
+            >
+              <Router uriPrefix={prefix} />
+            </PersistGate>
+          </Provider>
+        </App>
+      </ThemeProvider>
     );
   }
 }

generators/base/templates/App/Components/Button/index.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import { TouchableOpacity } from "react-native";
-import { Container, Text } from "./styles";
+import { Container, ButtonText } from "./styles";
 
 type Props = {
   onPress: Function,
@@ -11,7 +11,7 @@ type Props = {
 const Button = ({ onPress, children }: Props): React.Node => (
   <TouchableOpacity onPress={onPress}>
     <Container>
-      <Text>{children}</Text>
+      <ButtonText>{children}</ButtonText>
     </Container>
   </TouchableOpacity>
 );

generators/base/templates/App/Components/Button/styles.js

@@ -1,16 +1,14 @@
 // @flow
-import styled from 'styled-components';
-import variables from '<%= name %>/App/Styles/Variables';
-
-import RNText from '<%= name %>/App/Components/Text';
+import styled from "styled-components";
+import Text from "<%= name %>/App/Components/Text";
 
 export const Container = styled.View`
   padding: 12px;
-  background-color: ${variables.colors.grey};
+  background-color: ${props => props.theme.colors.grey};
   border-radius: 3px;
 `;
 
-export const Text = styled(RNText)`
-  color: ${variables.colors.white};
+export const ButtonText = styled(Text)`
+  color: ${props => props.theme.colors.white};
   text-align: center;
 `;

generators/base/templates/App/Components/Layout/styles.js

@@ -1,6 +1,5 @@
 // @flow
 import styled, { css } from "styled-components";
-import variables from "<%= name %>/App/Styles/Variables";
 
 const getAlign = (alignment: string): string => {
   switch (alignment) {
@@ -15,8 +14,8 @@ export const View = styled.View``;
 
 export const FullView = styled.View`
   flex: 1;
-  margin-top: ${props => (props.header ? variables.headerHeight : 0)};
-  margin-bottom: ${props => (props.footer ? variables.footerHeight : 0)};
+  margin-top: ${props => (props.header ? props.theme.headerHeight : 0)};
+  margin-bottom: ${props => (props.footer ? props.theme.footerHeight : 0)};
   ${props =>
     props.align &&
     css`
@@ -35,10 +34,10 @@ export const CenterVerticallyView = styled(FullView)`
 `;
 
 export const ScrollView = styled.ScrollView`
-  margin-top: ${props => (props.header ? variables.headerHeight : 0)};
-  margin-bottom: ${props => (props.footer ? variables.footerHeight : 0)};
+  margin-top: ${props => (props.header ? props.theme.headerHeight : 0)};
+  margin-bottom: ${props => (props.footer ? props.theme.footerHeight : 0)};
 `;
 
 export const PaddedView = styled.View`
-  padding: ${variables.spacing}px;
+  padding: ${props => props.theme.spacing}px;
 `;

generators/base/templates/App/Components/Text/styles.js

@@ -1,8 +1,7 @@
 // @flow
-import styled from 'styled-components';
-import variables from '<%= name %>/App/Styles/Variables';
+import styled from "styled-components";
 
 export const Text = styled.Text`
   font-weight: normal;
-  font-family: ${variables.fonts.family}
+  font-family: ${props => props.theme.fonts.family};
 `;

generators/base/templates/App/Components/Utilities/Environment/index.js

@@ -1,21 +1,21 @@
 // @flow
-import * as React from 'react';
-import { Badge, Text } from './styles';
+import * as React from "react";
+import { Badge, EnvText } from "./styles";
 
 type Props = {
-  env: 'development' | 'staging' | 'edge' | 'production' | 'live',
+  env: "development" | "staging" | "edge" | "production" | "live"
 };
 
 function Environment(props: Props): React.Node {
   const { env } = props;
 
-  if (env === 'production') {
+  if (env === "production") {
     return null;
   }
 
   return (
     <Badge env={env}>
-      <Text>{env.charAt(0).toUpperCase()}</Text>
+      <EnvText>{env.charAt(0).toUpperCase()}</EnvText>
     </Badge>
   );
 }

generators/base/templates/App/Components/Utilities/Environment/styles.js

@@ -1,8 +1,7 @@
 // @flow
 import styled, { css } from "styled-components";
 import { isIphoneX } from "react-native-iphone-x-helper";
-import variables from "<%= name %>/App/Styles/Variables";
-import RNText from "<%= name %>/App/Components/Text";
+import Text from "<%= name %>/App/Components/Text";
 
 const SAFE_AREA_BOTTOM = 34;
 
@@ -35,9 +34,9 @@ export const Badge = styled.View`
   border-radius: 4;
 `;
 
-export const Text = styled(RNText)`
+export const EnvText = styled(Text)`
   font-size: 12;
   font-family: "System";
   font-weight: bold;
-  color: ${variables.colors.white};
+  color: ${props => props.theme.colors.white};
 `;