¿Cómo verificar una conexión a Internet en una aplicación Expo React Native?

Si te encuentras con algo que no comprendes puedes dejarlo en los comentarios y te responderemos lo más rápido posible.

Solución:

Usar NetInfo de react-native.

Sí, está en desuso porque planean eliminarlo en la próxima versión de react-native a favor de la versión comunitaria. Sin embargo, es completamente funcional y aún se puede usar por ahora, solo asegúrese de verificar si hay cambios importantes cuando las próximas versiones de Expo SDK son liberados.

Es probable que Expo lo incorpore a su flujo de trabajo administrado cuando react-native lo elimina, o proporciona una alternativa que no requerirá expulsar de Expo.

Expo SDK 34 ya ha incluido NetInfo API.

Puede consultar su documentación para SDK 34 aquí https://docs.expo.io/versions/v34.0.0/sdk/netinfo

Aquí está el enlace para la documentación de la última versión.

Es realmente difícil definir si un dispositivo tiene internet o no stackoverflow.com/a/189443/7602110, solo por haber fallado las solicitudes XHR puedes decir que tienes internet, pero no es tan confiable. Le gustaría consultar con algunos sitios web confiables como google.comHe venido con una solución alternativa, pero en realidad no la recomiendo, depende de usted.

Puedes usar el Linking.canOpenUrl() método del propio React Native, que devolverá un objeto Promise. Cuando se determina si la URL dada se puede manejar o no, la promesa se resuelve y el primer parámetro es si se puede abrir o no.

Luego agregue una solicitud y si el estado de la respuesta es 200 deberías tener internet.

import React,  Component  from 'react';
import  Button, Text, View, StyleSheet, Linking  from 'react-native';

export default class App extends Component 
  state = 
    connection: false,
    url: 'https://google.com',
  ;

  checkInternt = () => 
    Linking.canOpenURL(this.state.url).then(connection => 
      if (!connection) 
        this.setState( connection: false );
       else 
        fetch(this.state.url).then(res =>
          this.setState( connection: res.status !== 200 ? false : true )
        );
      
    );
  ;

  componentDidMount() 
    this.checkInternt();
  

  handlePress = () => 
    this.setState(
      url:
        this.state.url === 'https://google.com'
          ? 'http://someweirdurlthatdoesntwork.com'
          : 'https://google.com',
    );
    this.checkInternt();
  ;

  render() 
    return (
      
        
          Connection:
          
            `   $this.state.connection`
          
        
        this.state.url.replace(/https?:///g, '')
        
      
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  ,
);

Consulta el snack: snack.expo.io/@abranhe/check-internet

Comentarios y puntuaciones

Tienes la opción de añadir valor a nuestra información aportando tu veteranía en las ilustraciones.

---

---

Utiliza Nuestro Buscador