Add Collapsible Sections

components/PrescriptionCreator/PatientForm.tsx

@@ -27,51 +27,49 @@ export const PatientForm: React.FC<PatientFormProps> = ({
   };
 
   return (
-    <Section title="Patient">
+    <View>
       <View>
-        <View>
+        <Text style={TextTheme}>Name</Text>
-          <Text style={TextTheme}>Name</Text>
+        <TextInput
-          <TextInput
+          style={styles.input}
-            style={styles.input}
+          placeholder="Enter Patients Name"
-            placeholder="Enter Patients Name"
+          value={form.name}
-            value={form.name}
+          placeholderTextColor="white"
-            placeholderTextColor="white"
+          onChangeText={(text: string) => handleTextChange('name', text)}
-            onChangeText={(text: string) => handleTextChange('name', text)}
+        />
-          />
+      </View>
-        </View>
+      <View>
-        <View>
+        <Text style={TextTheme}>Date of Birth</Text>
-          <Text style={TextTheme}>Date of Birth</Text>
+        {form.date_of_birth ? (
-          {form.date_of_birth ? (
+          <View>
-            <View>
+            <Text style={TextTheme}>{form.date_of_birth}</Text>
-              <Text style={TextTheme}>{form.date_of_birth}</Text>
-              <Button
-                onPress={() => {
-                  setOpenDate(true);
-                }}
-                title="Edit"
-              />
-            </View>
-          ) : (
             <Button
               onPress={() => {
                 setOpenDate(true);
               }}
-              title="Pick a date"
+              title="Edit"
             />
-          )}
+          </View>
-          <DatePicker
+        ) : (
-            modal
+          <Button
-            mode={'date'}
+            onPress={() => {
-            open={openDate}
+              setOpenDate(true);
-            date={new Date(form.date_of_birth || '01-01-1999')}
-            onCancel={() => setOpenDate(false)}
-            onConfirm={(date: Date) => {
-              handleTextChange('date_of_birth', date.toDateString());
-              setOpenDate(false);
             }}
+            title="Pick a date"
           />
-        </View>
+        )}
+        <DatePicker
+          modal
+          mode={'date'}
+          open={openDate}
+          date={new Date(form.date_of_birth || '01-01-1999')}
+          onCancel={() => setOpenDate(false)}
+          onConfirm={(date: Date) => {
+            handleTextChange('date_of_birth', date.toDateString());
+            setOpenDate(false);
+          }}
+        />
       </View>
-    </Section>
+    </View>
   );
 };

components/PrescriptionCreator/index.tsx

@@ -196,6 +196,7 @@ export const PrescriptionCreator = () => {
     <View
       style={{
         backgroundColor: Colors.black,
+        minHeight: Dimensions.get('window').height,
       }}>
       <Image
         style={{
@@ -234,19 +235,17 @@ export const PrescriptionCreator = () => {
 
       <Section title="Prescription">
         <View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-          <PatientForm nestedFormCallback={nestedFormCallback} />
+          <Section title="Patient" collapsible={true}>
-          <AddressForm nestedFormCallback={nestedFormCallback} />
+            {' '}
-          <MedicineForm nestedFormCallback={nestedFormCallback} />
+            <PatientForm nestedFormCallback={nestedFormCallback} />
+          </Section>
+          <Section title="Address" collapsible={true}>
+            <AddressForm nestedFormCallback={nestedFormCallback} />
+          </Section>
+          <Section title="Medicine" collapsible={true}>
+            <MedicineForm nestedFormCallback={nestedFormCallback} />
+          </Section>
           <Button onPress={handleButtonPress} title="Create Rx" />
-          {/* <Text
-              style={[
-                {
-                  color: Colors.light,
-                },
-              ]}>
-              {' '}
-            </Text>
-          </Button> */}
         </View>
       </Section>
       <ImportNsec

components/common/Section.tsx

@@ -1,17 +1,44 @@
-import {PropsWithChildren} from 'react';
+import {PropsWithChildren, useState} from 'react';
-import {Dimensions, StyleSheet, Text, View} from 'react-native';
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  Touchable,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {styles} from './styles';
 
 type SectionProps = PropsWithChildren<{
   title: string;
+  collapsible?: boolean;
 }>;
 
-export function Section({children, title}: SectionProps): React.JSX.Element {
+export function Section({
+  children,
+  title,
+  collapsible,
+}: SectionProps): React.JSX.Element {
+  const [collapsed, setCollapsed] = useState(true);
+
   return (
     <View style={styles.sectionContainer}>
-      <Text style={styles.sectionTitle}>{title}</Text>
+      {collapsible ? (
-      <Text style={[styles.sectionDescription]}>{children}</Text>
+        <TouchableOpacity
+          onPress={() => {
+            setCollapsed(!collapsed);
+          }}>
+          <Text style={styles.sectionTitle}>
+            {title} {collapsed ? '→' : '↓'}
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <Text style={styles.sectionTitle}>{title}</Text>
+      )}
+      {!collapsible || !collapsed ? (
+        <Text style={[styles.sectionDescription]}>{children}</Text>
+      ) : null}
     </View>
   );
 }

package.json

@@ -17,6 +17,9 @@
     "buffer": "^6.0.3",
     "events": "^3.3.0",
     "nostr-tools": "^2.3.1",
+    "react-native-safe-area-context": "^4.5.0",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
     "react": "18.2.0",
     "react-native": "0.73.4",
     "react-native-crypto": "^2.2.0",