added basic components

Author: justinkx

App/App.js

@@ -7,75 +7,25 @@
  */
 
 import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+import store from './store/configureStore';
+import { Provider } from 'react-redux';
+
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
 import { Navigation } from './navigation';
 import NavigationService from './utils/navigationService';
 
 const App = () => {
   return (
-    
-        
-          <Navigation
-            ref={navigatorRef => {
-              NavigationService.setTopLevelNavigator(navigatorRef);
-            }}
-          />
-  
+
+    <Provider store={store}>
+      <Navigation
+        ref={navigatorRef => {
+          NavigationService.setTopLevelNavigator(navigatorRef);
+        }}
+      />
+    </Provider>
   );
 };
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
 
 export default App;

App/assets/images/fidisys.png

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View,SafeAreaView } from 'react-native';
+import {GlobalStyle} from '../theme/global';
+
+
+export const Container = ({style,children}) => {
+    return (
+        <SafeAreaView style={{flex: 1}}>
+
+        <View style={[style,GlobalStyle.mainContainer]}>
+            {children}
+        </View>
+</SafeAreaView>
+    )
+}

App/components/container.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View,ScrollView } from 'react-native';
+
+
+export const Content = ({style,children}) => {
+    return (
+        <ScrollView 
+        showsVerticalScrollIndicator
+        contentContainerStyle={[{
+            padding: 10
+        },style]}>
+            {children}
+        </ScrollView>
+
+    )
+}

App/components/content.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View,StatusBar } from 'react-native';
+
+
+export const Header = ({style,statusbarColor,barStyle,children}) => {
+    console.log(children)
+    return (
+        <View style={[{
+            height: 55,
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-evenly',
+            alignItems: 'center',
+            
+            backgroundColor: 'red'
+        },style]}>
+            <StatusBar backgroundColor={statusbarColor} barStyle={barStyle}/>
+            {children}
+        </View>
+
+    )
+}

App/components/header.js

@@ -0,0 +1,8 @@
+import { Container } from './container';
+import { Header } from './header';
+import { Content } from './content'
+export {
+    Container,
+    Header,
+    Content
+}

App/components/index.js

@@ -1,16 +1,25 @@
 import React, {PureComponent} from 'react';
 import {View, Text, Button} from 'react-native';
 import {GlobalStyle} from '../../theme/global';
+import { Container, Header, Content } from '../../components/index';
 
 export default class AboutScreen extends PureComponent {
   render() {
     return (
-      <View style={[GlobalStyle.mainContainer]}>
+      <Container>
+        <Header 
+        barStyle="dark-content"
+        statusbarColor="white">
+          <Text>Header</Text>
+        </Header>
+        <Content>
         <Text>AboutScreen</Text>
         <Button
           onPress={() => this.props.navigation.push('details')}
           title="go to details"></Button>
-      </View>
+        </Content>
+        
+      </Container>
     );
   }
 }

App/containers/about/index.js

@@ -1,23 +1,29 @@
 import React, {PureComponent} from 'react';
 import {View, Text, Button} from 'react-native';
+import { Container, Header, Content } from '../../components/index';
 
 export default class DetailsScreens extends PureComponent {
   constructor(props) {
     super(props);
   }
   render() {
     return (
-      <View
+      <Container
         style={{
           flex: 1,
           justifyContent: 'center',
           alignItems: 'center',
         }}>
-        <Text>Details</Text>
-        <Button
+         <Header 
+        barStyle="dark-content"
+        statusbarColor="white">
+          <Button
           onPress={() => this.props.navigation.pop()}
           title="go Back"></Button>
-      </View>
+          <Text>Details</Text>
+        </Header>
+        
+      </Container>
     );
   }
 }

App/containers/details/index.js

@@ -0,0 +1,19 @@
+import * as loginTypes from './types';
+
+export const login = loginData => ({
+    type: loginTypes.LOGIN,
+    loginData
+});
+
+export const LogOut = () => ({
+    type: loginTypes.LOGOUT
+});
+
+export const loginSuccess = user =>({
+    type: loginTypes.LOGIN_SUCCESS,
+    user
+});
+
+export const loginError = () =>({
+    type: loginTypes.LOGIN_ERROR
+});

App/containers/login/actions.js

@@ -1,26 +1,67 @@
 import React, {PureComponent} from 'react';
-import {View, Text, Button} from 'react-native';
+import {View, Text,Image, Button, StyleSheet} from 'react-native';
 import NavigationService from '../../utils/navigationService';
 import storageService from '../../utils/storageService';
+import { connect } from 'react-redux';
+import * as loginActions from './actions';
 
-export default class LoginScreen extends PureComponent {
+class LoginScreen extends PureComponent {
+  constructor(props) {
+    super(props)
+  }
   render() {
     return (
       <View
         style={{
           flex: 1,
-          padding: 20,
-          justifyContent: 'center',
+          padding: 30,
+          justifyContent: 'space-evenly',
           alignItems: 'center',
         }}>
-        <Text>Login</Text>
+          <Image style={[style.image]}
+          source={require('../../assets/images/fidisys.png')}></Image>
+          <Text style={[style.title]}>A React-Native Boilerplate with redux,saga and react navigation</Text>
         <Button
+        style={[style.button]}
           onPress={() => {
-            storageService.setApiKey('12345');
-            NavigationService.navigate('Home');
+           this.props.login({token: '12345'});
+            
           }}
-          title="click"></Button>
+          title="Login"></Button>
       </View>
     );
   }
 }
+
+const mapStateToProps = state => {
+	return {
+		...state
+	};
+};
+const mapDispatchToProps = dispatch => {
+	return {
+		login: loginData => dispatch(loginActions.login(loginData))
+	};
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(LoginScreen);
+
+export const style = StyleSheet.create({
+  image:{
+    width: 300,
+    height: 100,
+    resizeMode: 'cover',
+  },
+  title: {
+    paddingHorizontal: 15,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#754abc'
+  },
+  button: {
+    backgroundColor: 'green'
+  }
+})