Tengo el componente LoginButton provisto por react-native-fbsdk-next usado en mi pantalla de inicio de sesión. Lo que quiero hacer es realizar una verificación de red usando un enlace personalizado cuando el usuario intente presionar este botón, antes de iniciar el flujo de inicio de sesión que realiza el componente cuando se presiona. Estoy tratando de envolver el botón en una TouchableOpacity personalizada (o algo así, vea el código a continuación), pero no estoy seguro de cómo (si es posible) presionar el botón después de que se complete la verificación de la red sin necesidad de presionar otra vez desde el usuario. ¿Algunas ideas?
Este es el botón en mi pantalla de inicio de sesión con el contenedor que espero implementar.
<CheckNetworkWrapper> <LoginButton onLoginFinished={handleFBLoginPress} style={ Platform.OS === "ios" ? { width: deviceWidth * 0.85, height: deviceHeight * 0.049, } : { height: deviceHeight * 0.04, width: deviceWidth * 0.48, } } /> </CheckNetworkWrapper> Este es mi componente CheckNetworkWrapper que aún no se ha implementado por completo.
export default function CheckNetworkWrapper({ button, buttonFunc, style }: Props) { const checkNetwork = useNetworkCheck(); return ( <TouchableOpacity onPress={checkNetwork(buttonFunc)} style={[style, { opacity: 1 }]}> {button} </TouchableOpacity> ); }Lo que está tratando de hacer no va a funcionar porque no puede 'evitar' que el evento táctil se active en el componente LoginButton.
Lo que puede hacer es crear su propio botón y puede diseñarlo para que se vea como el de Facebook. Luego, en el método que maneja el clic, primero puede verificar la red y luego, si todo está bien, puede usar el Administrador de inicio de sesión de Facebook para iniciar sesión .
Opcionalmente, LoginButton tiene un evento onError que estoy bastante seguro de que podría usar para detectar un error de red.