Merge pull request #5 from thechosenoneNEO/skywno-patch-2

Add files via upload

src/App.js

@@ -0,0 +1,36 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React, {useEffect} from 'react';
+import SplashScreen from 'react-native-splash-screen';
+import AsyncStorage from '@react-native-community/async-storage'
+
+import {
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+
+import Navigator from '~/Screens/Navigator';
+
+
+const App = () => {
+  useEffect(()=>{
+    setTimeout(()=> {
+      SplashScreen.hide();
+    }, 1000);
+  }, []);
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" /> 
+      <Navigator />
+    </>
+  );
+};
+
+export default App;

src/Components/Background/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Styled from 'styled-components/native';
+
+
+const Container = Styled.SafeAreaView`
+  flex: 1;
+  background-color: #FFFFFF;
+  align-items: center;
+  justify-content: center;
+`;
+
+
+const Background = () => {
+  return(
+    <Container>
+
+    </Container>
+  );
+};
+
+export default Background;

src/Components/Button/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Styled from 'styled-components/native';
+
+const StyleButton = Styled.TouchableOpacity`
+  width: 100%;
+  height: 30px;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  border: 1px;
+  backgroundColor: #10D7FC;
+`;
+
+const Label = Styled.Text`
+  color: #333434;
+  font-family: "Karla-Italic";
+  font-size: 20px;
+`;
+
+
+const Button = (props) => {
+  return(
+    <StyleButton style = {props.style} onPress ={props.onPress}>
+      <Label>{props.label}</Label>
+    </StyleButton>
+  );
+};
+
+
+export default Button;

src/Components/Datetimepicker/index.js

@@ -0,0 +1,44 @@
+import React, {useState} from 'react';
+import {View, Button, Platform} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+const Datetimepicker = () => {
+  const [date, setDate] = useState(new Date(2020, 5, 18));
+  const [mode, setMode] = useState('date');
+  const [show, setShow] = useState(false);
+
+  const onChange = (event, selectedDate) => {
+    const currentDate = selectedDate || date;
+    setShow(Platform.OS === 'ios');
+    setDate(currentDate);
+  };
+
+  const showMode = currentMode => {
+    setShow(true);
+    setMode(currentMode);
+  };
+
+  const showDatepicker = () => {
+    showMode('date');
+  };
+
+  return (
+    <View>
+      <View>
+        <Button onPress={showDatepicker} title="Show date picker!" />
+      </View>
+      {show && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          timeZoneOffsetInMinutes={0}
+          value={date}
+          mode='date'
+          is24Hour={true}
+          display="default"
+          onChange={onChange}
+          />
+          )}
+        </View>
+      );
+    };      
+export default Datetimepicker;

src/Components/Input/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Styled from 'styled-components/native';
+
+const Container = Styled.View`
+  width: 100%
+  height: 40px;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-radius: 4px;
+  background-color: #333333;
+`;
+
+const InputField = Styled.TextInput`
+  flex: 1;
+  color: #FFFFFF; 
+`;
+
+
+const Input = (
+  placeholder,
+  keyboardType,
+  secureTextEntry,
+  style,
+  clearMode,
+  onChangeText
+) => {
+  return(
+    <Container style ={style}>
+      <InputField
+        selectionColor="#FFFFFF"
+        secureTextEntry={secureTextEntry}
+        keyboardType = {keyboardType ? keyboardType : 'default'}
+        autoCapitalize = "none"
+        autoCorrect= {false}
+        allowFontScaling ={false}
+        placeholderTextColor= "#FFFFFF"
+        placeholder = {placeholder}
+        clearButtonMode ={clearMode ? 'while-editing': 'never'}
+        onChangeText ={onChangeText} />
+    </Container>
+  );
+};
+
+export default Input;

src/Components/RedButton/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Styled from 'styled-components/native';
+
+const StyleButton = Styled.TouchableOpacity`
+  width: 100%;
+  height: 30px;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  border: 1px;
+  backgroundColor: #FFA37F;
+`;
+
+const Label = Styled.Text`
+  color: #333434;
+  font-family: "Karla-Italic";
+  font-size: 20px;
+`;
+
+
+const RedButton = (props) => {
+  return(
+    <StyleButton style = {props.style} onPress ={props.onPress}>
+      <Label>{props.label}</Label>
+    </StyleButton>
+  );
+};
+
+
+export default RedButton;

src/Screens/CheckLogin/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import {NavigationScreenProp, NavigationState} from 'react-navigation';
+import {ActivityIndicator } from 'react-native';
+import Styled from 'styled-components/native';
+
+const Container = Styled.View`
+  flex: 1;
+  background-color: #141414;
+  justify-content: center;
+  align-items: center;
+`;
+
+
+// just to delete the stored keys and values in asyncstorage in the beginning
+const clearAppData = async function() {
+  try {
+      const keys = await AsyncStorage.getAllKeys();
+      await AsyncStorage.multiRemove(keys);
+  } catch (error) {
+      console.error('Error clearing app data.');
+  }
+}
+
+const CheckLogin = ( navigation ) => {
+  clearAppData;
+  console.log("Here we are!")
+  AsyncStorage.getItem('key')
+    .then(value => {
+      if (value) /*{
+        console.log('navigate to helper Navigator')
+        navigation.navigate('HelperNavigator');
+      } else */{
+        console.log('navigate to Login Navigator')
+        navigation.navigate('LoginNavigator');
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+
+    return (
+      <Container>
+        <ActivityIndicator size="large" color="#70915" />
+      </Container>
+    );
+};
+
+//setting in order to not show the header of the navigation during the loading time.
+CheckLogin.navigationOptions = {
+  header: null,
+};
+
+export default CheckLogin;

src/Screens/ComputerRelatedTask/index.js

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import {NavigationScreenProp, NavigationState} from 'react-navigation';
+import {
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+  TextInput,
+  Image
+} from "react-native";
+
+import Button from '~/Components/Button';
+
+const ComputerRelatedTask = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <View style = {{flex:1, flexDirection: 'row', alignItems: 'center'}}>
+        <View style ={{flex: 1}}>
+          <Image source={require('~/Assets/Images/FavorGiver.png')} 
+            style={{ width: 90, height: 90 }} />
+        </View>
+        <View style = {{flex:2.5 }}>
+          <Text style ={{textAlign: 'center', fontSize: 20, fontFamily: 'Rubik-Bold'}}>Registration Form</Text>
+        </View>
+      </View>
+      <View style = {styles.header}>
+          <Text style ={{color: "#333434", fontFamily: 'Karla_Italic', fontSize: 20, textAlign: 'center'}}>
+            Computer related task
+          </Text>
+      </View>
+      <View style = {styles.body}>
+        <Text> Task Info here will updated ! </Text>
+      </View>
+      <View style={styles.button}>
+        <Button
+          label="<= Back"
+          onPress = {() => {
+            navigation.navigate('HelperCheckbox')}}
+        />
+      </View>
+    </View>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "space-between",
+    padding: 5,
+    margin: 10
+  },
+  body:{
+    flex: 4,
+    marginTop: 10,
+    borderWidth: 1,
+    backgroundColor: '#F9F4EC',
+    alignContent: 'center',
+  },
+  header:{
+    height: 30,
+    borderRadius: 1,
+    marginTop: 40,
+    justifyContent: 'center',
+    backgroundColor: '#10D7FC',
+    marginHorizontal: 80
+
+  },
+  button: {
+    flex: 1,
+    paddingHorizontal: 120,
+    marginTop: 20
+  }
+})
+
+export default ComputerRelatedTask;