setting

App/Containers/App.js

@@ -0,0 +1,33 @@
+import '../Config'
+import DebugConfig from '../Config/DebugConfig'
+import React, { Component } from 'react'
+import { Provider } from 'react-redux'
+import RootContainer from './RootContainer'
+import createStore from '../Redux'
+
+// create our store
+const store = createStore()
+
+/**
+ * Provides an entry point into our application.  Both index.ios.js and index.android.js
+ * call this component first.
+ *
+ * We create our Redux store here, put it into a provider and then bring in our
+ * RootContainer.
+ *
+ * We separate like this to play nice with React Native's hot reloading.
+ */
+class App extends Component {
+  render () {
+    return (
+      <Provider store={store}>
+        <RootContainer />
+      </Provider>
+    )
+  }
+}
+
+// allow reactotron overlay for fast design in dev mode
+export default DebugConfig.useReactotron
+  ? console.tron.overlay(App)
+  : App

App/Containers/HomeScreen.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { ScrollView,  KeyboardAvoidingView,ImageBackground,View } from 'react-native'
+import { connect } from 'react-redux'
+import {Header,Left,Body,Right,Container,Content,Footer, Text,Button} from 'native-base'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+import data from '../Themes/data'
+// Styles
+import styles from './Styles/HomeScreenStyle'
+import colors from '../Themes/Colors'
+import images from '../Themes/Images'
+class HomeScreen extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+      buttonColorm:'black',
+      textColorm:'white',
+      buttonColorw:'white',
+      textColorw:'black'
+    }
+  }
+  render () {
+    console.log(data.men)
+    return (
+      <Container>
+        <Header>
+          <Left style={{flex:1}}>
+            <Button full style={{flex:1,borderWidth:2,backgroundColor:this.state.buttonColorm, borderColor:'black',justifyContent:'center'}}
+            onPress={this.menButton}>
+              <Text style={{color:this.state.textColorm}}>MEN</Text>
+            </Button>
+          </Left>
+          <Right style={{flex:1}}>
+            <Button full style={{flex:1,backgroundColor:this.state.buttonColorw, borderWidth:2, borderColor:'black',justifyContent:'center'}}
+            onPress={this.womenButton}>
+              <Text style={{color:this.state.textColorw}}>WOMEN</Text>
+            </Button>
+          </Right>
+        </Header>
+        <Content style={{flex:1}}>
+          <ImageBackground style={{width:200,height:200}} source={data.men.image}>
+
+          </ImageBackground>
+        </Content>
+      </Container>
+    )
+  }
+  womenButton = () =>{
+    if(this.state.buttonColorw === 'white'){
+      this.setState({buttonColorm:'white', textColorm:'black',buttonColorw:'black', textColorw:'white',})
+     }//else{
+    //   this.setState({buttonColorm:'black', textColorm:'white',buttonColorw:'white', textColorw:'black'})
+    // }
+  }
+
+  menButton = () =>{
+    if(this.state.buttonColorm === 'white'){
+      this.setState({buttonColorm:'black', textColorm:'white',buttonColorw:'white', textColorw:'black'})
+     }
+  }
+}
+
+
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

App/Containers/LaunchScreen.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { ScrollView, Text, Image, View } from 'react-native'
+import DevscreensButton from '../../ignite/DevScreens/DevscreensButton.js'
+
+import { Images } from '../Themes'
+
+// Styles
+import styles from './Styles/LaunchScreenStyles'
+
+export default class LaunchScreen extends Component {
+  render () {
+    return (
+      <View style={styles.mainContainer}>
+        <Image source={Images.background} style={styles.backgroundImage} resizeMode='stretch' />
+        <ScrollView style={styles.container}>
+          <View style={styles.centered}>
+            <Image source={Images.launch} style={styles.logo} />
+          </View>
+
+          <View style={styles.section} >
+            <Image source={Images.ready} />
+            <Text style={styles.sectionText}>
+              This probably isn't what your app is going to look like. Unless your designer handed you this screen and, in that case, congrats! You're ready to ship. For everyone else, this is where you'll see a live preview of your fully functioning app using Ignite.
+            </Text>
+          </View>
+
+          <DevscreensButton />
+        </ScrollView>
+      </View>
+    )
+  }
+}

App/Containers/README.md

@@ -0,0 +1,11 @@
+### Containers Folder
+A container is what they call a "Smart Component" in Redux.  It is a component
+which knows about Redux.  They are usually used as "Screens".
+
+Also located in here are 2 special containers: `App.js` and `RootContainer.js`.
+
+`App.js` is first component loaded after `index.ios.js` or `index.android.js`.  The purpose of this file is to setup Redux or any other non-visual "global" modules.  Having Redux setup here helps with the hot-reloading process in React Native during development as it won't try to reload your sagas and reducers should your colors change (for example).
+
+`RootContainer.js` is the first visual component in the app.  It is the ancestor of all other screens and components.
+
+You'll probably find you'll have great mileage in Ignite apps without even touching these 2 files.  They, of course, belong to you, so when you're ready to add something non-visual like Firebase or something visual like an overlay, you have spots to place these additions.

App/Containers/RootContainer.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { View, StatusBar } from 'react-native'
+import ReduxNavigation from '../Navigation/ReduxNavigation'
+import { connect } from 'react-redux'
+import StartupActions from '../Redux/StartupRedux'
+
+// Styles
+import styles from './Styles/RootContainerStyles'
+
+class RootContainer extends Component {
+  componentDidMount () {
+    this.props.startup()
+  }
+
+  render () {
+    return (
+      <View style={styles.applicationView}>
+        <StatusBar barStyle='light-content' />
+        <ReduxNavigation />
+      </View>
+    )
+  }
+}
+
+// wraps dispatch to create nicer functions to call within our component
+const mapDispatchToProps = (dispatch) => ({
+  startup: () => dispatch(StartupActions.startup())
+})
+
+export default connect(null, mapDispatchToProps)(RootContainer)

App/Containers/SplashScreen.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import { View,Image } from 'react-native'
+import { connect } from 'react-redux'
+import { StackActions, NavigationActions } from 'react-navigation';
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/SplashScreenStyle'
+import {Images, Metrics} from '../Themes'
+
+class SplashScreen extends Component {
+  componentDidMount(){
+
+    setTimeout(()=>{
+      const resetAction = StackActions.reset({
+        index: 0,
+        actions: [NavigationActions.navigate({ routeName: 'HomeScreen' })],
+      });
+      this.props.navigation.dispatch(resetAction);
+    },3000)
+  }
+  render () {
+    return (
+      <View style={{flex:1}}>
+      <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
+          <Image source={Images.logo} style={{width: Metrics.screenWidth-50}} resizeMode={'contain'}/>
+      </View>
+      <View style={{ marginBottom : 50, flexDirection : 'row', alignItems : 'center', justifyContent : 'center'}}>
+        <Image source={Images.computercell} style={{ width: Metrics.screenWidth/2-20, height : 50}} resizeMode={'contain'}/>
+        <Image source={Images.computercell} style={{ width: Metrics.screenWidth/2-20, height : 50}} resizeMode={'contain'}/>
+      </View>
+    </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SplashScreen)

App/Containers/Styles/HomeScreenStyle.js

@@ -0,0 +1,6 @@
+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/LaunchScreenStyles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+import { Metrics, ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen,
+  container: {
+    paddingBottom: Metrics.baseMargin
+  },
+  logo: {
+    marginTop: Metrics.doubleSection,
+    height: Metrics.images.logo,
+    width: Metrics.images.logo,
+    resizeMode: 'contain'
+  },
+  centered: {
+    alignItems: 'center'
+  }
+})

App/Containers/Styles/README.md

@@ -0,0 +1,2 @@
+### Styles Folder
+Container styles are separated from functionality.

App/Containers/Styles/RootContainerStyles.js

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native'
+import {Fonts, Metrics, Colors} from '../../Themes/'
+
+export default StyleSheet.create({
+  applicationView: {
+    flex: 1
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: Colors.background
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    fontFamily: Fonts.type.base,
+    margin: Metrics.baseMargin
+  },
+  myImage: {
+    width: 200,
+    height: 200,
+    alignSelf: 'center'
+  }
+})

App/Containers/Styles/SplashScreenStyle.js

@@ -0,0 +1,6 @@
+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

Tests/Components/AlertMessageTest.js

@@ -0,0 +1,19 @@
+import 'react-native'
+import React from 'react'
+import AlertMessage from '../../App/Components/AlertMessage'
+import renderer from 'react-test-renderer'
+
+test('AlertMessage component renders correctly if show is true', () => {
+  const tree = renderer.create(<AlertMessage title='howdy' />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('AlertMessage component does not render if show is false', () => {
+  const tree = renderer.create(<AlertMessage title='howdy' show={false} />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('AlertMessage component renders correctly if backgroundColor prop is set', () => {
+  const tree = renderer.create(<AlertMessage title='howdy' style={{backgroundColor: 'red'}} />).toJSON()
+  expect(tree).toMatchSnapshot()
+})

Tests/Components/DrawerButtonTest.js

@@ -0,0 +1,21 @@
+import 'react-native'
+import React from 'react'
+import DrawerButton from '../../App/Components/DrawerButton'
+import { shallow } from 'enzyme'
+import renderer from 'react-test-renderer'
+
+test('DrawerButton component renders correctly', () => {
+  const tree = renderer.create(<DrawerButton onPress={() => {}} text='hi' />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('onPress', () => {
+  let i = 0
+  const onPress = () => i++
+  const wrapperPress = shallow(<DrawerButton onPress={onPress} text='hi' />)
+
+  expect(wrapperPress.prop('onPress')).toBe(onPress) // uses the right handler
+  expect(i).toBe(0)
+  wrapperPress.simulate('press')
+  expect(i).toBe(1)
+})

Tests/Components/FullButtonTest.js

@@ -0,0 +1,21 @@
+import 'react-native'
+import React from 'react'
+import FullButton from '../../App/Components/FullButton'
+import { shallow } from 'enzyme'
+import renderer from 'react-test-renderer'
+
+test('FullButton component renders correctly', () => {
+  const tree = renderer.create(<FullButton onPress={() => {}} text='hi' />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('onPress', () => {
+  let i = 0 // i guess i could have used sinon here too... less is more i guess
+  const onPress = () => i++
+  const wrapperPress = shallow(<FullButton onPress={onPress} text='hi' />)
+
+  expect(wrapperPress.prop('onPress')).toBe(onPress) // uses the right handler
+  expect(i).toBe(0)
+  wrapperPress.simulate('press')
+  expect(i).toBe(1)
+})

Tests/Components/RoundedButtonTest.js

@@ -0,0 +1,26 @@
+import 'react-native'
+import React from 'react'
+import RoundedButton from '../../App/Components/RoundedButton'
+import { shallow } from 'enzyme'
+import renderer from 'react-test-renderer'
+
+test('RoundedButton component renders correctly', () => {
+  const tree = renderer.create(<RoundedButton onPress={() => {}} text='howdy' />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('RoundedButton component with children renders correctly', () => {
+  const tree = renderer.create(<RoundedButton onPress={() => {}}>Howdy</RoundedButton>).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('onPress', () => {
+  let i = 0 // i guess i could have used sinon here too... less is more i guess
+  const onPress = () => i++
+  const wrapperPress = shallow(<RoundedButton onPress={onPress} text='hi' />)
+
+  expect(wrapperPress.prop('onPress')).toBe(onPress) // uses the right handler
+  expect(i).toBe(0)
+  wrapperPress.simulate('press')
+  expect(i).toBe(1)
+})