Add Send Prescription Screen

components/PrescriptionCreator/index.tsx

@@ -1,9 +1,10 @@
 import {Dimensions, Image, StyleSheet, Text, View} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
-import {PropsWithChildren} from 'react';
-import {Button, Card} from '@ant-design/react-native';
+import {PropsWithChildren, useState} from 'react';
+import {Button, Card, Modal} from '@ant-design/react-native';
 import { V1Field } from '@formstr/sdk/dist/interfaces';
 import { InputFiller } from '../Inputs/Inputs';
+import { SendPrescription } from './sendPrescription';
 
 type SectionProps = PropsWithChildren<{
   title: string;
@@ -59,7 +60,8 @@ function Section({children, title}: SectionProps): React.JSX.Element {
 }
 
 export const PrescriptionCreator = ({form} : {form: any}) => {
-  if(form === null) return <View><Text>Loading...</Text></View>
+  if(form === null) return <View style={{backgroundColor: "#ffffff"}}><Text style={{color: "#000000"}}>Loading...</Text></View>
+  const [showSendScreen, setShowSendScreen] = useState(false);
 
   return (
     <View
@@ -110,9 +112,10 @@ export const PrescriptionCreator = ({form} : {form: any}) => {
               </Card>
             );
           })}
-          <Button type='primary'> Create RX </Button>
+          <Button type='primary' onPress={()=>{ setShowSendScreen(true)}}> Create RX </Button>
         </View>
       </Section>
+      <SendPrescription isVisible={showSendScreen} onClose={() => { setShowSendScreen(false)}}/>
     </View>
   );
 };

components/PrescriptionCreator/sendPrescription.tsx

@@ -0,0 +1,21 @@
+import { Button, Modal, Text, TextInput, View } from "react-native"
+
+export const SendPrescription = ({ isVisible, onClose }: { isVisible: boolean, onClose: () => void }) => {
+    return (
+        <Modal 
+            visible={isVisible}
+            onRequestClose={() => { console.log("closing....") ; onClose(); return true }}
+            onDismiss={() => {onClose()}}
+            presentationStyle="pageSheet">
+            <View style={{ backgroundColor: "#ffffff", height: 500, justifyContent: "center", display: "flex", margin: 30, borderColor: "red", alignItems: "center"}}>
+                <View style={{margin: 5}}>
+                    <Text style={{color: "#000000", margin: 5}}>Search an npub to send prescription</Text>
+                    <TextInput style={{borderColor: "#000000", borderWidth: 1, borderRadius: 5}}/>
+                </View>
+                <View>
+                    <Button title="Send"></Button>
+                </View>
+            </View>
+        </Modal>
+    )
+}