I am developing a react native app, I am trying to clear setinterval function by backhandler event. It works correctly on android phone, but there is no back button in iphone, so I can't stop setinteval function. How can I detect swipe back handler?
Assuming that you are using #react-navigation/native. You can add Listener for beforeRemove event. This event is emitted every time the component is removed/user tries to leave the screen.
navigation.addListener('beforeRemove', (e) => {
e.preventDefault()
//clear setInterval here and go back
})
You can find more information here
For me, this snippet is working fine. you can place this code in useEffect or componentDidMount. Make sure to cancel this event if you are navigation between the screens.
For reference, you can visit https://reactnavigation.org/docs/5.x/navigation-events
and select the react-navigation version according to your project.
const gestureEndListener = () => {
console.log(" Called when screen is unmounted " )
}
useEffect(() => {
const gestureHandler = navigation.addListener('didBlur', gestureEndListener);
return () => {
gestureHandler.remove();
};
}, []);
Related
DESCRIPTION
I have an app that should trigger an analytics event just once at a specific screen when a component is shown to the user.
i.e: if the user open the application and land to home screen and the component is showing, then the analytics event should be sent. If the user navigate to Settings screen and the component is there, then the event should trigger, but if the user navigate back to home screen, the event shouldn't trigger. Just have to be called once per screen.
If the user quit the app completely, the event should fire again once reopen it
STACK
react-native
react-navigation
react-redux
WHAT I'VE DONE
I've tried to use the useIsFocused hook with useEffectand useRef but it turns that when the screen is rerender for an async fetch event, the state inside my useEffect is reset and the analytics event trigger again, which is not the expected behavior.
const isHasBeenFocused = useRef()
const isFocused = useIsFocused()
useEffect(()=>{
if(isHasBeenFocused.current){
return;
}
isFocused && dispatch(analyticsEvent, payload)
isHasBeenFocused.current = isFocused
}, [])
This is my approach, but I don't know if it's the correct one or if there's another, better option.
Hope anyone could help me on this.
If you want the analytics event to fire only once for the lifetime of the app installation, you could use AsyncStorage for flags like this. AsyncStorage used to be a core RN module but is now community-based.
This will persist until the app is uninstalled.
useEffect(() => {
const check = async () => {
const hasReported = await AsyncStorage.getItem('yourKey');
if (hasReported) return;
AsyncStorage.setItem('yourKey', true);
dispatch(analyticsEvent, payload);
};
check();
}, []);
If you want the analytics to fire once per session, you could use the same solution with an AppState listener to reset the value to something falsy when the app is backgrounded. There's a good example of using AppState in the React Native docs.
If you need the value to persist across app installs, the best solution is to store it in your backend.
I've a reactjs app including capacitor App plugin in order to handle back button actions. Plugin works as expected (alert boxes are displayed on backbutton press) however function is not reflecting current state or props values; instead it shows initial prop values when the component has loaded.
My related code as follows:
React.useEffect(() => {
App.addListener("backButton", () => {
alert(state.test)
alert(props.test)
})
return () => {
App.removeAllListeners()
}
}, [])
So, how can I get latest state and props values on back button press? Thanks in advance.
In my Electron/React app, I have the possibility to open video content that is hosted on another web app. What I do is render a webview of the required page with an URL. Here is my example:
const App = ({ computedMatch }) => {
const { audioMuted } = useSelector(({ window }) => window);
const titleId = computedMatch.params.id;
const src = `${BASE_URL}/${titleId}`;
useEffect(() => {
const webview = document.querySelector('webview');
if (webview) {
webview.setAudioMuted(audioMuted);
}
}, [audioMuted]);
return <webview src={src} />;
};
On the windows bar I have a mute button icon, pressing the mute button, updates the Redux state of the audioMuted to true. When the state is change the useEffect comes in action
On the first hand this solution seemed to be working, but after some testing, sometimes I receive this error:
error: uncaughtException: The WebView must be attached to the DOM and the dom-ready event emitted before this method can be called.
Error: The WebView must be attached to the DOM and the dom-ready event emitted before this method can be called.
How do I fix this error to never appear in the first place?
I'm working on an app with React Native and React Navigation. For most of the app, I have a bottom tab navigator and header. However, in one section of the app, the user can make a call and is taken to a screen with no navigation. The user shouldn't be able to navigate to the previous screen without ending the call. How can I prevent the user from going back?
if you use react-native-navigation v5, it supports several listeners and the one you need is beforeRemove this is being called before the screen gets removed and you can prevent it's default behaviour conditionally.
useEffect(() => {
navigation.addListener("beforeRemove", (e) => {
if(yourCondition) {
return ;
} else {
e.preventDefault();
}
});
}, [navigation]);
In my react native app I am using react native router flux, while going back to the previous screen I want the previous screen to re-render or refresh. I am using Action.pop() to go back to the previous. How I can refresh the previous screen?
You need to listen "focus" event on navigation object on your screen and add the logic for fetching new data inside the event handler.
function YourScreenComponent({ navigation }) {
React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
// fetch new data here
});
return unsubscribe;
}, [navigation]);
return <SomeContent />;
}
I solved it using Action.reset('key of the screen') of react router flux