Hi I working on a react native project I need to support my app offline.
I used NetInfo Library from expo documentation.
like below
const netInfo = useNetInfo();
const networkCheck = () => {
setTimeout(() => {
const net = netInfo.isInternetReachable;
console.log(net);
if (net === false) {
setloadCachedListings(true);
}
}, 2000);
};
networkCheck();
I want to wait for some time at this step of my code because this hook always returns null first time then after few milliseconds it tells the real network status.
But this code is not working as I an trying to do.
Is there any way to achieve this?
I just want to wait a little bit to get real network connection and then go further with my code.
logs for netInfo hook.
Related
I use 99% on my screens fetch. So if the connection is lost and data are not fetched my screen is empty. So when the internet is again online nothing happens.
So then I downloaded netInfo but if I disable my internet connection then my isOffline state is always false. Nothing happens, how can I detect on real time when internet is off/on?
const [isOffline, setIsOffline] = useState(false);
useEffect(() => {
const removeNetInfoSubscription = NetInfo.addEventListener((state: NetInfoState) => {
const offline = !(state.isConnected && state.isInternetReachable)
console.log(offline)
setIsOffline(offline)
})
return () => removeNetInfoSubscription()
}, [])
console.log(isOffline);
If you are using an old version of React Native, you might face this issue with netinfo. Downgrading the version of netinfo to v6 (or updating the React Native to version>=0.65) might make it work.
See this GitHub issue
I am writing a puzzle app in React Native where the user can solve a puzzle by changing their device's Appearance to dark mode. I'm using React Native's Appearance module to accomplish this, by calling Appearance.getColorScheme() to get the initial color scheme, and registering an event listener for when the color scheme changes using Appearance.addChangeListener() within the useEffect hook:
useEffect(() => {
const originalColorScheme = Appearance.getColorScheme();
Appearance.addChangeListener((event) => {
if (Appearance.getColorScheme() !== originalColorScheme) {
setSolved(true);
}
});
}, []);
This is working fine, but I'd like to be able to unit test my component by simulating a change to dark mode in Jest and/or React Native Testing Library (or similar), after which I can check for changes to the content of the page (a "congratulations" message, in this case).
In my mind, it could look something like:
const text = await screen.findByText("good luck!");
// fireEvent("changeColorScheme", { colorScheme: "dark" });
const text2 = await screen.findByText("congratulations!");
Is anything like this possible? I'm guessing it has something to do with mocks, but it's a little over my head at the moment. Thanks for any help you can provide!
I have a problem with the situation where my React Native Expo app is running in the background / inactive modus and the app is brought back to the foreground / active mode as a result of the user opening a deep link to my app from the mobile browser.
When this situation occurs, my app needs to get a reference to the deep link in order to show the expected content to the user. The problem is that Linking.getInitialURL() always returns the link that was used to open the app from cold start and not the link that was used to bring the app back to foreground / active modus.
Advice on how to fix this problem would be greatly appreciated.
Found it out by myself :-)
useEffect(() => {
Linking.addEventListener('url', handleLinkEvent);
return () => {
Linking.removeEventListener('url', handleLinkEvent);
};
}, []);
For these cases you should use Linking.addEventListener
To complete #timboektoe's answer, react-navigation offers a subscribe function to listen to any URL received.
const subscribe = (listener) => {
const onReceiveURL = ({ url }) => { listener(url); };
const subscription = Linking.addEventListener('url', onReceiveURL);
return () => {
subscription.remove();
};
};
const linking = {
prefixes,
config,
getInitialURL,
subscribe,
};
React Native wont send multiple messages on state change throught websocket. Server recives 1st string normally and client gets console logs on every state change. Any idea why I get an error about state?
useEffect(() => {
socket.onopen = function (e) {
socket.send(String(state?.x));
};
socket.send("test") <-- this one does not work
console.log("send")
socket.onmessage = function () {
console.log("message")
}
socket.close();
}, [state])
Returns error INVALID_STATE_ERR
So basically when using react native with EXPO you will get those errors. After the application is build and installed (on the same phone) the application works.
I am trying to detect if a user takes a screenshot while using a smartphone app that I have built. I am building my project with React Native.
I have been told that I can possibly prevent screenshots for Android but not for iOS. but can I still detect whether a user attempts to take a screenshot so that I can at least send a warning via Alert?
Thanks in advance
I tried react-native-screenshot-detector but it did not work
you can use this package it supports android&ios screenshot detecting react-native-detector
import {
addScreenshotListener,
removeScreenshotListener,
} from 'react-native-detector';
// ...
React.useEffect(() => {
const userDidScreenshot = () => {
console.log('User took screenshot');
};
const listener = addScreenshotListener(userDidScreenshot);
return () => {
removeScreenshotListener(listener);
};
}, []);
There is no package for it currently.