diff --git a/App.js b/App.js new file mode 100644 index 0000000..cb3700d --- /dev/null +++ b/App.js @@ -0,0 +1,6 @@ +import React from 'react'; +import { createAppContainer } from 'react-navigation'; + +import SmartHome from './navigation/SmartHome'; + +export default createAppContainer(SmartHome); \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..71a8da4 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# SmartHomeUI + +## Install NodeModules + - `npm install` + +## Starts the App server. + - `npm start` diff --git a/app.json b/app.json new file mode 100644 index 0000000..06d0f2e --- /dev/null +++ b/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 + } + } +} diff --git a/assets/icon.png b/assets/icon.png new file mode 100644 index 0000000..7f5e01c Binary files /dev/null and b/assets/icon.png differ diff --git a/assets/smart.png b/assets/smart.png new file mode 100644 index 0000000..654f46d Binary files /dev/null and b/assets/smart.png differ diff --git a/assets/splash.png b/assets/splash.png new file mode 100644 index 0000000..4f9ade6 Binary files /dev/null and b/assets/splash.png differ diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..2900afe --- /dev/null +++ b/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/components/Block.js b/components/Block.js new file mode 100644 index 0000000..4c1b34e --- /dev/null +++ b/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 ( + + {children} + + ) + } +} + +const styles = StyleSheet.create({ + block: { + // flex: 1, + }, + row: { + flexDirection: 'row' + }, + column: { + flexDirection: 'column' + }, + center: { + alignItems: 'center' + }, + middle: { + justifyContent: 'center' + }, + right: { + justifyContent: 'flex-end' + }, +}); \ No newline at end of file diff --git a/components/Button.js b/components/Button.js new file mode 100644 index 0000000..9da53e6 --- /dev/null +++ b/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 ( + + Login + + ) +} + +export default Button + +const styles = StyleSheet.create({ + btnView: { + marginTop: 25, + height: 55, + width: 180, + alignItems: 'center', + borderRadius: 50, + justifyContent: 'center', + backgroundColor: 'grey', + } +}); \ No newline at end of file diff --git a/components/Buttons.js b/components/Buttons.js new file mode 100644 index 0000000..e69de29 diff --git a/components/Input.js b/components/Input.js new file mode 100644 index 0000000..880b6a5 --- /dev/null +++ b/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, +}) => + + + +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', + } +}); \ No newline at end of file diff --git a/components/PanSlider.js b/components/PanSlider.js new file mode 100644 index 0000000..f57781d --- /dev/null +++ b/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 ( + + + + {rangeValue ? rangeValue.toFixed(0) : minValue} + + + + + ) + } +} + +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, + } +}) diff --git a/components/Text.js b/components/Text.js new file mode 100644 index 0000000..7502e04 --- /dev/null +++ b/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 ( + + {children} + + ) + } +} + +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, +}); \ No newline at end of file diff --git a/components/index.js b/components/index.js new file mode 100644 index 0000000..fee3d86 --- /dev/null +++ b/components/index.js @@ -0,0 +1,9 @@ +import Block from './Block'; +import Text from './Text'; +import PanSlider from './PanSlider'; + +export { + Block, + Text, + PanSlider, +} \ No newline at end of file diff --git a/navigation/SmartHome.js b/navigation/SmartHome.js new file mode 100644 index 0000000..18043ea --- /dev/null +++ b/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' + }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..54fb422 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,325 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "1.9.3" + } + }, + "camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" + }, + "cliui": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", + "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", + "requires": { + "string-width": "3.1.0", + "strip-ansi": "5.2.0", + "wrap-ansi": "5.1.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "d3-array": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", + "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==" + }, + "d3-collection": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz", + "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==" + }, + "d3-color": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz", + "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg==" + }, + "d3-format": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz", + "integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww==" + }, + "d3-interpolate": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", + "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==", + "requires": { + "d3-color": "1.4.0" + } + }, + "d3-interpolate-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.0.0.tgz", + "integrity": "sha1-ywMnMU/tsU5uoXiat+CVoWwvirI=", + "requires": { + "d3-interpolate": "1.4.0" + } + }, + "d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "d3-scale": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz", + "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==", + "requires": { + "d3-array": "1.2.4", + "d3-collection": "1.0.7", + "d3-color": "1.4.0", + "d3-format": "1.4.2", + "d3-interpolate": "1.4.0", + "d3-time": "1.1.0", + "d3-time-format": "2.2.2" + } + }, + "d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "requires": { + "d3-path": "1.0.9" + } + }, + "d3-time": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", + "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==" + }, + "d3-time-format": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.2.tgz", + "integrity": "sha512-pweL2Ri2wqMY+wlW/wpkl8T3CUzKAha8S9nmiQlMABab8r5MJN0PD1V4YyRNVaKQfeh4Z0+VO70TLw6ESVOYzw==", + "requires": { + "d3-time": "1.1.0" + } + }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" + }, + "emoji-regex": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" + }, + "find-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", + "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "requires": { + "locate-path": "3.0.0" + } + }, + "get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "locate-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", + "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "requires": { + "p-locate": "3.0.0", + "path-exists": "3.0.0" + } + }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "p-limit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", + "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "requires": { + "p-try": "2.2.0" + } + }, + "p-locate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", + "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "requires": { + "p-limit": "2.2.1" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" + }, + "path-exists": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "1.4.0", + "object-assign": "4.1.1", + "react-is": "16.12.0" + } + }, + "react-is": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", + "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" + }, + "react-native-svg-charts": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-native-svg-charts/-/react-native-svg-charts-5.3.0.tgz", + "integrity": "sha512-XxKDqMdOl8EhQGhLAzWtmfhhiTuPeeRrLvLQ5+BzaRoCgdBO1CGGKeLvEor8OU8QUi3IXSdbbTi+fVrFq5hqaQ==", + "requires": { + "d3-array": "1.2.4", + "d3-interpolate-path": "2.0.0", + "d3-scale": "1.0.7", + "d3-shape": "1.3.7", + "prop-types": "15.7.2" + } + }, + "react-native-vector-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz", + "integrity": "sha512-MImKVx8JEvVVBnaShMr7/yTX4Y062JZMupht1T+IEgbqBj4aQeQ1z2SH4VHWKNtWtppk4kz9gYyUiMWqx6tNSw==", + "requires": { + "lodash": "4.17.15", + "prop-types": "15.7.2", + "yargs": "13.3.0" + } + }, + "require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" + }, + "require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" + }, + "set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" + }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "requires": { + "emoji-regex": "7.0.3", + "is-fullwidth-code-point": "2.0.0", + "strip-ansi": "5.2.0" + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "requires": { + "ansi-regex": "4.1.0" + } + }, + "which-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", + "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" + }, + "wrap-ansi": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", + "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", + "requires": { + "ansi-styles": "3.2.1", + "string-width": "3.1.0", + "strip-ansi": "5.2.0" + } + }, + "y18n": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" + }, + "yargs": { + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz", + "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==", + "requires": { + "cliui": "5.0.0", + "find-up": "3.0.0", + "get-caller-file": "2.0.5", + "require-directory": "2.1.1", + "require-main-filename": "2.0.0", + "set-blocking": "2.0.0", + "string-width": "3.1.0", + "which-module": "2.0.0", + "y18n": "4.0.0", + "yargs-parser": "13.1.1" + } + }, + "yargs-parser": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz", + "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==", + "requires": { + "camelcase": "5.3.1", + "decamelize": "1.2.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..851f70e --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "main": "node_modules/expo/AppEntry.js", + "scripts": { + "start": "expo start", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web", + "eject": "expo eject" + }, + "dependencies": { + "expo": "^35.0.0", + "react": "16.8.3", + "react-dom": "16.8.3", + "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", + "react-native-gesture-handler": "~1.3.0", + "react-native-reanimated": "~1.2.0", + "react-native-screens": "~1.0.0-alpha.23", + "react-native-svg": "9.9.5", + "react-native-svg-charts": "^5.3.0", + "react-native-vector-icons": "^6.6.0", + "react-native-web": "^0.11.7", + "react-navigation": "^4.0.10", + "react-navigation-stack": "^1.10.3" + }, + "devDependencies": { + "babel-preset-expo": "^7.1.0" + }, + "private": true +} diff --git a/screens/Dashboard/index.js b/screens/Dashboard/index.js new file mode 100644 index 0000000..92ba607 --- /dev/null +++ b/screens/Dashboard/index.js @@ -0,0 +1,172 @@ +import React, { Component } from 'react' +import { ScrollView, StyleSheet, TouchableOpacity } from 'react-native'; +import { LineChart, Path } from 'react-native-svg-charts' +import * as shape from 'd3-shape' + +import * as theme from '../../theme'; +import { Block, Text } from '../../components'; +import mocks from '../../settings'; + +class Dashboard extends Component { + static navigationOptions = { + header: null + } + render() { + const { navigation, settings } = this.props; + const LightIcon = settings['light'].icon; + const ACIcon = settings['ac'].icon; + const TempIcon = settings['temperature'].icon; + const FanIcon = settings['fan'].icon; + const WiFiIcon = settings['wi-fi'].icon; + const ElectricityIcon = settings['electricity'].icon; + return ( + + + Hello + John Doe + + + + + 34 + °C + + + Humidity + + + + + + + navigation.navigate('Settings', { name: 'light' })} + > + + + + {settings['light'].name} + + + + + navigation.navigate('Settings', { name: 'ac' })} + > + + + + {settings['ac'].name} + + + + + + + navigation.navigate('Settings', { name: 'temperature' })} + > + + + + {settings['temperature'].name} + + + + + navigation.navigate('Settings', { name: 'fan' })} + > + + + + {settings['fan'].name} + + + + + + + navigation.navigate('Settings', { name: 'wi-fi' })} + > + + + + {settings['wi-fi'].name} + + + + + navigation.navigate('Settings', { name: 'electricity' })} + > + + + + {settings['electricity'].name} + + + + + + + + ) + } +} + +Dashboard.defaultProps = { + settings: mocks, +} + +export default Dashboard; + +const styles = StyleSheet.create({ + dashboard: { + flex: 1, + padding: theme.sizes.base * 2, + marginBottom: -theme.sizes.base * 6, + }, + buttons: { + flex: 1, + marginBottom: -theme.sizes.base * 6, + }, + button: { + backgroundColor: theme.colors.button, + width: 151, + height: 151, + borderRadius: 151 / 2, + } +}) \ No newline at end of file diff --git a/screens/Login/index.js b/screens/Login/index.js new file mode 100644 index 0000000..10f46fb --- /dev/null +++ b/screens/Login/index.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import { Text, View, StyleSheet, Image, KeyboardAvoidingView } from 'react-native'; +import Input from '../../components/Input' +import Button from '../../components/Button' + +// You can import from local files + +export default class App extends Component { + static navigationOptions = { + header: null + } + + onPressLogin = () => { + const { navigation } = this.props; + navigation.navigate('Dashboard'); + } + render() { + return ( + + + Smart Home + + +