first commit

App.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createAppContainer } from 'react-navigation';
+
+import SmartHome from './navigation/SmartHome';
+
+export default createAppContainer(SmartHome);

README.md

@@ -0,0 +1,7 @@
+# SmartHomeUI
+
+## Install NodeModules
+  - `npm install`
+
+## Starts the App server.
+  - `npm start`

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "HomeUI",
+    "slug": "my-new-project",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/Block.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default class Block extends Component {
+  render() {
+    const { flex, row, column, center, middle, right, space, style, children, ...props } = this.props;
+    const blockStyles = [
+      styles.block,
+      flex && { flex },
+      flex === 'disabled' && { flex: 0 },
+      center && styles.center,
+      middle && styles.middle,
+      right && styles.right,
+      space && { justifyContent: `space-${space}` },
+      row && styles.row,
+      column && styles.column,
+      style,
+    ];
+
+    return (
+      <View style={blockStyles} {...props}>
+        {children}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  block: {
+    // flex: 1,
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  },
+  center: {
+    alignItems: 'center'
+  },
+  middle: {
+    justifyContent: 'center'
+  },
+  right: {
+    justifyContent: 'flex-end'
+  },
+});

components/Button.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  View,
+  Text,
+  Dimensions
+} from 'react-native';
+
+const { width } = Dimensions.get('window')
+const Button = ({
+  placeholder = "",
+  placeholderTextColor = 'white',
+  imgUrl,
+  onPress,
+}) => {
+  const Touchable =
+    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+  return (<Touchable onPress={onPress}>
+    <View style={styles.btnView}>
+      <Text style={{
+        color: 'white',
+        fontSize: 20,
+      }}>Login</Text>
+    </View>
+  </Touchable>)
+}
+
+export default Button
+
+const styles = StyleSheet.create({
+  btnView: {
+    marginTop: 25,
+    height: 55,
+    width: 180,
+    alignItems: 'center',
+    borderRadius: 50,
+    justifyContent: 'center',
+    backgroundColor: 'grey',
+  }
+});

components/Input.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import { TextInput, View, StyleSheet, Image } from 'react-native';
+
+const Input = ({
+  placeholder = "",
+  placeholderTextColor = 'white',
+  imgUrl,
+}) => <View style={styles.textInput}>
+    <TextInput
+      style={{
+        fontSize: 25,
+        height: 50,
+        flex: 1,
+        color: 'white'
+      }}
+      autoCorrect={false}
+      spellCheck={false}
+      underlineColorAndroid='transparent'
+      placeholder={placeholder}
+      placeholderTextColor='grey'
+    />
+  </View>
+
+export default Input
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 25,
+    height: 25,
+    marginRight: 15,
+  },
+  textInput: {
+    alignItems: 'center',
+    borderRadius: 10,
+    flexDirection: 'row',
+    borderWidth: 0.5,
+    paddingLeft: 15,
+    // paddingRigth: 15,
+    marginBottom: 10,
+    backgroundColor: 'white',
+  }
+});

components/PanSlider.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+import { StyleSheet, PanResponder, Dimensions } from 'react-native'
+
+import * as theme from '../theme';
+import Block from './Block';
+import Text from './Text';
+
+const { height } = Dimensions.get('window');
+const CONTROLLER_HEIGHT = height * 0.25;
+
+class PanSlider extends Component {
+  state = { 
+    panValue: 0,
+    rangeValue: 0,
+    percentage: 0,
+  }
+
+  handleMove = moveValue => {
+    const { panValue } = this.state;
+    const { minValue, maxValue } = this.props;
+    const max = maxValue > CONTROLLER_HEIGHT ? maxValue : CONTROLLER_HEIGHT;
+    const range = (maxValue || max) - minValue;
+
+    let value = panValue - (moveValue / range);
+    if (value > max) value = max;
+    if (value < minValue) value = minValue;
+
+    const percentage = (value / max) * 100;
+    const rangeValue = (range * percentage) / 100;
+
+    this.setState({ panValue: value, rangeValue, percentage });
+  }
+
+  panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onStartShouldSetPanResponderCapture: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderMove: (evt, { dy }) => this.handleMove(dy)
+  })
+
+  render() {
+    const { minValue } = this.props;
+    const { rangeValue, percentage } = this.state;
+
+    return (
+      <Block right {...this.panResponder.panHandlers} style={styles.controller}>
+        <Block center style={styles.controllerValue}>
+          <Text weight="600" color="black">
+            {rangeValue ? rangeValue.toFixed(0) : minValue}
+          </Text>
+        </Block>
+        <Block style={[styles.controllerOverlay, { height: `${percentage || minValue}%` }]} />
+      </Block>
+    )
+  }
+}
+
+PanSlider.defaultProps = {
+  minValue: 10,
+  maxValue: 45,
+}
+
+export default PanSlider;
+
+const styles = StyleSheet.create({
+  controller: {
+    width: 85,
+    height: CONTROLLER_HEIGHT,
+    borderRadius: 10,
+    backgroundColor: theme.colors.gray2,
+    alignContent: 'center',
+    overflow: 'hidden'
+  },
+  controllerValue: {
+    position: 'absolute',
+    top: 24,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  controllerOverlay: {
+    width: 85,
+    backgroundColor: theme.colors.accent,
+  }
+})

components/Text.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { StyleSheet, Text } from 'react-native'
+import * as theme from '../theme';
+
+export default class Typography extends Component {
+  render() {
+    const {
+      center,
+      right,
+      color,
+      size,
+      height,
+      weight,
+      spacing,
+      h1,
+      welcome,
+      name,
+      caption,
+      medium,
+      bold,
+      light,
+      italic,
+      button,
+      style,
+      children,
+      ...props
+    } = this.props;
+
+    const textStyles = [
+      styles.text,
+      h1 && styles.h1,
+      welcome && styles.welcome,
+      name && styles.name,
+      button && styles.button,
+      center && styles.center,
+      right && styles.right,
+      color && { color },
+      color && color === 'accent' && styles.accent,
+      color && color === 'black' && styles.black,
+      color && color === 'white' && styles.white,
+      color && color === 'gray' && styles.gray,
+      size && { fontSize: size },
+      bold && styles.bold,
+      light && styles.light,
+      caption && styles.caption,
+      height && { lineHeight: height },
+      weight && { fontWeight: weight },
+      spacing && { letterSpacing: spacing },
+      style
+    ];
+
+    return (
+      <Text style={textStyles} {...props}>
+        {children}
+      </Text>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: theme.sizes.font,
+    color: theme.colors.black,
+  },
+  bold: { fontWeight: 'bold' },
+  light: { fontWeight: '200' },
+  center: { textAlign: 'center' },
+  right: { textAlign: 'right' },
+  black: { color: theme.colors.black, },
+  white: { color: theme.colors.white, },
+  gray: { color: theme.colors.gray, },
+  welcome: theme.fonts.welcome,
+  name: theme.fonts.name,
+  h1: theme.fonts.h1,
+  button: theme.fonts.button,
+  caption: theme.fonts.caption,
+});

components/index.js

@@ -0,0 +1,9 @@
+import Block from './Block';
+import Text from './Text';
+import PanSlider from './PanSlider';
+
+export {
+  Block,
+  Text,
+  PanSlider,
+}

navigation/SmartHome.js

@@ -0,0 +1,15 @@
+
+import React from 'react';
+import { createStackNavigator } from 'react-navigation-stack';
+
+import Dashboard from '../screens/Dashboard';
+import Settings from '../screens/Settings';
+import Login from '../screens/Login';
+
+export default createStackNavigator({
+  Login,
+  Dashboard,
+  Settings,
+}, {
+    initialRouteName: 'Login'
+  });