Add application file

App_mobil_predicting/.gitignore

+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

App_mobil_predicting/App.js

+import 'react-native-gesture-handler';
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Home from './components/Home'
+import Sepsi from './components/Sepsi';
+import Sepsis from './components/Sepsis';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Result from './components/Result';
+import  Toast from 'react-native-toast-message';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    // <View style={styles.container}>
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: "#38761d",
+          },
+          headerTintColor: "#FFF",
+          headerBackTitle: "Back",
+          headerTitleAlign: "center",
+        }}
+      >
+        <Stack.Screen
+          options={{ title: "Home", animation: "slide_from_bottom" }}
+          name="Home"
+          component={Home}
+        />
+
+        <Stack.Screen
+          options={{
+            title: "Sepsis Predicting",
+            animation: "slide_from_bottom",
+          }}
+          name="Sepsis"
+          component={Sepsis}
+        />
+        <Stack.Screen
+          options={{
+            title: "Result Predicting",
+            animation: "slide_from_bottom",
+          }}
+          name="Result"
+          component={Result}
+        />
+      </Stack.Navigator>
+      <Toast />
+    </NavigationContainer>
+    // </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

App_mobil_predicting/app.json

+{
+  "expo": {
+    "name": "FastApiSepsi",
+    "slug": "FastApiSepsi",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

App_mobil_predicting/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin'
+    ]
+  };
+};
+

App_mobil_predicting/components/Home.js

+import { StatusBar } from "expo-status-bar";
+import { StyleSheet,Text,Dimensions,View,Image,TouchableOpacity, ScrollView, SafeAreaView } from "react-native";
+import React, {useEffect, useState,useRef} from 'react';
+import { MaterialIcons  ,FontAwesome } from '@expo/vector-icons';
+
+const Home =({navigation}) => {
+
+    const [currentStep, setCurrentStep] = useState(0)
+    const scrollViewRef = useRef(null);
+
+    const [ steps, setSteps] = useState([
+      {
+        image: require('../assets/sep.jpg'),
+        title: "SEPSIS Prediction", 
+        description: 'This app was built to predict if patients \n are Sepsis Positive or Sepsis Negative.',
+        // description_fr:'La septicémie est une réponse inflammatoire généralisée suite à une infection grave.'
+      },
+      {
+        image: require('../assets/machine.jpg'),
+        title: "Machine Learning Model",
+        description: "It use a machine learning model \n to make prediction based on patient",
+        // description_fr:""
+      },
+      {
+        image: require('../assets/notools.jpg'),
+        title: "NOT A TOOL TO DIAGNOSE",
+        description:'This app is not a diagnostic tool;\n it is for information purpose only',
+        description_fr: "Cet outil n'est pas un outil de diagnosstic; \n il est uniquement destiné à des fins d'information."
+      },
+    ])
+
+   
+    const handleScroll = (event) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const currentIndex = Math.round(offsetX / width);
+      setCurrentStep(currentIndex);
+    };
+  
+    const nextStep = () => {
+      if (scrollViewRef.current && currentStep < steps.length - 1) {
+        const nextIndex = currentStep + 1;
+        setCurrentStep(nextIndex);
+        scrollViewRef.current.scrollTo({ x: nextIndex * width, animated: true });
+      }
+    };
+    const prevStep = () => {
+      if (scrollViewRef.current && currentStep > 0) {
+        const prevIndex = currentStep - 1;
+        setCurrentStep(prevIndex);
+        scrollViewRef.current.scrollTo({ x: prevIndex * width, animated: true });
+      }
+    };
+    
+    return (
+      <SafeAreaView>
+         <ScrollView
+            ref={scrollViewRef}
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            scrollEventThrottle={16}
+            onScroll={handleScroll}
+          >
+          <View style={styles.container}>
+        <Image source={steps[currentStep].image} style={styles.stepImage} resizeMode="cover"/>
+        <View style={styles.stepIndicatorView}>
+          {steps.map((step, index) => {
+            return (
+              <View style={{...styles.stepIndicator, 
+                width: currentStep === index ? 40 : 30,
+                backgroundColor:  currentStep === index ? "#043c85" : "#d9dee3"
+              }} key={index}></View>
+            )
+          })}
+        </View>
+        <Text style={styles.title}>{steps[currentStep].title}</Text>
+        <Text style={styles.description}>{steps[currentStep].description}</Text>
+        <View style={styles.navigationView}>
+        {
+            currentStep > 0 ? 
+              <TouchableOpacity 
+                onPress={() => prevStep()}
+                style={{...styles.navigationBtn, borderTopEndRadius: 20, borderBottomEndRadius:20,}}>
+                <Text style={styles.navigationBtnTxt}><FontAwesome name="arrow-left" size={30} color="#043c85" /></Text>
+              </TouchableOpacity>
+              :
+              <View></View>
+          }
+            {/* <TouchableOpacity
+                onPress={() => navigation.navigate('Home')} 
+                
+            >
+                <Text style={{ ...styles.navigationBtnTxt, textAlign: 'center' }}>Ignorer</Text>
+            </TouchableOpacity> */}
+          {currentStep === steps.length - 1 ? (
+          <TouchableOpacity
+          onPress={() => navigation.navigate('Sepsis')}
+            style={{ ...styles.navigationBtn, borderTopStartRadius: 20, borderBottomStartRadius: 20, textAlign: 'center' }}
+          >
+            <Text style={styles.navigationBtnTxt}><MaterialIcons name="done-outline" size={30} color="#043c85" /></Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={nextStep}
+            style={{ ...styles.navigationBtn, borderTopStartRadius: 20, borderBottomStartRadius: 20 }}
+          >
+            <Text style={styles.navigationBtnTxt}><FontAwesome name="arrow-right" size={30} color="#043c85" /></Text>
+          </TouchableOpacity>
+        )}
+        </View>
+      </View>
+        </ScrollView>
+        </SafeAreaView>
+    );
+  }
+  
+
+export default Home
+const { width,height } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#FFF',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    stepImage:{
+        width:width,
+        height:height *0.6,
+        marginVertical:10
+    },
+    stepIndicatorView:{
+        flexDirection:"row"
+    },
+    stepIndicator:{
+        height:10,
+        marginHorizontal:5,
+        borderRadius:10
+    },
+    title:{
+        fontWeight:"bold",
+        fontSize:14,
+        marginVertical:13,
+    },
+    description:{
+        textAlign:"center",
+        paddingHorizontal:8,
+        fontSize:12
+    },
+    navigationBtn:{
+        // backgroundColor:"#043c85",
+        height:40,
+        width:80,
+        justifyContent:"center",
+        alignItems:"center",
+    },
+    navigationBtnTxt:{
+        color:'white',
+        fontWeight:"bold"
+    },
+    navigationView: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+      },
+  });
\ No newline at end of file

App_mobil_predicting/components/Result.js

+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Image, Text, Alert ,  Dimensions,ScrollView
+} from 'react-native'
+import { Table, TableWrapper, Row, Rows } from 'react-native-table-component';
+
+// import { Entypo,Ionicons,FontAwesome5 } from '@expo/vector-icons';
+
+const Result = (props) => {
+  console.log('item',props);
+  const sepsisStatus = props.route.params.Sepsis;
+  const badgeStyle = sepsisStatus === 'Negative' ? styles.warningBadge : styles.dangerBadge;  
+  const tableHead = ['PRG', 'PL', 'PR', 'M11', 'SK', 'BD2', 'TS', 'Age', 'Insurance'];
+  const tableData = [
+    [
+      props.route.params.PRG,
+      props.route.params.PL,
+      props.route.params.PR,
+      props.route.params.M11,
+      props.route.params.SK,
+      props.route.params.BD2,
+      props.route.params.TS,
+      props.route.params.Age,
+      props.route.params.Insurance,
+    ],
+  ];
+
+  return (
+    <ScrollView style={styles.scroll}>
+        <View style={{ marginHorizontal: 15}}>
+        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10,alignItems:'center' }}>Infos</Text>
+        <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
+          <Row data={tableHead} style={{ height: 40, backgroundColor: '#f1f8ff' }} textStyle={{ margin: 2 }} />
+          <Rows data={tableData}  textStyle={{ margin: 1 }} />
+        </Table>
+        </View>
+        <View style={styles.container}>
+            {props.route.params.Sepsis === 'Positive' ? (
+              <Image
+              style={styles.stepImage} resizeMode="cover"
+                source={require('../assets/stopn.jpg') }
+              />
+            ):(
+          <Image
+            style={styles.icon}
+            source={{ uri: 'https://img.icons8.com/color/70/000000/facebook-like.png' }}
+          />
+      )}
+        <View style={styles.description}>
+          <Text style={styles.description}>
+          Result: <Text style={badgeStyle}>{sepsisStatus}</Text>
+          </Text>
+        </View>
+      <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]} onPress={(() => props.navigation.navigate('Sepsis'))}>
+        <Text style={styles.buttonText}>Try Again </Text>
+      </TouchableOpacity>
+    </View> 
+    </ScrollView>
+  )
+}
+const {width, height} = Dimensions.get('window');
+const screenWidth = Math.round(Dimensions.get('window').width);
+
+const styles = StyleSheet.create({
+  navigationStackBar: {
+    // flexDirection: 'row',
+     height: height,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 10,
+  },
+  btnBack: {
+    position: 'absolute',
+    left: -1,
+    zIndex: 99,
+    marginLeft:3,
+  },
+  head: {  
+    height: 40, 
+    backgroundColor: '#f1f8ff',
+},
+wrapper: { 
+    flexDirection: 'row',
+},
+stepImage:{
+  width:width*0.9,
+  height:height *0.3,
+  // marginVertical:1
+},
+title: { 
+    flex: 1, 
+    backgroundColor: '#f6f8fa',
+},
+  stackBarTitle: {
+    position: 'absolute',
+     width: screenWidth,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#000000',
+    // height: 0,
+    borderBottomColor: '#ddd',
+    borderBottomWidth: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  header: {
+    backgroundColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  btnActive: {
+    backgroundColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    padding: 5,
+  },
+  container: {
+    flex: 1,
+    // 0backgroundColor: '#EEEEEE',
+    alignItems: 'center',
+    paddingTop: 50,
+  },
+  scroll: {
+    width: width,
+  },
+    row: {  
+        height: 28,  
+    },
+  icon: {
+    width: 120,
+    height: 120,
+  },
+  title: {
+    fontSize: 24,
+    textAlign: 'center',
+    marginTop: 1,
+    color: '#5F6D7A',
+  },
+  description: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#A9A9A9',
+    fontSize: 16,
+    margin: 40,
+  },
+  buttonContainer: {
+    height: 45,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 20,
+    width: 250,
+    borderRadius: 30,
+  },
+  loginButton: {
+    backgroundColor: '#043c85',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+  },
+  warningBadge: {
+    color: 'orange',
+    fontWeight: 'bold',
+  },
+  dangerBadge: {
+    color: 'red', 
+    fontWeight: 'bold',
+  },
+})
+export default Result;
\ No newline at end of file

App_mobil_predicting/components/Sepsi.js

+import React, { useState } from 'react';
+import { View, Text, Image, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+
+const Sepsi = (item) => {
+  console.log()
+  const [currentPassword, setCurrentPassword] = useState();
+  const [newPassword, setNewPassword] = useState();
+  const [repeatPassword, setRepeatPassword] = useState();
+
+  const handleSubmit = () => {
+
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.avatarContainer}>
+        <Image
+          style={styles.avatar}
+          source={{uri: 'https://www.bootdey.com/img/Content/avatar/avatar8.png'}}
+        />
+      </View>
+      <View style={styles.form}>
+        <Text style={styles.label}>Current password</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter your current password"
+          value={currentPassword}
+          onChangeText={setCurrentPassword}
+          secureTextEntry={true}
+        />
+        <Text style={styles.label}>New password</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter a new password"
+          value={newPassword}
+          onChangeText={setNewPassword}
+          secureTextEntry={true}
+        />
+        <Text style={styles.label}>Repeat new password</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Repeat your new password"
+          value={repeatPassword}
+          onChangeText={setRepeatPassword}
+          secureTextEntry={true}
+        />
+        <TouchableOpacity style={styles.button} onPress={() => handleSubmit()}>
+          <Text style={styles.buttonText}>Change password</Text>
+        </TouchableOpacity>
+      </View>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor:'#fff',
+  },
+  form: {
+    width: '80%',
+  },
+  label: {
+    marginTop: 20,
+    marginBottom:5
+  },
+  input: {
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    fontSize: 18,
+  },
+  button: {
+    marginTop: 20,
+    backgroundColor: '#1E90FF',
+    borderRadius: 5,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 18,
+    textAlign:'center',
+  },
+  avatarContainer: {
+    marginTop: 10,
+    alignItems: 'center',
+
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+});
+
+export default Sepsi;

App_mobil_predicting/components/Sepsis.js

+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Dimensions,
+  Pressable,
+  ActivityIndicator,
+  StyleSheet,
+  ScrollView,
+} from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import axios from "axios";
+import Toast from "react-native-toast-message";
+
+const Sepsis = ({ navigation }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [PR, setPR] = useState("");
+  const [PRG, setPRG] = useState("");
+  const [PL, setPL] = useState("");
+  const [SK, setSK] = useState("");
+  const [TS, setTS] = useState("");
+  const [M11, setM11] = useState("");
+  const [BD2, setBD2] = useState("");
+  const [Age, setAge] = useState("");
+  const [Insurance, setInsurance] = useState("");
+
+  const onChangePRhandler = (pr) => {
+    setPR(pr);
+  };
+  const onChangePRGhandler = (prg) => {
+    setPRG(prg);
+  };
+  const onChangePLhandler = (pl) => {
+    setPL(pl);
+  };
+  const onChangeSKhandler = (sk) => {
+    setSK(sk);
+  };
+  const onChangeTShandler = (ts) => {
+    setTS(ts);
+  };
+
+  const onChangeM11handler = (m11) => {
+    setM11(m11);
+  };
+  const onChangeBD2handler = (bd2) => {
+    setBD2(bd2);
+  };
+  const onChangeAgehandler = (age) => {
+    setAge(age);
+  };
+  const onSubmitFormHandler = async () => {
+    const data = {
+      PRG,
+      PR,
+      PL,
+      SK,
+      TS,
+      BD2,
+      M11,
+      Age,
+      Insurance,
+    };
+    setIsLoading(true);
+    try {
+      await // Replace http://127.0.0.1:8000/predict with your api online
+      axios
+        .post(
+          `https://kwasiasomani-sepsis-machine-learning-api-using-fastapi.hf.space/Sepssis`,
+          data,
+          {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        )
+        .then((res) => {
+          console.log("response status:", res.status); // Statut HTTP
+          console.log("response data:", res.data.predictions[0]);
+          if (res.status == 200) {
+            setPR("");
+            setPRG("");
+            setPL("");
+            setAge("");
+            setBD2("");
+            setM11("");
+            setInsurance("");
+            setSK("");
+            setTS("");
+            navigation.navigate("Result", res.data.predictions[0]);
+            setIsLoading(false);
+          }
+        });
+    } catch (error) {
+      if (error.request.status == 422) {
+        Toast.show({
+          type: "error",
+          text1: "An valodation error occurred",
+          text2: "Error",
+          autoHide: true,
+          visibilityTime: 5000,
+          position: "top",
+          bottomOffset: 50,
+          topOffset: 100,
+          // backgroundColor:'#66a5f5'
+        });
+      }
+      console.log("error", error.request.status);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ScrollView style={styles.scroll}>
+      <View style={styles.container}>
+        <TextInput
+          style={styles.input}
+          name="PRG"
+          placeholder="Plasma Glucose (PRG)"
+          selectionColor="#a9a9a9"
+          autoCapitalize="none"
+          // textDecorationLine="underline"
+          underlineColorAndroid="transparent"
+          color="black"
+          keyboardType="numeric"
+          value={PRG}
+          onChangeText={onChangePRGhandler}
+        />
+        <TextInput
+          style={styles.input}
+          name="PL"
+          placeholder="Blood Work Result-1 (mu U/ml)"
+          selectionColor="#a9a9a9"
+          autoCapitalize="none"
+          // textDecorationLine="underline"
+          underlineColorAndroid="transparent"
+          color="black"
+          keyboardType="numeric"
+          value={PL}
+          onChangeText={onChangePLhandler}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Blood Pressure (mm Hg)"
+          name="PR"
+          selectionColor="#a9a9a9"
+          underlineColorAndroid="transparent"
+          color="black"
+          autoCapitalize="none"
+          keyboardType="numeric"
+          value={PR}
+          onChangeText={onChangePRhandler}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Blood Work Result-2 (mm)"
+          name="SK"
+          selectionColor="#a9a9a9"
+          underlineColorAndroid="transparent"
+          color="black"
+          autoCapitalize="none"
+          keyboardType="numeric"
+          value={SK}
+          onChangeText={onChangeSKhandler}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="TS-Blood Work Result-3 TS (mm)"
+          name="TS"
+          selectionColor="#a9a9a9"
+          underlineColorAndroid="transparent"
+          color="black"
+          autoCapitalize="none"
+          keyboardType="numeric"
+          value={TS}
+          onChangeText={onChangeTShandler}
+        />
+        <TextInput
+          style={styles.input}
+          name="M11"
+          placeholder="Body Mass Index (weight in kg/(height in m)^2)"
+          selectionColor="#a9a9a9"
+          autoCapitalize="none"
+          // textDecorationLine="underline"
+          underlineColorAndroid="transparent"
+          color="black"
+          value={M11}
+          keyboardType="numeric"
+          onChangeText={onChangeM11handler}
+        />
+        <TextInput
+          style={styles.input}
+          name="BD2"
+          placeholder="BD2: Blood Work Result-4 (mu U/ml)"
+          selectionColor="#a9a9a9"
+          autoCapitalize="none"
+          // textDecorationLine="underline"
+          underlineColorAndroid="transparent"
+          color="black"
+          value={BD2}
+          keyboardType="numeric"
+          onChangeText={onChangeBD2handler}
+        />
+        <TextInput
+          style={styles.input}
+          name="Age"
+          placeholder="Patient's Age (years)"
+          selectionColor="#a9a9a9"
+          autoCapitalize="none"
+          // textDecorationLine="underline"
+          underlineColorAndroid="transparent"
+          color="black"
+          value={Age}
+          keyboardType="numeric"
+          onChangeText={onChangeAgehandler}
+        />
+        <View style={styles.input}>
+          <Picker
+            selectedValue={Insurance}
+            onValueChange={(itemValue) => setInsurance(itemValue)}
+            // onValueChange={handleSubjectChange}
+            mode="dropdown"
+            style={styles.dropdown}
+          >
+            <Picker.Item label="Patient insurance" style={styles.pocker} />
+            <Picker.Item label="Insurant" value="1" />
+            <Picker.Item label="No Insurant" value="0" />
+          </Picker>
+        </View>
+        <View></View>
+        <Pressable
+          onPress={onSubmitFormHandler}
+          style={() => [
+            {
+              backgroundColor: isLoading ? "#a9a9a9" : "#043c85",
+            },
+            styles.buttonConnexion,
+          ]}
+        >
+          {() => (
+            <Text style={{ color: "#fff", textAlign: "center" }}>
+              {isLoading ? (
+                <ActivityIndicator size="large" color="white" />
+              ) : (
+                "Predict Now"
+              )}
+            </Text>
+          )}
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+};
+
+const { width, height } = Dimensions.get("window");
+const screenWidth = Math.round(Dimensions.get("window").width);
+const screenHeight = Math.round(Dimensions.get("window").height);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    // backgroundColor:'#8fba82'
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 10,
+    elevation: 5,
+    // padding: 20,
+    marginTop: 50,
+    width: "90%",
+    marginLeft: 15,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  uploadBtnContainer: {
+    opacity: 0.7,
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    backgroundColor: "lightgrey",
+    width: "100%",
+    height: "25%",
+  },
+  uploadBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  image: {
+    height: 50,
+    width: 50,
+    borderRadius: 40,
+    marginBottom: 10,
+  },
+  scroll: {
+    width: width,
+  },
+  text: {
+    marginVertical: height * 0.05,
+    width: width * 0.8,
+    fontSize: 12,
+  },
+  text_deco: {
+    color: "red",
+    textDecorationLine: "underline",
+  },
+  input: {
+    marginTop: height * 0.035,
+    width: width * 0.8,
+    height: 50,
+    padding: 10,
+    fontSize: 13,
+    borderRadius: 5,
+    borderWidth: 0.5,
+    justifyContent: "center",
+    borderColor: "black",
+    color: "gray",
+  },
+  inputimg: {
+    marginTop: height * 0.015,
+    width: width * 0.8,
+    height: 50,
+    padding: 10,
+    fontSize: 10,
+    // borderRadius: 1,
+    // borderWidth: 0.5,
+    justifyContent: "center",
+  },
+  inputjt: {
+    marginTop: height * 0.035,
+    width: width * 0.8,
+    height: 50,
+    padding: 5,
+    fontSize: 16,
+    borderRadius: 1,
+    borderWidth: 0.1,
+    justifyContent: "center",
+  },
+  textArea: {
+    height: 100,
+    borderColor: "gray",
+    borderWidth: 1,
+    fontSize: 16,
+    padding: 10,
+    width: width * 0.8,
+    marginTop: height * 0.015,
+    borderRadius: 5,
+  },
+  icon: {
+    position: "absolute",
+    right: "3%",
+    elevation: 7,
+    top: "30%",
+    color: "gray",
+  },
+  buttonConnexion: {
+    marginTop: height * 0.05,
+    width: width * 0.8,
+    height: 50,
+    fontSize: 16,
+    borderRadius: 5,
+    justifyContent: "center",
+  },
+  terme_button: {
+    width: width * 0.8,
+    fontStyle: "normal",
+    lineHeight: 24,
+    letterSpacing: 0.16,
+  },
+  dropdown: {},
+  pocker: {
+    color: "gray",
+  },
+  error: {
+    justifyContent: "center",
+    textAlign: "center",
+    color: "red",
+    fontSize: 12,
+  },
+  success: {
+    color: "green",
+    fontSize: 12,
+  },
+});
+
+export default Sepsis;

App_mobil_predicting/eas.json

+{
+  "cli": {
+    "version": ">= 5.5.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

App_mobil_predicting/index.js

+/**
+ * @format
+ */
+
+import {AppRegistry, Platform} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
+import { registerRootComponent } from "expo";
+
+
+if (Platform.OS == "android") {
+    registerRootComponent(App);
+  } else {
+    AppRegistry.registerComponent(appName, () => App);
+  }

App_mobil_predicting/package.json

+{
+  "name": "fastapisepsi",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
+    "@react-native-community/viewpager": "5.0.11",
+    "@react-native-picker/picker": "2.4.10",
+    "@react-navigation/native": "^6.1.16",
+    "@react-navigation/native-stack": "^6.9.17",
+    "axios": "^1.6.7",
+    "expo": "~49.0.15",
+    "expo-status-bar": "~1.6.0",
+    "graphql": "^16.8.1",
+    "react": "18.2.0",
+    "react-native": "^0.72.10",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "^4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-table-component": "^1.2.2",
+    "react-native-toast-message": "^2.1.6",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "~0.19.6",
+    "react-navigation-stack": "^2.10.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}