feat: refactor design to use theme

App.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Provider as PaperProvider } from 'react-native-paper';
 import { Provider as StoreProvider } from 'react-redux';
+
 import MainNavigation from './components/MainNavigation';
 
 // REDUX
@@ -21,5 +22,3 @@ export default function App() {
     </StoreProvider>
   );
 }
-
-// export default App;

README.md

@@ -13,6 +13,7 @@ Here are some quick npm commands to get started:
 
 - [React Native Paper](https://callstack.github.io/react-native-paper/index.html)
 - [Native Base](https://docs.nativebase.io/)
+- [Understanding Flexbox](https://yogalayout.com/playground)
 
 
 ## Standards

components/FormikFields/PaperInputPicker/index.js

@@ -8,6 +8,7 @@ import { TextInput, Button } from 'react-native-paper';
 import AutoFill from '../AutoFill';
 
 import getLocation from '../../../modules/geolocation';
+import theme from '../../../modules/theme';
 
 const PaperInputPicker = ({ data, formikProps, ...rest }) => {
   const { label, formikKey, fieldType } = data;
@@ -43,6 +44,8 @@ const PaperInputPicker = ({ data, formikProps, ...rest }) => {
             onChangeText={handleChange(formikKey)}
             onBlur={handleBlur(formikKey)}
             {...rest} //eslint-disable-line
+            mode="outlined"
+            theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
           />
           <Text style={{ color: 'red' }}>
             {touched[formikKey] && errors[formikKey]}
@@ -52,7 +55,7 @@ const PaperInputPicker = ({ data, formikProps, ...rest }) => {
       {fieldType === 'select' && (
         <View>
           {data.options.map((result) => (
-            <Button key={result} mode="contained" onPress={() => setFieldValue(formikKey, result)}>
+            <Button key={result} mode="outlined" onPress={() => setFieldValue(formikKey, result)}>
               <Text>{result}</Text>
             </Button>
           ))}

components/Header/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text, IconButton } from 'react-native-paper';
+
+import styles from './styles';
+
+const Header = () => {
+  const { header, headerText, headerIcon } = styles;
+  return (
+    <View style={header}>
+      <Text style={headerText}>PUENTE</Text>
+      <View style={headerIcon}>
+        <IconButton
+          icon="account"
+          color={headerIcon.color}
+          size={30}
+        />
+      </View>
+      <View style={headerIcon}>
+        <IconButton
+          icon="settings"
+          color={headerIcon.color}
+          size={30}
+        />
+      </View>
+
+    </View>
+  );
+};
+
+export default Header;

components/Header/styles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import theme from '../../modules/theme';
+
+const borderRadius = 20;
+
+const { accent, black } = theme.colors;
+
+const styles = StyleSheet.create({
+  header: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    height: 80,
+    borderBottomRightRadius: borderRadius,
+    borderBottomLeftRadius: borderRadius,
+    backgroundColor: accent
+  },
+  headerIcon: {
+    borderRadius: 30,
+    color: black
+  },
+  headerText: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: black,
+    flex: 0.7
+  },
+
+});
+
+export default styles;

components/MainNavigation/index.js

@@ -1,20 +1,28 @@
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
 import {
   Platform, StatusBar, StyleSheet, View
 } from 'react-native';
 
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
 import BottomTabNavigator from './BottomTabNavigator.';
 import LinkingConfiguration from './LinkingConfiguration';
-import { initialize } from '../../services/parse/auth/index';
+import Header from '../Header';
+
 import SignIn from '../../domains/SignIn';
 import SignUp from '../../domains/SignUp';
 import GetPinCode from '../../domains/PinCode/GetPinCode';
 import StorePinCode from '../../domains/PinCode/StorePinCode';
 
+import { initialize } from '../../services/parse/auth/index';
+
+import theme from '../../modules/theme';
+
 const Stack = createStackNavigator();
 
+const { background } = theme.colors;
+
 export default class MainNavigation extends React.Component {
   constructor(props) {
     super(props);
@@ -27,16 +35,31 @@ export default class MainNavigation extends React.Component {
     // if (!isLoadingComplete) {
     //   return null;
     // }
+    const { container } = styles;
     return (
-      <View style={styles.container}>
-        {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
+      <View style={container}>
+        {Platform.OS === 'ios' && <StatusBar />}
         <NavigationContainer linking={LinkingConfiguration}>
           <Stack.Navigator>
-            <Stack.Screen name="Sign In" component={SignIn} />
-            <Stack.Screen name="Sign Up" component={SignUp} />
-            <Stack.Screen name="GetPincode" component={GetPinCode} />
-            <Stack.Screen name="StorePincode" component={StorePinCode} />
-            <Stack.Screen name="Root" component={BottomTabNavigator} />
+            <Stack.Screen
+              name="Sign In"
+              component={SignIn}
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen name="Sign Up" component={SignUp} options={{ headerShown: false }} />
+            <Stack.Screen name="GetPincode" component={GetPinCode} options={{ headerShown: false }} />
+            <Stack.Screen name="StorePincode" component={StorePinCode} options={{ headerShown: false }} />
+            <Stack.Screen
+              name="Root"
+              component={BottomTabNavigator}
+              options={() => ({
+                header: () => (
+                  <View style={{ backgroundColor: background }}>
+                    <Header />
+                  </View>
+                )
+              })}
+            />
           </Stack.Navigator>
         </NavigationContainer>
       </View>
@@ -47,6 +70,6 @@ export default class MainNavigation extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-  },
+    backgroundColor: background,
+  }
 });

domains/DataAnalysis/index.js

@@ -3,6 +3,8 @@ import {
   StyleSheet, Text, View
 } from 'react-native';
 
+import theme from '../../modules/theme';
+
 export default function DataAnalysis() {
   return (
     <View style={styles.container}>
@@ -11,10 +13,12 @@ export default function DataAnalysis() {
   );
 }
 
+const { background } = theme.colors;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: background,
   },
   text: {
     flex: 1,

domains/DataCollection/Forms/IdentificationForm/index.js

@@ -5,6 +5,7 @@ import {
 } from 'react-native';
 import { Text, Button } from 'react-native-paper';
 import { Formik } from 'formik';
+import styles from '../../../../styles/layout/form';
 // import * as yup from 'yup';
 import { postObjectsToClass } from '../../../../services/parse/crud';
 import PaperInputPicker from '../../../../components/FormikFields/PaperInputPicker';
@@ -57,7 +58,7 @@ const IdentificationForm = ({ navigation }) => {
     // validationSchema={validationSchema}
     >
       {(formikProps) => (
-        <>
+        <View style={styles.formContainer}>
           {inputs.length && inputs.map((result) => (
             <View key={result.formikKey}>
               <PaperInputPicker
@@ -75,7 +76,7 @@ const IdentificationForm = ({ navigation }) => {
               <Text>Submit</Text>
             </Button>
           )}
-        </>
+        </View>
       )}
     </Formik>
   );

domains/HomeScreen/index.js

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import {
-  Platform, StyleSheet, Text, View
+  StyleSheet, Text, View
 } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 import { Button } from 'react-native-paper';
+import { ScrollView } from 'react-native-gesture-handler';
+
 import getTasks from '../../services/tasky';
-import { deleteData } from '../../modules/async-storage';
 import { retrieveSignOutFunction } from '../../services/parse/auth';
 
+import { deleteData } from '../../modules/async-storage';
+import theme from '../../modules/theme';
+
 const HomeScreen = (props) => {
   const [tasks, setTasks] = useState(null);
   const { navigation } = props;
@@ -47,38 +50,12 @@ const HomeScreen = (props) => {
     </ScrollView>
   );
 };
-
-HomeScreen.navigationOptions = {
-  header: null,
-};
+const { colors } = theme;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-  },
-  contentContainer: {
-    paddingTop: 30,
-  },
-  tabBarInfoContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    ...Platform.select({
-      ios: {
-        shadowColor: 'black',
-        shadowOffset: { width: 0, height: -3 },
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-      },
-      android: {
-        elevation: 20,
-      },
-    }),
-    alignItems: 'center',
-    backgroundColor: '#fbfbfb',
-    paddingVertical: 20,
+    backgroundColor: colors.background,
   },
   row: {
     flex: 1,

domains/PinCode/GetPinCode/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { Text, Button } from 'react-native-paper';
 import { Formik } from 'formik';
-import FormInput from '../../../components/FormInput';
+import FormInput from '../../../components/FormikFields/FormInput';
 import { getData, deleteData } from '../../../modules/async-storage';
 import { retrieveSignInFunction } from '../../../services/parse/auth';
 

domains/PinCode/StorePinCode/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { ActivityIndicator } from 'react-native';
 import { Text, Button } from 'react-native-paper';
 import { Formik } from 'formik';
-import FormInput from '../../../components/FormInput';
+import FormInput from '../../../components/FormikFields/FormInput';
 import { storeData } from '../../../modules/async-storage';
 
 const StorePinCode = ({ navigation }) => (

domains/SignIn/index.js

@@ -17,7 +17,7 @@ import {
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import { retrieveSignInFunction } from '../../services/parse/auth';
-import FormInput from '../../components/FormInput';
+import FormInput from '../../components/FormikFields/FormInput';
 import LanguagePicker from '../../components/LanguagePicker';
 import CredentialsModal from './CredentialsModal';
 import { storeData, getData, deleteData } from '../../modules/async-storage';

domains/SignUp/index.js

@@ -13,7 +13,7 @@ import { Formik } from 'formik';
 import * as yup from 'yup';
 import { retrieveSignUpFunction, retrieveSignInFunction } from '../../services/parse/auth';
 
-import FormInput from '../../components/FormInput';
+import FormInput from '../../components/FormikFields/FormInput';
 import TermsModal from '../../components/TermsModal';
 // STYLING
 import theme from '../../modules/theme';

modules/theme/index.js

@@ -4,8 +4,10 @@ const theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
-    primary: '#FFE680',
-    accent: '#3E81FD',
+    primary: '#3d80fc',
+    accent: '#FFE680',
+    background: '#F5F5F5',
+    black: '#333'
   },
 };