Add Collapsible Sections

components/PrescriptionCreator/PatientForm.tsx

@@ -27,7 +27,6 @@ export const PatientForm: React.FC<PatientFormProps> = ({
   };
 
   return (
-    <Section title="Patient">
     <View>
       <View>
         <Text style={TextTheme}>Name</Text>
@@ -72,6 +71,5 @@ export const PatientForm: React.FC<PatientFormProps> = ({
         />
       </View>
     </View>
-    </Section>
   );
 };

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} />
-          <Button onPress={handleButtonPress} title="Create Rx" />
-          {/* <Text
-              style={[
-                {
-                  color: Colors.light,
-                },
-              ]}>
             {' '}
-            </Text>
+            <PatientForm nestedFormCallback={nestedFormCallback} />
-          </Button> */}
+          </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" />
         </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}>
+      {collapsible ? (
+        <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",