I have the LoginButton component provided by react-native-fbsdk-next used on my login screen. What I want to do is perform a network check using a custom hook when the user attempts to press this button, before initiating the sign-in flow that component performs when pressed. I am trying to wrap the button in a custom TouchableOpacity (or something like that -- see code below), but I am not sure how (if it is even possible) to press the button after the network check completes without requiring another press from the user. Any ideas?
This is the button on my login screen with the wrapper I hope to implement.
<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>This is my yet-to-be-fully-implemented CheckNetworkWrapper component.
export default function CheckNetworkWrapper({ button, buttonFunc, style }: Props) {
const checkNetwork = useNetworkCheck();
return (
<TouchableOpacity onPress={checkNetwork(buttonFunc)} style={[style, { opacity: 1 }]}>
{button}
</TouchableOpacity>
);
}What you are trying to do is not going to work cause you can't 'avoid' the touch event from firing on the LoginButton component.
What you can do is to create your own button and you can style it so it looks like the Facebook one. Then in the method that handles the click you can first check for network and then if it's all good you can use the Facebook Login Manager to login.
Optionally, the LoginButton does have an onError event that I'm pretty sure you could use to catch a network error.