disabling events reports when disconected from internet

src/app/screens/SharingDataScreen.js

@@ -6,12 +6,14 @@ import assets from "../config/assets";
 import { dimensions } from "../config/dimensions";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 import { AuthContext } from "../auth/context";
-import colors from "../config/colors";
+import { useNetInfo } from "@react-native-community/netinfo";
 
 function SharingDataScreen({ navigation }) {
   const authContext = useContext(AuthContext);
   const [showLog, setShowLog] = useState(false);
   const [showLogPluv, setShowLogPluv] = useState(false);
+  const connection = useNetInfo().isConnected;
+  console.log(connection)
 
   const isRegistered = authContext.user?.username != null;
   const pluviometer = authContext.user?.pluviometer ? true : false;
@@ -40,7 +42,9 @@ function SharingDataScreen({ navigation }) {
       <ConfirmationModal
         show={showLog}
         icon={"md-warning-outline"}
-        description={"Para enviar uma informação,"+"\n"+"faça o login ou cadastre-se"}
+        description={
+          "Para enviar uma informação," + "\n" + "faça o login ou cadastre-se"
+        }
         confirmationLabel="LOGIN"
         onConfirm={() => authContext.setUser(false)}
         onDecline={() => setShowLog(false)}
@@ -61,7 +65,7 @@ function SharingDataScreen({ navigation }) {
             onPress={() =>
               navigation.navigate("FloodSharingData", { user: currentUser })
             }
-            active={isRegistered}
+            active={isRegistered && connection}
             inactiveOnPress={() => setShowLog(true)}
           />
 
@@ -71,7 +75,7 @@ function SharingDataScreen({ navigation }) {
               navigation.navigate("RainSharingData", { user: currentUser })
             }
             SvgImage={assets.rainLevel.RainIcon}
-            active={isRegistered}
+            active={isRegistered && connection}
             inactiveOnPress={() => setShowLog(true)}
           />
         </View>
@@ -93,7 +97,7 @@ function SharingDataScreen({ navigation }) {
               })
             }
             SvgImage={assets.PluviometricDataIcon}
-            active={isRegistered && pluviometer}
+            active={isRegistered && pluviometer && connection}
             inactiveOnPress={() => {
               setShowLog(!isRegistered),
                 setShowLogPluv(!pluviometer && isRegistered);
@@ -106,7 +110,7 @@ function SharingDataScreen({ navigation }) {
               navigation.navigate("RiverFloodData", { user: currentUser })
             }
             SvgImage={assets.riverLevel.RiverIcon}
-            active={isRegistered}
+            active={isRegistered && connection}
             inactiveOnPress={() => setShowLog(true)}
           />
         </View>