I am currently using the LoginButton component from react-native-fbsdk-next on my login screen. What I want to achieve is performing a network check with a custom hook before the user presses this button, and then proceeding with the sign-in flow that the button triggers. My plan is to wrap the button in a custom TouchableOpacity, but I'm unsure if it's possible to automatically trigger the button press after the network check without requiring an additional press from the user. Any suggestions?
Below is the code snippet showing the button on my login screen along with the wrapper I intend 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 the CheckNetworkWrapper component that I have not fully implemented yet.
export default function CheckNetworkWrapper({ button, buttonFunc, style }: Props) {
const checkNetwork = useNetworkCheck();
return (
<TouchableOpacity onPress={checkNetwork(buttonFunc)} style={[style, { opacity: 1 }]}>
{button}
</TouchableOpacity>
);
}