added SafeAreaView components to all screens

- separate navbar from scrollview
riad40 · May 23, 2023 · eb883d6 · eb883d6
1 parent 7751478
commit eb883d6
Show file tree

Hide file tree

Showing 18 changed files with 446 additions and 377 deletions.
diff --git a/src/assets/styles/index.ts b/src/assets/styles/index.ts
@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native"
-import { screenBackground } from "../../constants/colors"
+import colors from "../../constants/colors"
 
 const styles = StyleSheet.create({
-    container: {
-        backgroundColor: screenBackground,
+    appContainer: {
+        backgroundColor: colors.screenBackground,
         width: "100%",
         height: "100%",
     },

diff --git a/src/components/common/buttons/wideButton/wideButtonStyles.ts b/src/components/common/buttons/wideButton/wideButtonStyles.ts
@@ -7,7 +7,7 @@ const wideButtonStyles = StyleSheet.create({
         paddingVertical: 20,
         width: "90%",
         alignSelf: "center",
-        marginVertical: 20,
+        marginVertical: 10,
         borderRadius: 10,
     },
     buttonText: {

diff --git a/src/screens/dashboard/Dashboard.tsx b/src/screens/dashboard/Dashboard.tsx
@@ -1,44 +1,46 @@
 import { NavBar, Heading, StateCard } from "../../components"
-import { View, ScrollView } from "react-native"
+import { View, ScrollView, SafeAreaView } from "react-native"
 import styles from "../../assets/styles"
 import dashboardStyles from "./dashboardStyles"
 
 const Dashboard = (): JSX.Element => {
     return (
-        <ScrollView style={styles.container}>
+        <SafeAreaView>
             <NavBar />
-            <View style={dashboardStyles.container}>
-                <View style={dashboardStyles.headingContainer}>
-                    <Heading text="Tableau de bord" />
+            <ScrollView style={styles.appContainer}>
+                <View style={dashboardStyles.container}>
+                    <View style={dashboardStyles.headingContainer}>
+                        <Heading text="Tableau de bord" />
+                    </View>
+                    <StateCard
+                        state="Nombre de patients au total"
+                        value="6"
+                        color="#00C389"
+                        image={require("../../assets/images/User.png")}
+                    />
+                    <View style={dashboardStyles.wrapper}>
+                        <StateCard state="Nombre de patients ce mois" value="6" color="#00C389" />
+                        <StateCard state="Nombre de patients cette semaine" value="6" color="#00C389" />
+                    </View>
+                    <StateCard
+                        state="Nombre d’ordonnances au total"
+                        value="2"
+                        color="#BA68C8"
+                        image={require("../../assets/images/Prescription.png")}
+                    />
+                    <View style={dashboardStyles.wrapper}>
+                        <StateCard state="Nombre d’ordonnances ce mois" value="6" color="#BA68C8" />
+                        <StateCard state="Nombre d’ordonnances cette semaine" value="6" color="#BA68C8" />
+                    </View>
+                    <StateCard
+                        state="Produits"
+                        value="68292"
+                        color="#448AFF"
+                        image={require("../../assets/images/Pill.png")}
+                    />
                 </View>
-                <StateCard
-                    state="Nombre de patients au total"
-                    value="6"
-                    color="#00C389"
-                    image={require("../../assets/images/User.png")}
-                />
-                <View style={dashboardStyles.wrapper}>
-                    <StateCard state="Nombre de patients ce mois" value="6" color="#00C389" />
-                    <StateCard state="Nombre de patients cette semaine" value="6" color="#00C389" />
-                </View>
-                <StateCard
-                    state="Nombre d’ordonnances au total"
-                    value="2"
-                    color="#BA68C8"
-                    image={require("../../assets/images/Prescription.png")}
-                />
-                <View style={dashboardStyles.wrapper}>
-                    <StateCard state="Nombre d’ordonnances ce mois" value="6" color="#BA68C8" />
-                    <StateCard state="Nombre d’ordonnances cette semaine" value="6" color="#BA68C8" />
-                </View>
-                <StateCard
-                    state="Produits"
-                    value="68292"
-                    color="#448AFF"
-                    image={require("../../assets/images/Pill.png")}
-                />
-            </View>
-        </ScrollView>
+            </ScrollView>
+        </SafeAreaView>
     )
 }
 

diff --git a/src/screens/dashboard/dashboardStyles.ts b/src/screens/dashboard/dashboardStyles.ts
@@ -3,6 +3,7 @@ import { StyleSheet } from "react-native"
 const dashboardStyles = StyleSheet.create({
     container: {
         padding: 20,
+        marginBottom: 50,
     },
     wrapper: {
         flexDirection: "row",

diff --git a/src/screens/patients/patientDetails/PatientDetails.tsx b/src/screens/patients/patientDetails/PatientDetails.tsx
@@ -1,59 +1,63 @@
-import { View, Text, Image, ScrollView } from "react-native"
+import { View, Text, Image, ScrollView, SafeAreaView } from "react-native"
 import { NavBar, SimpleCard, DetailsCard } from "../../../components"
 import { PatientStackNavProps } from "../../../navigation/stacks/patientStack/@types"
 import patientDetailsStyles from "./patientDetailsStyles"
+import styles from "../../../assets/styles"
 
 const PatientDetails = ({
     navigation,
 }: {
     navigation: PatientStackNavProps<"PatientDetails">["navigation"]
 }): JSX.Element => {
     return (
-        <ScrollView>
+        <SafeAreaView>
             <NavBar navigation={navigation} />
-            <View style={patientDetailsStyles.container}>
-                <Image
-                    source={{ uri: "https://www.w3schools.com/w3images/avatar2.png" }}
-                    style={patientDetailsStyles.image}
+            <ScrollView style={styles.appContainer}>
+                <View style={patientDetailsStyles.container}>
+                    <Image
+                        source={{ uri: "https://www.w3schools.com/w3images/avatar2.png" }}
+                        style={patientDetailsStyles.image}
+                    />
+                    <Text style={patientDetailsStyles.name}>Khalid Redouani</Text>
+                    <Text style={patientDetailsStyles.type}>6 odonnances</Text>
+                </View>
+                {/* General informations */}
+                <DetailsCard
+                    heading="Informations générales"
+                    edit={true}
+                    details={[
+                        {
+                            title: "Nom",
+                            value: "Khalid",
+                        },
+                        {
+                            title: "Prénom",
+                            value: "Redouani",
+                        },
+                        {
+                            title: "CIN",
+                            value: "EE 123456",
+                        },
+                        {
+                            title: "Date de naissance",
+                            value: "(49 ans) 01/01/1990",
+                        },
+                        {
+                            title: "Téléphone",
+                            value: "06 12 34 56 78",
+                        },
+                        {
+                            title: "Date de création",
+                            value: "01/01/2021",
+                        },
+                    ]}
                 />
-                <Text style={patientDetailsStyles.name}>Khalid Redouani</Text>
-                <Text style={patientDetailsStyles.type}>6 odonnances</Text>
-            </View>
-            {/* General informations */}
-            <DetailsCard
-                heading="Informations générales"
-                edit={true}
-                details={[
-                    {
-                        title: "Nom",
-                        value: "Khalid",
-                    },
-                    {
-                        title: "Prénom",
-                        value: "Redouani",
-                    },
-                    {
-                        title: "CIN",
-                        value: "EE 123456",
-                    },
-                    {
-                        title: "Date de naissance",
-                        value: "(49 ans) 01/01/1990",
-                    },
-                    {
-                        title: "Téléphone",
-                        value: "06 12 34 56 78",
-                    },
-                    {
-                        title: "Date de création",
-                        value: "01/01/2021",
-                    },
-                ]}
-            />
-            <View style={patientDetailsStyles.bottom}>
-                <SimpleCard text="Ordonnances" />
-            </View>
-        </ScrollView>
+                <View style={patientDetailsStyles.bottom}>
+                    <SimpleCard text="Ordonnances" />
+                </View>
+                <View style={{ height: 50 }} />
+            </ScrollView>
+        </SafeAreaView>
     )
 }
 

diff --git a/src/screens/patients/patientsList/PatientsList.tsx b/src/screens/patients/patientsList/PatientsList.tsx
@@ -1,30 +1,40 @@
-import { ScrollView, View } from "react-native"
-import { NavBar, PatientCard } from "../../../components"
+import { ScrollView, View, SafeAreaView, FlatList } from "react-native"
+import { NavBar, PatientCard, Header, TextButton } from "../../../components"
 import { PatientStackNavProps } from "../../../navigation/stacks/patientStack/@types"
 import patientsListStyles from "./patientsListStyles"
-import { Header } from "../../../components"
 import patients from "../../../helpers/data/patients"
+import styles from "../../../assets/styles"
 
 const PatientsList = ({ navigation }: { navigation: PatientStackNavProps<"PatientsList">["navigation"] }) => {
     return (
-        <ScrollView nestedScrollEnabled={true}>
+        <SafeAreaView>
             <NavBar />
-            <Header
-                heading="Patients"
-                subHeading="45 300 Patients"
-                textButton="+ Ajouter un patient"
-                placeholder="Rechercher un patient"
-            />
-            <View style={patientsListStyles.container}>
-                {patients.map(patient => (
-                    <PatientCard
-                        key={patient.patientId}
-                        patient={patient}
-                        onPress={() => navigation.navigate("PatientDetails", { patientId: patient.patientId })}
+            <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
+                <Header
+                    heading="Patients"
+                    subHeading="45 300 Patients"
+                    textButton="+ Ajouter un patient"
+                    placeholder="Rechercher un patient"
+                />
+                <View style={patientsListStyles.container}>
+                    <FlatList
+                        data={patients}
+                        keyExtractor={item => item.patientId}
+                        renderItem={({ item }) => (
+                            <PatientCard
+                                key={item.patientId}
+                                patient={item}
+                                onPress={() => navigation.navigate("PatientDetails", { patientId: item.patientId })}
+                            />
+                        )}
                     />
-                ))}
-            </View>
-        </ScrollView>
+                </View>
+                <View>
+                    <TextButton text="+ Ajouter un patient" style={patientsListStyles.btnCenter} />
+                </View>
+                <View style={{ height: 50 }} />
+            </ScrollView>
+        </SafeAreaView>
     )
 }
 

diff --git a/src/screens/patients/patientsList/patientsListStyles.ts b/src/screens/patients/patientsList/patientsListStyles.ts
@@ -9,6 +9,10 @@ const patientsListStyles = StyleSheet.create({
         borderTopColor: "#ddd",
         borderTopWidth: 1,
     },
+    btnCenter: {
+        alignSelf: "center",
+        marginVertical: 10,
+    },
 })
 
 export default patientsListStyles
diff --git a/src/screens/prescriptions/addPrescription/AddPrescription.tsx b/src/screens/prescriptions/addPrescription/AddPrescription.tsx
@@ -1,4 +1,4 @@
-import { View, ScrollView, Touchable, TouchableOpacity, Text } from "react-native"
+import { View, ScrollView, TouchableOpacity, Text, SafeAreaView } from "react-native"
 import {
     NavBar,
     PrescriptionHeader,
@@ -11,6 +11,7 @@ import {
 import { PrescreptionsStackNavProps } from "../../../navigation/stacks/prescriptionsStack/@types"
 import addPrescriptionStyles from "./addPrescriptionStyles"
 import Ionicons from "react-native-vector-icons/Ionicons"
+import styles from "../../../assets/styles"
 
 const AddPrescription = ({
     navigation,
@@ -39,43 +40,46 @@ const AddPrescription = ({
     ]
 
     return (
-        <ScrollView nestedScrollEnabled={true}>
+        <SafeAreaView>
             <NavBar navigation={navigation} />
-            <View style={addPrescriptionStyles.container}>
-                <PrescriptionHeader date="12/12/2020" />
-                <View style={addPrescriptionStyles.leftTextButtonWrapper}>
-                    <TextButton text="Choisir un modèle" style={{ paddingHorizontal: 0 }} />
-                    <Ionicons name="caret-down-outline" size={20} color="#18B1D4" style={{ paddingTop: 2 }} />
+            <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
+                <View style={addPrescriptionStyles.container}>
+                    <PrescriptionHeader date="12/12/2020" />
+                    <View style={addPrescriptionStyles.leftTextButtonWrapper}>
+                        <TextButton text="Choisir un modèle" style={{ paddingHorizontal: 0 }} />
+                        <Ionicons name="caret-down-outline" size={20} color="#18B1D4" style={{ paddingTop: 2 }} />
+                    </View>
+                    <View style={addPrescriptionStyles.formWrapper}>
+                        {/* Select patient */}
+                        <CustomContainer
+                            label="Patient"
+                            element={<SelectOption data={patients} initialValue={patients[0].name} noImg={false} />}
+                        />
+                        {/* Select product */}
+                        <CustomContainer
+                            label="Produit"
+                            element={<SelectOption data={products} initialValue={products[0].name} noImg={true} />}
+                        />
+                        {/* Select dosage */}
+                        <CustomContainer
+                            label="Posologie"
+                            element={<SelectOption data={dosages} initialValue={dosages[0].name} noImg={true} />}
+                        />
+                        {/* Enter duration */}
+                        <CustomContainer
+                            label="Durée du traitement"
+                            element={<CustomTextInput placeholder="Durée du traitement" />}
+                        />
+                        <TouchableOpacity style={addPrescriptionStyles.button}>
+                            <Text style={addPrescriptionStyles.buttonText}>Ajouter un produit</Text>
+                        </TouchableOpacity>
+                        <TextButton text="+ Rédiger un commentaire" />
+                    </View>
                 </View>
-                <View style={addPrescriptionStyles.formWrapper}>
-                    {/* Select patient */}
-                    <CustomContainer
-                        label="Patient"
-                        element={<SelectOption data={patients} initialValue={patients[0].name} noImg={false} />}
-                    />
-                    {/* Select product */}
-                    <CustomContainer
-                        label="Produit"
-                        element={<SelectOption data={products} initialValue={products[0].name} noImg={true} />}
-                    />
-                    {/* Select dosage */}
-                    <CustomContainer
-                        label="Posologie"
-                        element={<SelectOption data={dosages} initialValue={dosages[0].name} noImg={true} />}
-                    />
-                    {/* Enter duration */}
-                    <CustomContainer
-                        label="Durée du traitement"
-                        element={<CustomTextInput placeholder="Durée du traitement" />}
-                    />
-                    <TouchableOpacity style={addPrescriptionStyles.button}>
-                        <Text style={addPrescriptionStyles.buttonText}>Ajouter un produit</Text>
-                    </TouchableOpacity>
-                    <TextButton text="+ Rédiger un commentaire" />
-                </View>
-            </View>
-            <WideButton text="Enregistrer" />
-        </ScrollView>
+                <WideButton text="Enregistrer" />
+                <View style={{ height: 50 }} />
+            </ScrollView>
+        </SafeAreaView>
     )
 }