feat: change styling of forms view

components/FormikFields/PaperInputPicker/index.js

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import {
-  View, Text, StyleSheet
+  View, Text
 } from 'react-native';
 import {
-  TextInput, Button, Title
+  TextInput, Button, Headline
 } from 'react-native-paper';
 
 import AutoFill from './AutoFill';
 import HouseholdManager from './HouseholdManager';
 
 import getLocation from '../../../modules/geolocation';
+
 import { theme, layout } from '../../../modules/theme';
+import styles from './index.style';
 
 const PaperInputPicker = ({
   data, formikProps, scrollViewScroll, setScrollViewScroll, ...rest
@@ -103,20 +105,9 @@ const PaperInputPicker = ({
           />
         </View>
       )}
-      {fieldType === 'topLabel' && (
-        <View>
-          <Title>{label}</Title>
-          <View
-            style={styles.horizontalLine}
-          />
-        </View>
-      )}
       {fieldType === 'header' && (
         <View>
-          <View
-            style={styles.horizontalLine}
-          />
-          <Title>{label}</Title>
+          <Headline style={styles.header}>{label}</Headline>
           <View
             style={styles.horizontalLine}
           />
@@ -127,7 +118,7 @@ const PaperInputPicker = ({
           <Text>{label}</Text>
           <View style={styles.multiInputContainer}>
             {data.options.map((result) => (
-              <View style={styles.inputItem}>
+              <View key={result} style={styles.inputItem}>
                 <TextInput
                   label={result}
                   onChangeText={handleChange(result)}
@@ -148,23 +139,4 @@ const PaperInputPicker = ({
   );
 };
 
-const styles = StyleSheet.create({
-  horizontalLine: {
-    borderBottomColor: '#D0D0D0',
-    borderBottomWidth: 1,
-    marginTop: 10,
-    marginBottom: 10,
-
-  },
-  inputItem: {
-    flex: 1,
-    marginHorizontal: 5
-  },
-  multiInputContainer: {
-    flexDirection: 'row'
-  },
-  container: {
-    flexDirection: 'column'
-  }
-});
 export default PaperInputPicker;

components/FormikFields/PaperInputPicker/index.style.js

@@ -0,0 +1,29 @@
+import {
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  horizontalLine: {
+    borderBottomColor: '#D0D0D0',
+    borderBottomWidth: 1,
+    marginTop: 10,
+    marginBottom: 10,
+
+  },
+  inputItem: {
+    flex: 1,
+    marginHorizontal: 5
+  },
+  multiInputContainer: {
+    flexDirection: 'row'
+  },
+  container: {
+    flexDirection: 'column'
+  },
+  header: {
+    fontWeight: 'bold',
+    marginTop: 10
+  }
+});
+
+export default styles;

domains/DataCollection/Forms/IdentificationForm/config/config.js

@@ -1,7 +1,9 @@
 const configArray = [
   {
-    label: 'Basic Information',
-    fieldType: 'header'
+    label: 'Demographics',
+    fieldType: 'header',
+    formikKey: 'none_bi',
+
   },
   {
     label: 'First Name',
@@ -16,12 +18,6 @@ const configArray = [
     fieldType: 'input'
 
   },
-  // {
-  //   label: "Relationship",
-  //   formikKey: 'relationship',
-  //   value: "",
-  //   fieldType: "input"
-  // },
   {
     label: 'Nickname',
     formikKey: 'nickname',
@@ -56,10 +52,12 @@ const configArray = [
     value: '',
     fieldType: 'input'
   },
-  {
-    label: 'Basic Information',
-    fieldType: 'header'
-  },
+  // {
+  //   label: 'Demographic Information',
+  //   fieldType: 'header',
+  //   formikKey: 'none_bi2',
+
+  // },
   {
     label: 'Marriage Status',
     formikKey: 'marriageStatus',
@@ -72,11 +70,6 @@ const configArray = [
       'widow'
     ]
   },
-  // {
-  //   label: "Family Relationships",
-  //   formikKey: 'familyRelationships',
-  //   value: ""
-  // },
   {
     label: 'Occupation',
     formikKey: 'occupation',
@@ -100,7 +93,8 @@ const configArray = [
   },
   {
     label: 'Location',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_location',
   },
   {
     label: 'Community Name',
@@ -123,7 +117,9 @@ const configArray = [
   // },
   {
     label: 'Insurance',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_insurance',
+
   },
   {
     label: 'Insurance Number',
@@ -162,7 +158,9 @@ const configArray = [
   },
   {
     label: 'Household',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_household',
+
   },
   {
     label: 'Household',