I need to perform network check, and if the device is online then i should trigger a post request even if the application is running in the background.
I found that react-native-sync-adapter library will help me to do that. but when i tried to implement app is force closing every time
below is my code.
//index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerHeadlessTask('TASK_SYNC_ADAPTER', () => App);
//App.js
import SyncAdapter from 'react-native-sync-adapter';
useEffect(() => {
SyncAdapter.init({
syncInterval,
syncFlexTime,
});
}, []);
please help me to find the issue
AppRegistry.registerHeadlessTask('TASK_SYNC_ADAPTER', () => App);
I'm also looking for some answers regarding this library, but in your case I think I know enough to say this is your problem. You're saying your Headless JS task is the App itself, and I'm guessing calling that is what's crashing your app.
Related
I'm looking for a handle that would allow me to run async code in the RN runtime before my React Native app executes.
I tried something like this
// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
asyncTask.then(() => {
AppRegistry.registerComponent(appName, () => App);
});
but the code crashes with
ERROR Invariant Violation: Module AppRegistry is not a registered
callable module (calling runApplication). A frequent cause of the
error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Isn't there a provided way to run async tasks before the app starts ?
In my case I need this to do required updates on AsyncStorage
I am using expo-notifications package in react native (expo) to handle incoming notifications. I am getting notification correctly when the app is in background and foreground - for sending notifications I am using 'expo-server-sdk' package in the backend. I can handle foreground notification reception using addNotificationReceivedListener() function from expo-notification package.For handling background notification reception in the expo documentation (link: - https://docs.expo.dev/versions/latest/sdk/notifications/#handling-incoming-notifications-when-the-app-is-1) they are saying we can use expo-task-manager library to handle it. The code that i have written by referring expo documentation is given below.
...
import * as Notifications from 'expo-notifications';
import * as TaskManager from 'expo-task-manager';
...
//This code is written in root file and outside any react component
const BACKGROUND_NOTIFICATION_TASK = 'BACKGROUND-NOTIFICATION-TASK';
TaskManager.defineTask(
BACKGROUND_NOTIFICATION_TASK,
({ data, error, executionInfo }) =>{
if(error){
console.log('error occurred');
}
if(data){
console.log('data-----',data);
}
})
//This code is written in App.js root component
useEffect(() => {
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);
return()=>{
Notifications.unregisterTaskAsync(BACKGROUND_NOTIFICATION_TASK);
}
},[])
Also in the expo documentation. they say that this background task will not work with expo go app. so O executed expo run:android and build the app into my physical android device. Even After doing all this, When a notification arrives this task is not running and I am not getting any output in the console log from the code console.log('data-----',data); neither getting output for the code console.log('error occurred'); which means 'BACKGROUND-NOTIFICATION-TASK' is not getting executed when notification comes when app is in background. Can anyone please tell me what the problem is?
Basically, the only mistake you made was to call
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK)
inside useEffect which I am guessing is inside a react component, this code must be written outside the react component as you did with TaskManager.defineTask...
Take a look at this simple App.js example for further clarity
import { StyleSheet, View } from "react-native";
import * as Notifications from "expo-notifications";
import * as TaskManager from "expo-task-manager";
const BACKGROUND_NOTIFICATION_TASK = "BACKGROUND-NOTIFICATION-TASK";
TaskManager.defineTask(
BACKGROUND_NOTIFICATION_TASK,
({ data, error, executionInfo }) => {
if (error) {
console.log("error occurred");
}
if (data) {
console.log("data-----", data);
}
}
);
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);
export default function App() {
return <View style={styles.container}></View>;
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
No need for useEfect
I am using react-native-audio-recorder-player to record and play audio. IF I close app while audio is being played, Audio is still playing. But In fact I called stopAudio() in componentWillUnmount(). But I noticed that componentWillUnmount() is not getting called when app is closed.
I would like to know two things that
1.Will componentWillUnmount() be called when app is closed? If not
2.Is there any way to know programmatically that app is closed?
You can't use componentWillUnmount() for this case, this function is not called when the application is closed.
I think you can use react native appstate
Or you can use custom hook to stop audio click here
import React from 'react';
import { Text, View } from 'react-native';
import useAppState from 'react-native-appstate-hook';
export default function App() {
const { appState } = useAppState({
onChange: (newAppState) => console.warn('App state changed to ', newAppState),
onForeground: () => console.warn('App went to Foreground'),
onBackground: () => stopAudio(),
});
return <View/>
}
I'm trying to enable the new LogBox in React Native (v0.62.0-rc.2), I just have to add a line to the "index.js" file but it doesn't work.
RC2 introduces the new LogBox experience behind a feature flag. To try
it out, add the following to your index.js file:
require('react-native').unstable_enableLogBox()
index.js
require('react-native').unstable_enableLogBox();
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Error output:
TypeError: _$$_REQUIRE(_dependencyMap[1], "react-native").unstable_enableLogBox is not a function.
I'm sure I'm doing something wrong, maybe it's not the right way.
you need to do the following:
create a file in the project root title it intro.js
add require('react-native').unstable_enableLogBox(); to intro.js
add import './intro'; at the top of index.js
This worked with me.
Here's how I did it. For some reason imports get resolved super early, which seems to cause the following error:
Error: LogBox must be enabled before AppContainer is required so that it can properly wrap the console methods.
Please enable LogBox earlier in your app.
Move the contents of your entrypoint (usually index.js) to another file (_index.js for example), then require() it from your entrypoint AFTER enabling the logbox:
if(__DEV__)
require('react-native').unstable_enableLogBox();
require('./_index');
import {name as appName} from './app.json';
require('react-native').unstable_enableLogBox();
please write in simple manner I mentioned above please check screen shot for Log box.
First of all, identify where is the main file of your entire app. For example, if you are using a file like Reactotron config file you will put this line before all imports:
require('react-native').unstable_enableLogBox();
Therefore, if you are not using something like Reactotron you will put the above line, before your App import on index.js in the root of project, like this:
require('react-native').unstable_enableLogBox();
...
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name } from './app.json';
AppRegistry.registerComponent(name, () => App);
I hope i've helped! =)
According to the React Native docs this is how you would implement it:
import { LogBox } from 'react-native';
// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all log notifications:
LogBox.ignoreAllLogs();
I did this at the very top of App.js and it worked great.
This question has been asked before but I cannot find a working solution so I'm taking the liberty to show my code in case I am missing something. I have a react native app and using redux. I have been using remote-redux-devtools for two months on this project now, but the tool stopped working all of a sudden. I receive a "SocketProtocolError" in the console and will paste that below as well as my code.
Redux store
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import thunk from "redux-thunk";
import reducers from "../../State/reducers/index";
const composeEnhancers = composeWithDevTools({ realtime: true });
const store = createStore(
reducers,
{},
composeEnhancers(applyMiddleware(thunk))
);
export default store;
In my package.json file I am using "remote-redux-devtools": "^0.5.13"
This is the error I get in the console.
Any help would be greatly appreciated!
I fixed the same error when debugging an app on my phone by running:
adb reverse tcp:5678 tcp:5678
to allow the phone to connect to the devtools. Adjust the port number if using a different one. If you're running the app in an emulator on your computer, this probably won't help.