From d951a8dcd8ccc7a544513f43a28875833f150359 Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Wed, 22 Jun 2016 15:00:04 -0500 Subject: [PATCH 1/6] Rm shadowOpacity which was causing yellowbox warning --- ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js b/ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js index 83f9ce924..00d11fb76 100644 --- a/ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js +++ b/ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js @@ -20,7 +20,6 @@ export default StyleSheet.create({ height: 7, width: 7 }, - shadowOpacity: 0.25, shadowRadius: 2, paddingBottom: Metrics.baseMargin, margin: Metrics.baseMargin From 53636b41abc341a1456d80e5ae4a19a1503747e7 Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Wed, 22 Jun 2016 15:01:08 -0500 Subject: [PATCH 2/6] Add color for drawer and doubleBaseMargin --- ignite-base/App/Themes/Colors.js | 3 ++- ignite-base/App/Themes/Metrics.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/ignite-base/App/Themes/Colors.js b/ignite-base/App/Themes/Colors.js index 2e6c59a7e..aa337ca74 100644 --- a/ignite-base/App/Themes/Colors.js +++ b/ignite-base/App/Themes/Colors.js @@ -16,7 +16,8 @@ const colors = { bloodOrange: '#fb5f26', snow: 'white', ember: 'rgba(164, 0, 48, 0.5)', - fire: '#e73536' + fire: '#e73536', + drawer: 'rgba(30, 30, 29, 0.85)' } export default colors diff --git a/ignite-base/App/Themes/Metrics.js b/ignite-base/App/Themes/Metrics.js index 4f27a8f42..5840a031f 100644 --- a/ignite-base/App/Themes/Metrics.js +++ b/ignite-base/App/Themes/Metrics.js @@ -8,6 +8,7 @@ const metrics = { marginVertical: 10, section: 25, baseMargin: 10, + doubleBaseMargin: 20, smallMargin: 5, horizontalLineHeight: 1, screenWidth: width < height ? width : height, From 4679914b45577ad4f10aa5fd1e43cb720220795f Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Wed, 22 Jun 2016 15:02:28 -0500 Subject: [PATCH 3/6] Clean up drawerStyles and rm drawer from RootStyle.js --- ignite-base/App/Containers/Styles/RootStyle.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/ignite-base/App/Containers/Styles/RootStyle.js b/ignite-base/App/Containers/Styles/RootStyle.js index 28c1c7b74..7ef7ca6d9 100644 --- a/ignite-base/App/Containers/Styles/RootStyle.js +++ b/ignite-base/App/Containers/Styles/RootStyle.js @@ -3,7 +3,9 @@ import {Fonts, Metrics, Colors} from '../../Themes/' // For some reason this doesn't want to be a stylesheet export const drawerStyles = { - drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3, backgroundColor: Colors.background} + drawer: { + backgroundColor: Colors.drawer + } } const RootStyle = StyleSheet.create({ @@ -15,11 +17,6 @@ const RootStyle = StyleSheet.create({ justifyContent: 'center', backgroundColor: Colors.background }, - drawer: { - shadowColor: '#000000', - shadowOpacity: 0.8, - shadowRadius: 3 - }, welcome: { fontSize: 20, textAlign: 'center', From 4121b8b187c117bef5ddd897313a3a813dde3dec Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Wed, 22 Jun 2016 15:18:23 -0500 Subject: [PATCH 4/6] Adjust drawer bg opacity --- ignite-base/App/Themes/Colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ignite-base/App/Themes/Colors.js b/ignite-base/App/Themes/Colors.js index aa337ca74..413fe0c96 100644 --- a/ignite-base/App/Themes/Colors.js +++ b/ignite-base/App/Themes/Colors.js @@ -17,7 +17,7 @@ const colors = { snow: 'white', ember: 'rgba(164, 0, 48, 0.5)', fire: '#e73536', - drawer: 'rgba(30, 30, 29, 0.85)' + drawer: 'rgba(30, 30, 29, 0.95)' } export default colors From 702c847557f17a6509b99731adf0f5770539ebae Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Wed, 22 Jun 2016 15:19:05 -0500 Subject: [PATCH 5/6] Add DrawerContent component & DrawerButton --- ignite-base/App/Components/DrawerButton.js | 20 +++++++++++ ignite-base/App/Components/DrawerContent.js | 36 +++++++++++++++++++ .../Components/Styles/DrawerButtonStyles.js | 9 +++++ .../Components/Styles/DrawerContentStyle.js | 9 +++++ ignite-base/App/Root.js | 32 ++++++++++++----- 5 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 ignite-base/App/Components/DrawerButton.js create mode 100644 ignite-base/App/Components/DrawerContent.js create mode 100644 ignite-base/App/Components/Styles/DrawerButtonStyles.js create mode 100644 ignite-base/App/Components/Styles/DrawerContentStyle.js diff --git a/ignite-base/App/Components/DrawerButton.js b/ignite-base/App/Components/DrawerButton.js new file mode 100644 index 000000000..c35333a3c --- /dev/null +++ b/ignite-base/App/Components/DrawerButton.js @@ -0,0 +1,20 @@ +import React, { Component, PropTypes } from 'react' +import { Text, TouchableOpacity } from 'react-native' +import styles from './Styles/DrawerButtonStyles' + +class DrawerButton extends Component { + render () { + return ( + + {this.props.text} + + ) + } +} + +DrawerButton.propTypes = { + text: PropTypes.string.isRequired, + onPress: PropTypes.func.isRequired +} + +export default DrawerButton diff --git a/ignite-base/App/Components/DrawerContent.js b/ignite-base/App/Components/DrawerContent.js new file mode 100644 index 000000000..046c7a193 --- /dev/null +++ b/ignite-base/App/Components/DrawerContent.js @@ -0,0 +1,36 @@ +import React, { PropTypes } from 'react' +import { ScrollView, Image } from 'react-native' +import { Images } from '../Themes' +import DrawerButton from '../Components/DrawerButton' +import styles from './Styles/DrawerContentStyle' +import Routes from '../Navigation/Routes' + +class DrawerContent extends React.Component { + constructor (props) { + super(props) + this.handlePressComponent = props.onPushRoute.bind(this, Routes.AllComponentsScreen) + this.handlePressUsage = props.onPushRoute.bind(this, Routes.UsageExamplesScreen) + this.handlePressApi = props.onPushRoute.bind(this, Routes.ApiTestingScreen) + this.handlePressTheme = props.onPushRoute.bind(this, Routes.ThemeScreen) + this.handlePressDeviceInfo = props.onPushRoute.bind(this, Routes.DeviceInfoScreen) + } + + render () { + return ( + + + + + + + + + ) + } +} + +DrawerContent.propTypes = { + onPushRoute: PropTypes.func.isRequired +} + +export default DrawerContent diff --git a/ignite-base/App/Components/Styles/DrawerButtonStyles.js b/ignite-base/App/Components/Styles/DrawerButtonStyles.js new file mode 100644 index 000000000..5227e84ba --- /dev/null +++ b/ignite-base/App/Components/Styles/DrawerButtonStyles.js @@ -0,0 +1,9 @@ +import { Metrics, Colors, Fonts } from '../../Themes' + +export default { + text: { + ...Fonts.style.h5, + color: Colors.snow, + marginVertical: Metrics.baseMargin + } +} diff --git a/ignite-base/App/Components/Styles/DrawerContentStyle.js b/ignite-base/App/Components/Styles/DrawerContentStyle.js new file mode 100644 index 000000000..cd3750556 --- /dev/null +++ b/ignite-base/App/Components/Styles/DrawerContentStyle.js @@ -0,0 +1,9 @@ +export default { + container: { + flex: 1, + padding: 20 + }, + logo: { + alignSelf: 'center' + } +} diff --git a/ignite-base/App/Root.js b/ignite-base/App/Root.js index 900c83043..c9b85dab2 100644 --- a/ignite-base/App/Root.js +++ b/ignite-base/App/Root.js @@ -1,11 +1,12 @@ import React from 'react' -import { View, Text, Navigator, StatusBar } from 'react-native' +import { View, Navigator, StatusBar } from 'react-native' import {Router, Routes, NavigationBar} from './Navigation/' import configureStore from './Store/Store' import { Provider } from 'react-redux' import Actions from './Actions/Creators' import Drawer from 'react-native-drawer' import DebugSettings from './Config/DebugSettings' +import DrawerContent from './Components/DrawerContent' import './Config/PushConfig' // Styles @@ -14,6 +15,11 @@ import styles, {drawerStyles} from './Containers/Styles/RootStyle' const store = configureStore() export default class RNBase extends React.Component { + constructor (props) { + super(props) + this.handlePushRoute = this.handlePushRoute.bind(this) + this.closeDrawer = this.closeDrawer.bind(this) + } componentWillMount () { const { dispatch } = store @@ -21,19 +27,25 @@ export default class RNBase extends React.Component { } componentDidMount () { - this.navigator.drawer = this.drawer + this.refs.drawerContent.navigator = this.navigator + this.navigator.drawer = this.refs.drawer + } + + handlePushRoute (route) { + this.navigator.push(route) + this.closeDrawer() } renderDrawerContent () { return ( - - - Drawer Content Goes Here! - - + ) } + closeDrawer () { + this.refs.drawer.close() + } + renderApp () { console.disableYellowBox = !DebugSettings.yellowBox return ( @@ -44,12 +56,14 @@ export default class RNBase extends React.Component { /> { this.drawer = ref }} + ref='drawer' content={this.renderDrawerContent()} styles={drawerStyles} openDrawerOffset={100} - type='static' + type='overlay' tapToClose + panOpenMask={0.05} + panCloseMask={0.3} > { this.navigator = ref }} From 148b93b32d090954313b5f2a1cff34c84c857d3c Mon Sep 17 00:00:00 2001 From: fvonhoven Date: Thu, 23 Jun 2016 10:37:29 -0500 Subject: [PATCH 6/6] Fix Route typo --- ignite-base/App/Components/DrawerContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ignite-base/App/Components/DrawerContent.js b/ignite-base/App/Components/DrawerContent.js index 046c7a193..d9961e748 100644 --- a/ignite-base/App/Components/DrawerContent.js +++ b/ignite-base/App/Components/DrawerContent.js @@ -10,7 +10,7 @@ class DrawerContent extends React.Component { super(props) this.handlePressComponent = props.onPushRoute.bind(this, Routes.AllComponentsScreen) this.handlePressUsage = props.onPushRoute.bind(this, Routes.UsageExamplesScreen) - this.handlePressApi = props.onPushRoute.bind(this, Routes.ApiTestingScreen) + this.handlePressApi = props.onPushRoute.bind(this, Routes.APITestingScreen) this.handlePressTheme = props.onPushRoute.bind(this, Routes.ThemeScreen) this.handlePressDeviceInfo = props.onPushRoute.bind(this, Routes.DeviceInfoScreen) }