Multline Input Refactor

screens/ContactUsPage.js

@@ -1,11 +1,45 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView, StyleSheet, Text, View, ScrollView } from 'react-native'
 import React from 'react'
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader'
+import FormTextInput from '../components/molecules/FormTextInput';
+import { capitalize } from '../utils/Constants/functions';
+import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton';
+
+
+const ContactUsPage = ({navigation}) => {
+
+  const [contactDetails, setContactDetails] = React.useState({
+    fullname: '',
+    email: '',
+    message: ''
+  });
 
-const ContactUsPage = () => {
   return (
-    <View>
-      <Text>ContactUsPage</Text>
-    </View>
+    <SafeAreaView>
+      <NewscoutTitleHeader title={"Contact Us"} backButtonShown onBackClick={() => navigation.goBack()} />
+      <ScrollView showsVerticalScrollIndicator>
+        <SafeAreaView style={{ padding: 16, gap: 8 }}>
+          {Object.keys(contactDetails).map(key => <FormTextInput
+            title={capitalize(key)}
+            multiline
+            placeholder={capitalize(key)}
+            value={contactDetails[key]}
+            onChange={text =>
+              setProfileData(prev => ({ ...prev, [key]: text }))
+            }
+          />)}
+          <ThemedTextButton
+            title={'Contact Us'}
+            onPress={true}
+            theme={'secondary-contained'}
+            buttonStyle={{
+              marginVertical: 16,
+              width: 'auto'
+            }} />
+        </SafeAreaView>
+      </ScrollView>
+
+    </SafeAreaView>
   )
 }