react-native-background-task
I want the code to run back in time. I'm trying to use react-native-background-task. But BackgroundTask.define does not start.
import React from 'react'
import { Text } from 'react-native'
import BackgroundTask from 'react-native-background-task'
BackgroundTask.define(() => {
console.log('Hello from a background task')
BackgroundTask.finish()
})
export default class Home extends React.Component {
componentDidMount() {
BackgroundTask.schedule({
period:1
})
}
render() {
return <Text>Hello world</Text>
}
}
this is due to linking issue
Android
he linking of the library can be done automatically by running:
$ react-native link react-native-background-task
One manual step is still needed -
in your project file android/app/src/main/java/myapp/MainApplication.java, add the following to the end of the onCreate() method:
BackgroundTaskPackage.useContext(this);
iOS
For iOS support, this library relies on version 2.0.x of react-native-background-fetch which can be installed as follows:
$ npm install react-native-background-fetch#2.0.x --save
$ react-native link react-native-background-fetch
This library will behave correctly on iOS as long as react-native-background-fetch is installed alongside it, and has been linked with your project.
Related
I have this basic React Native Code which fails to compile as soon as I import anything from react-native-router-flux. It throws Module not found: Can't resolve '#react-navigation/core'
If I uncomment line import { Router, Scene } from "react-native-router-flux";, everything works fine. I also manually did npm install #react-navigation/core but to no avail
import React from "react";
import { Router, Scene } from "react-native-router-flux";
class Index extends React.Component {
render() {
return <div></div>
}
}
export default Index;
What could I be missing?
Versions
React v17.0.2
react-native-router-flux v4.3.1
React-native v0.66.3
The latest react-native version (v0.66.3) is incompatible with react-native-router-flux (v4.3.1) which is pretty old. Its better to look for #react-navigation/native
Thanks #XplosiVe06 for pointing out
In React Native I found two plugins to check if a device (iOS/Android) is jailbroken/rooted:
Jail Monkey
react-native-is-device-rooted
I have firstly tried the npm package react-native-is-device-rooted but it doesn't work and it seems to be outdated. So I tried Jail Monkey, but I get this following error:
The code is:
import JailMonkey from 'jail-monkey'
export default class Welcome extends Component {
render() {
return (
...
<View style={styles.lowerView}>
<CustomButton text={"Jail Monkey"} onPress={() => this.printJailMonkey()}/>
</View>
...
);
}
printJailMonkey = () => {
console.log("Jail Monkey library content: " + JailMonkey.isJailBroken())
}
}
I have checked carefully the manual link of the package (using Xcode, pod install, and so on...). Nothing worked, does someone can help me?
JailMonkey uses Native Modules and thus cannot run in an Expo managed app. You need to eject it to ExpoKit for JailMonkey to work.
Solved but doing manually the linking.
Try following steps for manual linking.
Navigate to root folder in terminal enter commands:
react-native link
cd ios
pod update
I'm basically having the issue same as here.
https://github.com/firebase/firebase-js-sdk/issues/1899
How I got this error
Since AsyncStorage is deprecated, I tried to install #react-native-community/async-storage following the official documentation
But it failed completely as I got the error above.
Thus I wanted to roll back to my previous working version except none of what I did worked.
None of these solved my problem
4 commands suggested on the error screen
undoing yarn add with yarn remove
I also did npm install #react-native-community/async-storage, did not work.
3.5 so I did npm uninstall #react-native-community/async-storage It was removed, but roll-back did not work.
Re-installing the react-native-cli
Re-creating a completely new project from scratch, but it is still giving the same error.
I could not find a solution for this. Please help.
If it's on iOS you probably forgot to do pod install.
Paste this inside ios/Podfile:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
then just do cd ios && pod install
EDIT.
I createad a project from scratch, this are the steps i did to make asyncStorage run on iOS and Android:
1) react-native init AsyncTest
2) npm i #react-native-community/async-storage
(trying to use asyncStorage during this step shows error, but works on Android)
3) Pasted inside Podfile this pod:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
4) From terminal, assuming you are in the project folder do cd ios and pod install
5) Project run succesfully on iOS and works.
react-native version was 0.60.4
This is how the project test App.js was for the test:
import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
return (
<View>
<AsyncStorageTest />
</View>
);
};
export default App
And AsyncStorageTest is:
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '#react-native-community/async-storage';
export class AsyncStorageTest extends Component {
constructor(props) {
super(props)
this.state = {
storedData: "myValue"
}
}
storeData = async () => {
console.log("inside storeData")
try {
await AsyncStorage.setItem('Test', 'TestValue')
} catch (e) {
console.log(e)
}
}
getData = async () => {
console.log("inside getData")
try {
const value = await AsyncStorage.getItem('Test')
this.setState({ storedData: value })
} catch (e) {
// error reading value
}
}
render() {
return (
<View style={{ marginTop: 40 }}>
<Text> {this.state.storedData}</Text>
<Button title={"storeData"} onPress={this.storeData}></Button>
<Button title={"getData"} onPress={this.getData}></Button>
</View>
)
}
}
export default AsyncStorageTest
Tested and worked, see if you missed something.
Make sure the that #react-native-community/async-storage is unlinked from your project.
Somehow the path to the package got changed.
This helped me:
import AsyncStorage from '#react-native-async-storage/async-storage';
For someone like me please double-check this as well:
When you install npm i #react-native-community/async-storage you should import it as import AsyncStorage from '#react-native-community/async-storage'; and DO NOT import is as import AsyncStorage from '#react-native-async-storage/async-storage';
after i run npm install react-native-dotenv
i take this error,
then i rerun npm install;
cd ios;pod install;cd ..;
and then close the terminal and uninstall app from phone,and restart them,it's works.
my version "react": "16.9.0",
"react-native": "0.61.5",
I solved this issue by installing #react-native-community/async-storage aliased to #react-native-async-storage/async-storage
The command was
yarn add #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
or
npm install --save #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
I solved this issue following the import...
import {AsyncStorage} from 'react-native';
When you install npm install #react-native-community/async-storage
You could import => import AsyncStorage from '#react-native-community/async-storage';
Dont import this => import AsyncStorage from '#react-native-async-storage/async-storage';
The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.
Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.
Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache
I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.
This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk
I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.
I create a new project in react-native ,then install (npm install --save react-navigation npm install --save react-native-gesture-handler),
the latest version (react-native: 0.60.0) auto linking so,I not link ,but still is showing error,
!https://prnt.sc/oaxxuc
Task :react-native-gesture-handler:compileDebugJavaWithJavac **FAILED**
After I uninstall gesture-handler this kind of error showing
!https://prnt.sc/oaxx8i
Please help to solve this error
The react-native latest version:-
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0 npmGlobalPackages:
react-native-cli: 2.0.1
thanks
You should paste import 'react-native-gesture-handler'; on the top of index.js which is standard in react native out of the box.
the entry of your app. This is the file where you import your App.js file, its written clearly in the documentations.
documents here https://reactnavigation.org/docs/en/getting-started.html
This issue has been posted on github and you can apply the following solution.
It will work for the RN 0.60.0.
https://github.com/kmagiera/react-native-gesture-handler/issues/642#issuecomment-509113481
First, install the library using yarn:
yarn add react-native-gesture-handler
or with npm if you prefer:
npm install --save react-native-gesture-handler
Linking
react-native link react-native-gesture-handler
Android
Follow the steps below:
If you use one of the native navigation libraries (e.g. wix/react-native-navigation), you should follow this separate guide to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that use a standard Android project layout.
Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
#Override
protected String getMainComponentName() {
return "Example";
}
+ #Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ #Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
iOS
There is no additional configuration required on iOS except what follows in the next steps.
Now you're all set. Run your app with react-native run-android or react-native run-ios
If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
android: null,
ios: null,
},
},
},
};
As suggested by documentation
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC
const ExampleWithHoc = gestureHandlerRootHOC(() => (
<View>
<DraggableBox />
</View>
);
);
export default function Example() {
return (
<Modal>
<ExampleWithHoc />
</Modal>
);
}
Here the documentation
for react-native-gesture-handle 2 version onwards we just need to following changes at App.js
import {GestureHandlerRootView} from 'react-native-gesture-handler';
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}
Downgrade from 1.1.0 -> 1.0.16 and use exact version(-E):
npm i react-native-gesture-handler#1.0.16 -D -E