Show new Rate screen on heart button press

List of changes:
 - Add new Rate screen
 - Add new Footer component
 - Update BottomNav and IconButton to allow for onPress functions
 - Update BottomNav and IconButton stories with onPress functions
 - Update Home component to navigate to the Rate screen when the heart
   icon button is pressed in the bottom nav
 - Update StoriesTest snapshot to reflect BottomNav and IconButton
   changes
 - Update HomeTest and its snapshot to reflect Home component changes
 - Add RateTest and its snapshot

App/Components/BottomNav/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
+import PropTypes from 'prop-types'
 
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -10,26 +11,33 @@ import { Colors } from 'App/Themes'
 import s from './Styles'
 
 export default class BottomNav extends Component {
+  static propTypes = {
+    onRatePress: PropTypes.func.isRequired,
+    onHomePress: PropTypes.func.isRequired,
+    onSettingsPress: PropTypes.func.isRequired
+  }
+
   render () {
+    const {onRatePress, onHomePress, onSettingsPress} = this.props
     return (
       <View style={s.footer}>
         <View style={s.top} />
         <View style={s.buttons}>
-          <IconButton>
+          <IconButton onPress={onRatePress}>
             <FontAwesomeIcon
               name='heart'
               color={Colors.footer.button.nav.background}
               size={24}
               style={{marginTop: 2}} />
           </IconButton>
-          <IconButton size='large'>
+          <IconButton size='large' onPress={onHomePress}>
             <MaterialIcon
               name='home'
               color={Colors.footer.button.nav.background}
               size={38}
               style={{marginTop: 4}} />
           </IconButton>
-          <IconButton>
+          <IconButton onPress={onSettingsPress}>
             <MaterialIcon
               name='dots-horizontal'
               color={Colors.footer.button.nav.background}

App/Components/Buttons/Button/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { View, Text } from 'react-native'
 
-import { TouchableOpacity } from 'App/Components/Touchable'
+import { TouchableOpacity } from 'App/Components'
 
 import s from './Styles'
 

App/Components/Buttons/IconButton/index.js

@@ -2,15 +2,18 @@ import React, { Component } from 'react'
 import { View } from 'react-native'
 import PropTypes from 'prop-types'
 
+import { TouchableOpacity } from 'App/Components'
+
 import s from './Styles'
 
 export default class IconButton extends Component {
   static propTypes = {
-    size: PropTypes.oneOf(['small', 'large'])
+    size: PropTypes.oneOf(['small', 'large']),
+    onPress: PropTypes.func.isRequired
   }
 
   render () {
-    const {size = 'small', styles: propStyles = {}} = this.props
+    const {size = 'small', onPress, styles: propStyles = {}} = this.props
     const isSmall = (size === 'small')
     const styles = {
       button: [
@@ -34,15 +37,15 @@ export default class IconButton extends Component {
       ]
     }
     return (
-      <View style={styles.button}>
+      <TouchableOpacity style={styles.button} onPress={onPress}>
         <View style={styles.buttonOutter}>
           <View style={styles.buttonInner}>
             <View style={styles.buttonIcon}>
               {this.props.children}
             </View>
           </View>
         </View>
-      </View>
+      </TouchableOpacity>
     )
   }
 }

App/Components/Buttons/NavButton/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Platform, View, Button, Text } from 'react-native'
 
-import { TouchableOpacity } from 'App/Components/Touchable'
+import { TouchableOpacity } from 'App/Components'
 
 import s from './Styles'
 

App/Components/Footer/Styles.js

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native'
+
+import { Styles } from 'App/Themes'
+
+export default StyleSheet.create({...Styles})

App/Components/Footer/index.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+
+import s from './Styles'
+
+export default class Footer extends Component {
+  render () {
+    const {containerStyle = undefined} = this.props
+    return (
+      <View style={[s.footer, containerStyle]}>
+        {this.props.children}
+      </View>
+    )
+  }
+}

App/Components/Stories/BottomNav.story.js

@@ -7,5 +7,8 @@ import BottomNav from '../BottomNav'
 storiesOf('BottomNav', module)
   .addDecorator(FullScreenDecorator)
   .add('Default', () => (
-    <BottomNav />
+    <BottomNav
+      onRatePress={() => {}}
+      onHomePress={() => {}}
+      onSettingsPress={() => {}} />
   ))

App/Components/Stories/IconButton.story.js

@@ -12,7 +12,9 @@ import { IconButton } from '../Buttons'
 storiesOf('IconButton', module)
   .addDecorator(CenterDecorator)
   .add('Heart', () => (
-    <IconButton styles={{buttonOutter: {backgroundColor: Colors.red}}}>
+    <IconButton
+      styles={{buttonOutter: {backgroundColor: Colors.red}}}
+      onPress={() => {}}>
       <FontAwesomeIcon
         name='heart'
         color={Colors.red}
@@ -21,7 +23,10 @@ storiesOf('IconButton', module)
     </IconButton>
   ))
   .add('Large Home', () => (
-    <IconButton size='large' styles={{buttonOutter: {backgroundColor: Colors.black}}}>
+    <IconButton
+      size='large'
+      styles={{buttonOutter: {backgroundColor: Colors.black}}}
+      onPress={() => {}}>
       <MaterialIcon
         name='home'
         color={Colors.black}

App/Components/index.js

@@ -4,6 +4,7 @@ import {
   TouchableWithoutFeedback } from './Touchable'
 import { Button, IconButton, NavButton } from './Buttons'
 import Container from './Container'
+import Footer from './Footer'
 import LoadingIndicator from './LoadingIndicator'
 import BottomNav from './BottomNav'
 import Web from './Web'
@@ -17,6 +18,7 @@ export {
   IconButton,
   NavButton,
   Container,
+  Footer,
   LoadingIndicator,
   BottomNav,
   Web,

App/Containers/index.js

@@ -0,0 +1,7 @@
+import Start from './StartContainer'
+import Web from './WebContainer'
+
+export {
+  Start,
+  Web
+}

App/Modules/Home/Screens/Components/index.js

@@ -7,11 +7,18 @@ import { Images } from 'App/Themes'
 
 export default class Screen extends Component {
   static propTypes = {
-    onLearnMorePress: PropTypes.func.isRequired
+    onLearnMorePress: PropTypes.func.isRequired,
+    onRatePress: PropTypes.func.isRequired,
+    onHomePress: PropTypes.func.isRequired,
+    onSettingsPress: PropTypes.func.isRequired
   }
 
   render () {
-    const { onLearnMorePress } = this.props
+    const {
+      onLearnMorePress,
+      onRatePress,
+      onHomePress,
+      onSettingsPress} = this.props
     return (
       <Container>
         <Card
@@ -20,7 +27,10 @@ export default class Screen extends Component {
           text={'The app is ready! Sorry, almost ready :)\n\nThe good news is you can follow along as this Beta version of the app develops over the coming weeks.'}
           button='Learn More'
           onPress={onLearnMorePress} />
-        <BottomNav />
+        <BottomNav
+          onRatePress={onRatePress}
+          onHomePress={onHomePress}
+          onSettingsPress={onSettingsPress} />
       </Container>
     )
   }

App/Modules/Home/Screens/Containers/index.js

@@ -10,6 +10,16 @@ export class HomeContainer extends Component {
     })
   }
 
+  onRatePress = () => {
+    this.props.navigation.navigate('RateScreen')
+  }
+
+  onHomePress = () => {}
+
+  onSettingsPress = () => {
+    // TODO
+  }
+
   render () {
     return (
       <Screen
@@ -18,6 +28,9 @@ export class HomeContainer extends Component {
         }}
         {...this.props}
         onLearnMorePress={this.onLearnMorePress}
+        onRatePress={this.onRatePress}
+        onHomePress={this.onHomePress}
+        onSettingsPress={this.onSettingsPress}
       />
     )
   }

App/Modules/Home/index.js

@@ -1,5 +1,5 @@
 
-import { Home } from './Screens'
+import Home from './Screens/Containers'
 
 export {
   Home

App/Modules/Rate/Screens/Components/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { Container, Footer, Card } from 'App/Components'
+
+export default class Screen extends Component {
+  static propTypes = {
+    onRatePress: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { onRatePress } = this.props
+    return (
+      <Container>
+        <Footer>
+          <Card
+            title='LOVING THE APP?'
+            text={'Every rating means the world to us.\n\n★★★★★'}
+            button='Rate'
+            onPress={onRatePress} />
+        </Footer>
+      </Container>
+    )
+  }
+}

App/Modules/Rate/Screens/Containers/index.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import Screen from '../Components'
+
+export class RateContainer extends Component {
+  onRatePress = () => {
+    // TODO
+  }
+
+  render () {
+    return (
+      <Screen
+        ref={(ref) => {
+          this.screen = ref
+        }}
+        {...this.props}
+        onRatePress={this.onRatePress}
+      />
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(RateContainer)

App/Modules/Rate/index.js

@@ -0,0 +1,6 @@
+
+import Rate from './Screens/Containers'
+
+export {
+  Rate
+}

App/Modules/index.js

@@ -0,0 +1,7 @@
+import { Home } from './Home'
+import { Rate } from './Rate'
+
+export {
+  Home,
+  Rate
+}

App/Navigation/Screens/index.js

@@ -1,6 +1,5 @@
-import Start from 'App/Containers/StartContainer'
-import Web from 'App/Containers/WebContainer'
-import { Home } from 'App/Modules/Home'
+import { Start, Web } from 'App/Containers'
+import { Home, Rate } from 'App/Modules'
 
 const Screens = {
   StartScreen: {
@@ -17,6 +16,12 @@ const Screens = {
     navigationOptions: ({navigation}) => ({
       title: 'Code & Robots'
     })
+  },
+  RateScreen: {
+    screen: Rate,
+    navigationOptions: ({navigation}) => ({
+      title: 'Spread the word'
+    })
   }
 }