diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/Contents.json b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/Contents.json deleted file mode 100644 index e054d390..00000000 --- a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/Contents.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "images" : [ - { - "idiom" : "universal", - "filename" : "placeholderhome.png", - "scale" : "1x" - }, - { - "idiom" : "universal", - "filename" : "placeholderhome-1.png", - "scale" : "2x" - }, - { - "idiom" : "universal", - "filename" : "placeholderhome-2.png", - "scale" : "3x" - } - ], - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-1.png b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-1.png deleted file mode 100644 index f1c3ba79..00000000 Binary files a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-1.png and /dev/null differ diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-2.png b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-2.png deleted file mode 100644 index f1c3ba79..00000000 Binary files a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-2.png and /dev/null differ diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome.png b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome.png deleted file mode 100644 index f1c3ba79..00000000 Binary files a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome.png and /dev/null differ diff --git a/package.json b/package.json index 6b5c5d42..2926fb9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "HackathonStarter", - "version": "0.0.1", + "version": "0.0.2", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" @@ -9,7 +9,7 @@ "lodash": "^4.15.0", "react": "15.3.1", "react-native": "0.32.0", - "react-native-elements": "0.0.6", + "react-native-elements": "0.3.2", "react-native-tab-navigator": "^0.3.3", "react-native-vector-icons": "^2.1.0", "react-redux": "^4.4.5", diff --git a/src/App.js b/src/App.js index a7f87e14..dfaf492e 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons' import colors from 'HSColors' import fonts from 'HSFonts' -import Home from './home/HomeRootContainer' +import Home from './home/HomeNav' import About from './about/AboutRootContainer' import Contact from './contact/ContactRootContainer' import Pricing from './pricing/PricingRootContainer' @@ -27,6 +27,7 @@ class App extends Component { }) } render () { + const { toggleSideMenu } = this.props const { selectedTab } = this.state return ( @@ -38,7 +39,7 @@ class App extends Component { renderIcon={() => } renderSelectedIcon={() => } onPress={() => this.changeTab('home')}> - + } - renderSelectedIcon={() => ( - - )} + renderSelectedIcon={() => } onPress={() => this.changeTab('contact')}> diff --git a/src/AppRootContainer.js b/src/AppRootContainer.js index 057b9d7e..f48db58f 100644 --- a/src/AppRootContainer.js +++ b/src/AppRootContainer.js @@ -1,10 +1,78 @@ import React, { Component } from 'react' +import { View } from 'react-native' import App from './App' +import { + List, + ListItem, + SideMenu +} from 'react-native-elements' class AppRootContainer extends Component { + constructor () { + super() + this.state = { + toggled: false + } + this.toggleSideMenu = this.toggleSideMenu.bind(this) + } + toggleSideMenu () { + this.setState({ + toggled: !this.state.toggled + }) + } render () { + const list = [ + { + name: 'Amy Farha', + avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', + subtitle: 'Vice President' + }, + { + name: 'Chris Jackson', + avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg', + subtitle: 'Vice Chairman' + }, + { + name: 'Amanda Martin', + avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', + subtitle: 'CEO' + }, + { + name: 'Christy Thomas', + avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg', + subtitle: 'Lead Developer' + }, + { + name: 'Melissa Jones', + avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg', + subtitle: 'CTO' + } + ] + const MenuComponent = ( + + + { + list.map((l, i) => ( + console.log('something')} + avatar={l.avatar_url} + key={i} + title={l.name} + subtitle={l.subtitle} + /> + )) + } + + + ) return ( - + + + ) } } diff --git a/src/about/About.js b/src/about/About.js index d160408c..ac76f296 100644 --- a/src/about/About.js +++ b/src/about/About.js @@ -4,9 +4,9 @@ import colors from 'HSColors' import Icon from 'react-native-vector-icons/MaterialIcons' import { - RNEText, - RNECard, - RNESocialIcon + Text, + Card, + SocialIcon } from 'react-native-elements' let styles = {} @@ -41,13 +41,13 @@ const users = [ class About extends Component { render () { return ( - + - Components + Components - { users.map((u, i) => { @@ -55,66 +55,129 @@ class About extends Component { - {u.name} + {u.name} ) }) } - - - h1 Heading - h2 Heading - h3 Heading - h4 Heading - Normal Text - - + + h1 Heading + h2 Heading + h3 Heading + h4 Heading + Normal Text + + - console.log('hi!')} + /> + console.log('hi2!')} + /> + console.log('hi3!')} + /> + + + + + console.log('hi!')} /> - console.log('hi2!')} /> - console.log('hi3!')} + /> + + + + + + + console.log('hi!')} + /> + console.log('hi2!')} + /> + console.log('hi3!')} + /> + - - - + - + + - - - - - + ) diff --git a/src/components/buttons/Button.js b/src/components/buttons/Button.js index b7e4830d..f78197e2 100644 --- a/src/components/buttons/Button.js +++ b/src/components/buttons/Button.js @@ -14,7 +14,7 @@ const log = () => { console.log('please attach method to this component') } -const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secondary3, primary1, primary2, primary3, backgroundColor, color, fontSize, underlayColor, raised, textStyle}) => ( +const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secondary3, primary1, primary2, primary3, backgroundColor, color, fontSize, underlayColor, raised, textStyle, small}) => ( @@ -28,13 +28,20 @@ const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secon primary2 && {backgroundColor: colors.primary2}, backgroundColor && {backgroundColor}, buttonStyle && buttonStyle, - raised && styles.raised + raised && styles.raised, + small && styles.small ]} > { - icon && + icon && } - + {title} @@ -57,7 +64,8 @@ Button.propTypes = { fontSize: PropTypes.number, underlayColor: PropTypes.string, raised: PropTypes.bool, - textStyle: PropTypes.any + textStyle: PropTypes.any, + small: PropTypes.bool } styles = StyleSheet.create({ @@ -82,6 +90,12 @@ styles = StyleSheet.create({ icon: { marginRight: 10 }, + small: { + padding: 12 + }, + smallFont: { + fontSize: 14 + }, raised: { ...Platform.select({ ios: { diff --git a/src/components/form/CheckBox.js b/src/components/form/CheckBox.js new file mode 100644 index 00000000..19182bac --- /dev/null +++ b/src/components/form/CheckBox.js @@ -0,0 +1,135 @@ +/** + * @providesModule HSCheckBox + */ + +import React from 'react' +import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native' +import HSText from 'HSText' +import fonts from 'HSFonts' +import colors from 'HSColors' +import FAIcon from 'react-native-vector-icons/FontAwesome' + +import ZocialIcon from 'react-native-vector-icons/Zocial' +import OcticonIcon from 'react-native-vector-icons/Octicons' +import MaterialIcon from 'react-native-vector-icons/MaterialIcons' +import Ionicon from 'react-native-vector-icons/Ionicons' +import FoundationIcon from 'react-native-vector-icons/Foundation' +import EvilIcon from 'react-native-vector-icons/EvilIcons' +import EntypoIcon from 'react-native-vector-icons/Entypo' + +let styles = {} + +const getIconType = (type) => { + switch (type) { + case 'zocial': + return ZocialIcon + case 'octicon': + return OcticonIcon + case 'material': + return MaterialIcon + case 'ionicon': + return Ionicon + case 'foundation': + return FoundationIcon + case 'evilicon': + return EvilIcon + case 'entypo': + return EntypoIcon + } +} + +const CheckBox = ({component, checked, iconRight, title, center, right, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle}) => { + let Icon = FAIcon + if (iconType) { + Icon = getIconType(iconType) + } + const Component = component || TouchableOpacity + let iconName = uncheckedIcon + if (checked) { + iconName = checkedIcon + } + return ( + + + { + !iconRight && ( + + ) + } + + {checked ? checkedTitle || title : title} + + { + iconRight && ( + + ) + } + + + ) +} + +CheckBox.defaultProps = { + checked: false, + iconRight: false, + right: false, + center: false, + checkedColor: 'green', + uncheckedColor: '#bfbfbf', + checkedIcon: 'check-square-o', + uncheckedIcon: 'square-o' +} + +// CheckBox.propTypes = { +// component, checked, iconRight, title, center, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle +// } + +styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center' + }, + container: { + margin: 5, + marginLeft: 10, + marginRight: 10, + backgroundColor: '#fafafa', + borderColor: '#ededed', + borderWidth: 1, + padding: 10, + borderRadius: 3 + }, + text: { + marginLeft: 10, + marginRight: 10, + color: colors.grey1, + ...Platform.select({ + ios: { + fontFamily: fonts.ios.bold + }, + android: { + fontFamily: fonts.android.bold + } + }) + } +}) + +export default CheckBox diff --git a/src/components/nav/NavBar.js b/src/components/nav/NavBar.js index 816608b0..1a715114 100644 --- a/src/components/nav/NavBar.js +++ b/src/components/nav/NavBar.js @@ -3,7 +3,7 @@ */ import React from 'react' -import { Platform, Navigator, StyleSheet } from 'react-native' +import { Platform, Navigator, StyleSheet, TouchableHighlight } from 'react-native' import NavTitleComponent from 'HSNavTitleComponent' import NavTitleIcon from 'HSNavTitleIcon' import colors from 'HSColors' @@ -11,8 +11,12 @@ import Icon from 'react-native-vector-icons/MaterialIcons' let styles = {} -const NavigationBar = () => { +const NavigationBar = (toggleSideMenu) => { + const src = require('image!logo') const LeftButton = (route, navigator, index, navState) => { + if (route.name !== 'home') { + return null + } if (index > 0) { const leftAction = navigator.pop const leftIcon = 'chevron-left' @@ -22,7 +26,18 @@ const NavigationBar = () => { name={leftIcon} size={28} /> ) } - return null + return ( + + + + ) } const RightButton = (/* route, navigator, index, navState */) => { @@ -36,7 +51,7 @@ const NavigationBar = () => { ) } return ( - + ) } @@ -55,7 +70,7 @@ const NavigationBar = () => { styles = StyleSheet.create({ navBar: { height: 65, - backgroundColor: colors.dkGreyBg, + backgroundColor: colors.grey1, ...Platform.select({ android: { height: 55 diff --git a/src/components/nav/NavTitleIcon.android.js b/src/components/nav/NavTitleIcon.android.js deleted file mode 100644 index 30a124cb..00000000 --- a/src/components/nav/NavTitleIcon.android.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @providesModule HSNavTitleIcon - */ - -import React from 'react' -import { View, Image, StyleSheet, Dimensions } from 'react-native' -const { width } = Dimensions.get('window') - -let styles = {} - -const NavTitleIcon = () => ( - - - -) - -styles = StyleSheet.create({ - iconContainer: { - flex: 1, - width: width - 140, - justifyContent: 'center', - alignItems: 'center' - }, - logo: { - width: 136, - height: 28, - resizeMode: 'contain' - } -}) - -export default NavTitleIcon diff --git a/src/components/nav/NavTitleIcon.ios.js b/src/components/nav/NavTitleIcon.js similarity index 62% rename from src/components/nav/NavTitleIcon.ios.js rename to src/components/nav/NavTitleIcon.js index 98d6990e..d3cc0805 100644 --- a/src/components/nav/NavTitleIcon.ios.js +++ b/src/components/nav/NavTitleIcon.js @@ -7,20 +7,20 @@ import { View, Image, StyleSheet } from 'react-native' let styles = {} -const NavTitleIcon = () => ( - +const NavTitleIcon = ({src}) => ( + ) styles = StyleSheet.create({ - iconContainer: { + container: { }, logo: { - marginTop: -15, - resizeMode: 'center' + width: 160, + height: 34 } }) diff --git a/src/components/sideMenu/SideMenu.js b/src/components/sideMenu/SideMenu.js new file mode 100644 index 00000000..d79d3d05 --- /dev/null +++ b/src/components/sideMenu/SideMenu.js @@ -0,0 +1,72 @@ +import React, { Component, PropTypes } from 'react' +import { View, Easing, StyleSheet, Animated, Dimensions } from 'react-native' + +const { width, height } = Dimensions.get('window') +let styles + +class SideMenu extends Component { + constructor () { + super() + this.state = { + toggled: false + } + this.AnimatedLeft = new Animated.Value(0) + } + toggleMenu () { + const { menuWidth } = this.props + let toValue = menuWidth || (width - 80) + if (this.state.toggled) { + toValue = 0 + } + Animated.timing(this.AnimatedLeft, { + toValue, + duration: 250, + easing: Easing.inout }).start(() => { + this.setState({ + toggled: !this.state.toggled + }) + }) + } + render () { + const { children, menuWidth, MenuComponent } = this.props + return ( + + + {MenuComponent} + + + {children} + + + ) + } +} + +SideMenu.propTypes = { + menuWidth: PropTypes.number, + MenuComponent: PropTypes.element +} + +SideMenu.propTypes = {} + +styles = StyleSheet.create({ + container: { + flex: 1 + }, + appView: { + flex: 1, + width + }, + sideMenu: { + backgroundColor: '#898989', + flex: 1, + position: 'absolute', + height + } +}) + +export default SideMenu diff --git a/src/config/socialColors.js b/src/config/socialColors.js new file mode 100644 index 00000000..4c78d549 --- /dev/null +++ b/src/config/socialColors.js @@ -0,0 +1,19 @@ +/** + * @providesModule HSSocialColors + */ + +export default { + facebook: '#3b5998', + twitter: '#00aced', + ['google-plus-official']: '#dd4b39', + pinterest: '#cb2027', + linkedin: '#007bb6', + youtube: '#bb0000', + vimeo: '#aad450', + tumblr: '#32506d', + instagram: '#517fa4', + quora: '#a82400', + foursquare: '#0072b1', + wordpress: '#21759b', + stumbleupon: '#EB4823' +} diff --git a/src/contact/Contact.js b/src/contact/Contact.js index 9e7d9fec..dcc50216 100644 --- a/src/contact/Contact.js +++ b/src/contact/Contact.js @@ -4,10 +4,11 @@ import colors from 'HSColors' import Icon from 'react-native-vector-icons/MaterialIcons' import { - RNEButton, - RNEText, - RNEFormInput, - RNEFormLabel + Button, + Text, + FormInput, + FormLabel, + CheckBox } from 'react-native-elements' let styles = {} @@ -15,23 +16,94 @@ let styles = {} class Contact extends Component { render () { return ( - + - Forms + Forms - Name - - Address - - Phone - - Name + + Address + + Phone + +