React Native PDF View "PDFView" was not found in the UIManager - react-native

I'm trying to open a PDF from URL in my react native project.
I created a open report file:
import React, { Component } from 'react';
import PDFView from 'react-native-view-pdf';
class OpenBGReport extends Component {
render() {
return (
<PDFView
style={{ flex: 1 }}
onError={(error) => console.log('onError', error)}
onLoad={() => console.log('PDF rendered from url')}
resource="http://www.pdf995.com/samples/pdf.pdf"
resourceType="url"
/>
);
}
}
export default OpenBGReport;
However, I'm getting the error: Invariant Violation: Invariant Violation: requireNativeComponent: "PDFView" was not found in the UIManager.
I already tried to run npm link react-native-pdf-view but still same error.
How can I open a PDF from URL in React Native?
Thanks

This is how you manually link for iOS:
cd ios/ && pod deintegrate
Then add the following to your Podfile:
pod 'RNPDF', :path => '../node_modules/react-native-view-pdf'
Then run pod install.
This is how you manually link for Android:
Go to your MainApplication.java and add the following to the top of the file:
import com.rumax.reactnative.pdfviewer.PDFViewPackage;
Then below it:
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new PDFViewPackage());
return packages;
}
In android/settings.gradle, add:
include ':react-native-view-pdf'
project(':react-native-view-pdf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-pdf/android')
In android/app/build.gradle, add:
implementation project(':react-native-view-pdf')
Please keep in mind you are only doing the above because you said you were on RN 0.59.8, you will not need to do this post-RN 60ish as everything is now autolinked.

Related

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types

I am getting this warning in log :
ViewPropTypes will be removed from React Native. Migrate to
ViewPropTypes exported from 'deprecated-react-native-prop-types
even I haven't used ViewPropTypes anywhere in my code.
some of my packages are :
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.2",
"native-base": "^2.13.14",
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-modal": "^13.0.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.3.0",
"react-redux": "^7.2.6",
"redux-thunk": "^2.4.1"
Solution:
Install patch-package into your project, as per the instructions.
Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.
The invariant seems to be enforced in node_modules/react-native/index.js, starting at line 436:
here is my patch file react-native+0.69.3.patch
diff --git a/node_modules/react-native/ReactCommon/React-bridging.podspec b/node_modules/react-native/ReactCommon/React-bridging.podspec
index 5255c13..52a8eb0 100644
--- a/node_modules/react-native/ReactCommon/React-bridging.podspec
+++ b/node_modules/react-native/ReactCommon/React-bridging.podspec
## -30,7 +30,7 ## Pod::Spec.new do |s|
s.source = source
s.source_files = "react/bridging/**/*.{cpp,h}"
s.exclude_files = "react/bridging/tests"
- s.header_dir = "react/bridging"
+ s.header_dir = "."
s.header_mappings_dir = "."
s.compiler_flags = folly_compiler_flags
s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/RCT-Folly\"",
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..349b4dd 100644
--- a/node_modules/react-native/index.js
+++ b/node_modules/react-native/index.js
## -435,32 +435,16 ## module.exports = {
},
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
- invariant(
- false,
- 'ColorPropType has been removed from React Native. Migrate to ' +
- "ColorPropType exported from 'deprecated-react-native-prop-types'.",
- );
+ return require('deprecated-react-native-prop-types').ColorPropType
},
get EdgeInsetsPropType(): $FlowFixMe {
- invariant(
- false,
- 'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
- "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
- );
+ return require('deprecated-react-native-prop-types').EdgeInsetsPropType
},
get PointPropType(): $FlowFixMe {
- invariant(
- false,
- 'PointPropType has been removed from React Native. Migrate to ' +
- "PointPropType exported from 'deprecated-react-native-prop-types'.",
- );
+ return require('deprecated-react-native-prop-types').PointPropType
},
get ViewPropTypes(): $FlowFixMe {
- invariant(
- false,
- 'ViewPropTypes has been removed from React Native. Migrate to ' +
- "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
- );
+ return require('deprecated-react-native-prop-types').ViewPropTypes
},
};
So, change these lines to return the corresponding Prop Types from deprecated-react-native-prop-types instead:
Save and run npx patch-package react-native to save the patch.
Rebuild and the app should launch.
Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.
This is the patch issue and can be resolved by just replacing few lines of code:
check if you have installed deprecated-react-native-prop-types package if not run the below command first.
yarn add deprecated-react-native-prop-types
inside node_modules/react-native/index.js
replace these functions with the below lines
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
return require('deprecated-react-native-prop-types').ColorPropType;
},
get EdgeInsetsPropType(): $FlowFixMe {
return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},
get PointPropType(): $FlowFixMe {
return require('deprecated-react-native-prop-types').PointPropType;
},
get ViewPropTypes(): $FlowFixMe {
return require('deprecated-react-native-prop-types').ViewPropTypes;
},
Temporary solution.
ignoreWarnings.js
import { LogBox } from "react-native";
if (__DEV__) {
const ignoreWarns = [
"EventEmitter.removeListener",
"[fuego-swr-keys-from-collection-path]",
"Setting a timer for a long period of time",
"ViewPropTypes will be removed from React Native",
"AsyncStorage has been extracted from react-native",
"exported from 'deprecated-react-native-prop-types'.",
"Non-serializable values were found in the navigation state.",
"VirtualizedLists should never be nested inside plain ScrollViews",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
}
App.js
// import at the very top of everything.
import "../ignoreWarnings";
Here you go , i gave some extra in case you are using Expo 45 new gesture-handler 2.2 and NativeBase , the below removes the errors from ViewPropTypes and react-native-gesture-handler both from LogBox and console:
import { LogBox } from 'react-native'
import ignoreWarnings from 'ignore-warnings';
ignoreWarnings('warn',['ViewPropTypes','[react-native-gesture-handler]'])
LogBox.ignoreLogs([
'ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from \'deprecated-react-native-prop-types\'.',
'NativeBase: The contrast ratio of',
"[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
])
Recently I faced this issue in my two react native projects. These steps works for me 100%. I didn't get any deprecated props error, After i fixed the issue.
testing module resolver usage to fix deprecated issue in react-native based on discussion in related react-native issue link
Step 1
Install the plugin
npm install --save-dev babel-plugin-module-resolver deprecated-react-native-prop-types
or
yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types
Step 2
create index.js file inside project folder resolver/react-native/ with following code
import * as StandardModule from 'react-native';
const deprecatedProps = {
ImagePropTypes: require('deprecated-react-native-prop-types/DeprecatedImagePropType'),
TextPropTypes: require('deprecated-react-native-prop-types/DeprecatedTextPropTypes'),
ViewPropTypes: require('deprecated-react-native-prop-types/DeprecatedViewPropTypes'),
ColorPropType: require('deprecated-react-native-prop-types/DeprecatedColorPropType'),
EdgeInsetsPropType: require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType'),
PointPropType: require('deprecated-react-native-prop-types/DeprecatedPointPropType'),
};
// Had to use a proxy because ...StandardModule made think react-native that all modules were
// being used and was triggering some unnecessary validations / native dep checks.
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
get(obj, prop) {
if (prop in deprecatedProps) {
return deprecatedProps[prop];
}
if (prop === 'Image') {
return new Proxy(obj[prop], {
get(obj, prop) {
if (prop === 'propTypes') return deprecatedProps.ImagePropTypes;
return Reflect.get(...arguments);
},
});;
}
if (prop === 'Text') {
return new Proxy(obj[prop], {
get(obj, prop) {
if (prop === 'propTypes') return deprecatedProps.TextPropTypes;
return Reflect.get(...arguments);
},
});
}
return Reflect.get(...arguments);
},
});
module.exports = objProx;
Step 3
configure module resolver inside babel.config.js, depends on your project requirement to blacklist/whitelist certain npm packages to prevent conflicting file.
example module-resolver config :
var path = require('path');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"root": ["."],
resolvePath(sourcePath, currentFile, opts) {
if (
sourcePath === 'react-native' &&
!(
(
currentFile.includes('node_modules/react-native/') || // macos/linux paths
currentFile.includes('node_modules\\react-native\\')
) // windows path
) &&
!(
currentFile.includes('resolver/react-native/') ||
currentFile.includes('resolver\\react-native\\')
)
) {
return path.resolve(__dirname, 'resolver/react-native');
}
/**
* The `opts` argument is the options object that is passed through the Babel config.
* opts = {
* extensions: [".js"],
* resolvePath: ...,
* }
*/
return undefined;
}
}],
],
};
Step 4
You're using expo, should run this command
expo r -c
You're using React Native, should run this command
npm start -- --reset-cache
you using react-native 0.71.0
node_modules/react-native/index.js
STEP1
Corresponding Line Annotation Process
get ViewPropTypes(): $FlowFixMe {
// console.error(
// 'ViewPropTypes will be removed from React Native, along with all ' +
// 'other PropTypes. We recommend that you migrate away from PropTypes ' +
// 'and switch to a type system like TypeScript. If you need to ' +
// 'continue using ViewPropTypes, migrate to the ' +
// "'deprecated-react-native-prop-types' package.",
// );
return require('deprecated-react-native-prop-types').ViewPropTypes;
},
STEP2
Run patch-package for react-native
npx patch-package react-native
You must run the following to prevent console errors at runtime
**1) First run the following command in our project directory
$ npm install deprecated-react-native-prop-types
Then open the node modules, open the folder that u have installed before the
error occuired
in that folder index.js and remove the viewproptype in the file
then import the following
$ import { ViewPropTypes } from 'deprecated-react-native-prop-types';**
Got the solution !!!
first of all install the package :
npm install deprecated-react-native-prop-types
So when you check the call stack of the warning:
You can find where the ViewPropTypes error is from.
In my case its in the MultiSelect.
So you go in the file (you can click on it)
otherwise it's in node_module/react-native-multi-select/lib/react-native-multi-select.js
And you remove ViewPropTypes from the import of react-native
and you add it from deprecated-react-native-prop-types
So the code was :
import React, { Component } from 'react';
import {
Text,
View,
TextInput,
TouchableWithoutFeedback,
TouchableOpacity,
FlatList,
UIManager,
ViewPropTypes
} from 'react-native';
and it has to be :
import React, { Component } from 'react';
import {
Text,
View,
TextInput,
TouchableWithoutFeedback,
TouchableOpacity,
FlatList,
UIManager
} from 'react-native';
import { ViewPropTypes } from 'deprecated-react-native-prop-types'
Save and restart all the app.
/!\ Watch out if the warn is still there, it can be from another file, check the call stack again, do the same process. I had to do it also for the react-native-camera (RNCamera.js)
Hi, devs
So, edit node_modules is not good way to resolve the problem
I am using React Native with Expo CLI (RN 0.70.5, EXPO 47.0.6)
Follow step by step and be happy!
LETS GO!!
STEP 1:
run command yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types
STEP 2:
in your root project create folder resolver, inside this create another folder react-native, inside this create index.js file.
looks like: ./resolver/react-native/index.js
open the file and paste this:
import * as StandardModule from "react-native";
const deprecatedProps = {
ImagePropTypes: require("deprecated-react-native-prop-types/DeprecatedImagePropType"),
TextPropTypes: require("deprecated-react-native-prop-types/DeprecatedTextPropTypes"),
ViewPropTypes: require("deprecated-react-native-prop-types/DeprecatedViewPropTypes"),
ColorPropType: require("deprecated-react-native-prop-types/DeprecatedColorPropType"),
EdgeInsetsPropType: require("deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType"),
PointPropType: require("deprecated-react-native-prop-types/DeprecatedPointPropType"),
};
const imgProx = new Proxy(StandardModule.Image, {
get(_, prop) {
if (prop === "propTypes") return deprecatedProps.ImagePropTypes;
return Reflect.get(...arguments);
},
});
const txtProx = new Proxy(StandardModule.Text, {
get(_, prop) {
if (prop === "propTypes") return deprecatedProps.TextPropTypes;
return Reflect.get(...arguments);
},
});
const objProx = new Proxy(StandardModule, {
get(_, prop) {
if (prop in deprecatedProps) {
return deprecatedProps[prop];
}
if (prop === "Image") {
return imgProx;
}
if (prop === "Text") {
return txtProx;
}
return Reflect.get(...arguments);
},
});
module.exports = objProx;
STEP 3:
Edit babel.config.js file:
add in presets array: "module:metro-react-native-babel-preset".
add in plugins array:
"module-resolver",
{
root: ["."],
resolvePath(sourcePath, currentFile) {
if (
sourcePath === "react-native" &&
!(
(
currentFile.includes("node_modules/react-native/") || // macos/linux paths
currentFile.includes("node_modules\\react-native\\")
) // windows path
) &&
!(
currentFile.includes("resolver/react-native/") ||
currentFile.includes("resolver\\react-native\\")
)
) {
return path.resolve(__dirname, "resolver/react-native");
}
return undefined;
},
},
]
STEP 4:
run expo r -c
CONGRATULATIONS, YOU ARE WELCOME 😉🇧🇷
You can wait for them to update the dependencies or update the imports manually or even better make a pull request to help the community.
Your issue might be in one of your packages, consider upgrading them to the latest version. I faced this issue after downgrading native-base to v2.15.2 from v3++. Moving back to version 3 did it for me
The problem is the react-native-camera plugin. If you don`t want to migrate to the latest plugin suggested. Must do the next steps:
The course of my solution, I went to the node-modules folder -> the react-native-camera folder and found the main file RNCamera.js
find ViewPropTypes import
import {
findNodeHandle,
Platform,
NativeModules,
requireNativeComponent,
View,
ViewPropTypes,
ActivityIndicator,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native';
//delete import this file from 'react-native' and create new import
import {ViewPropTypes} from 'deprecated-react-native-prop-types';
and its work good.
Of course install the new plugin:
npm i deprecated-react-native-prop-types
And edit the index.js of the folder node_module/react-native.
Replace these functions with the below lines
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
console.warn('');
return require('deprecated-react-native-prop-types').ColorPropType;
},
get EdgeInsetsPropType(): $FlowFixMe {
console.warn('');
return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},
get PointPropType(): $FlowFixMe {
console.warn('');
return require('deprecated-react-native-prop-types').PointPropType;
},
get ViewPropTypes(): $FlowFixMe {
console.warn('');
return require('deprecated-react-native-prop-types').ViewPropTypes;
},
1- install "deprecated-react-native-prop-types" with npm
"npm install deprecated-react-native-prop-types"
2-Then open react-native folder inside node_modules , There you will have index.js
3-Below comment note "// Deprecated Prop Types" you will see functions like this :
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
invariant(
false,
"ColorPropType has been removed from React Native. Migrate to " +
"ColorPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get EdgeInsetsPropType(): $FlowFixMe {
invariant(
false,
"EdgeInsetsPropType has been removed from React Native. Migrate to " +
"EdgeInsetsPropType exported from 'deprecated-react-native-prop-
types'.",
);
},
get PointPropType(): $FlowFixMe {
invariant(
false,
"PointPropType has been removed from React Native. Migrate to " +
"PointPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get ViewPropTypes(): $FlowFixMe {
invariant(
false,
"ViewPropTypes has been removed from React Native. Migrate to " +
"ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
);
},
Replace it with code below :
get ColorPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").ColorPropType
},
get EdgeInsetsPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").EdgeInsetsPropType
},
get PointPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").PointPropType
},
get ViewPropTypes(): $FlowFixMe {
return require("deprecated-react-native-prop-types").ViewPropTypes
},
Then save file and rebuild your project and run
I was having the same error and was lucky to resolve it within a short time.
In my case, I followed the following steps:
Install the patch-package by going to this website.
https://www.npmjs.com/package/patch-package
Install deprecated-react-native-prop-types –
npm install deprecated-react-native-prop-types
OR
yarn add deprecated-react-native-prop-types
Go to node_modules/react-native/index.js and change this starting from:
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
invariant(
false,
"ColorPropType has been removed from React Native. Migrate to " +
"ColorPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get EdgeInsetsPropType(): $FlowFixMe {
invariant(
false,
"EdgeInsetsPropType has been removed from React Native. Migrate to " +
"EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get PointPropType(): $FlowFixMe {
invariant(
false,
"PointPropType has been removed from React Native. Migrate to " +
"PointPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get ViewPropTypes(): $FlowFixMe {
invariant(
false,
"ViewPropTypes has been removed from React Native. Migrate to " +
"ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
);
},
With this:
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").ColorPropType
},
get EdgeInsetsPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").EdgeInsetsPropType
},
get PointPropType(): $FlowFixMe {
return require("deprecated-react-native-prop-types").PointPropType
},
get ViewPropTypes(): $FlowFixMe {
return require("deprecated-react-native-prop-types").ViewPropTypes
},
Save patch by running this command
npx patch-package react-native
Rebuild App
Note: If you upgrade react-native, you will need to reapply this patch.
You can copy this code to the highest level code before App.
const ignoreWarns = [
"Setting a timer for a long period of time",
"VirtualizedLists should never be nested inside plain ScrollViews with the same orientation",
"ViewPropTypes will be removed",
"AsyncStorage has been extracted from react-native",
"EventEmitter.removeListener",
];
const warn = console.warn;
console.warn = (...arg) => {
for (let i = 0; i < ignoreWarns.length; i++) {
if (arg[0].startsWith(ignoreWarns[i])) return;
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
I found this error when I install npm react-native-switch-pro ,but after much research I decide to uninstall it and I found it is the problem ,please if you install it try to uninstall it maybe it's the problem
just open the RNCamera file from the node modules and comment the import and where viewproptype is used... and you are good to go
I resolved it by running:
npm install deprecated-react-native-prop-types
By importing import {ViewPropTypes} from 'deprecated-react-native-prop-types',
wherever it is required in the node dependencies.
Today I was working on this problem and I fixed it like this:
Went to node_modules
Then to react-native-camera library
Then to the src folder inside react-native-camera
Then to RNCamera.js file
There I deleted ViewPropTypes imported from 'react-native' and in a new line wrote:
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
Hope it works for you too!
I found the root cause to remove deprecated type, hope this help someone:
Open yarn.lock (or package-lock.json), find "deprecated-react-native-prop-types"
Check which dependency using "deprecated-react-native-prop-types"
Update it to latest version
Even though you are not using ViewPropTypes in your codebase directly some of the packages may be using it.
You can update all the packages that are using ViewPropTypes to a newer version.
Do a search for ViewPropTypes in your node_modules folder.
Update all packages using ViewPropTypes to newer versions.
npx pod-install(for iOS)
Restart the bundler
Refresh your app
in my case, the error came from react-native-snap-carousel library so here is how I fixed it in just 6 steps:
Step 1: npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.
Step 2: open all of these 4 files which is exists in the directories
node_modules\react-native-snap-carousel\src\carousel\Carousel.js
and
node_modules\react-native-snap-carousel\src\pagination\Pagination.js
and
node_modules\react-native-snap-carousel\src\pagination\PaginationDot.js
and
node_modules\react-native-snap-carousel\src\parallaximage\ParallaxImage.js
Step 3: delete all ViewPropTypes which is imported from react-native and import it from deprecated-react-native-prop-types which is the module we installed at the Step 1, and put it in a separated line like this
import { ViewPropTypes } from 'deprecated-react-native-prop-types'
Step 4: add this line "postinstall": "patch-package", in package.json in scripts section. example:
"scripts": {
"start": "expo start",
"postinstall": "patch-package"
},
Step 5: run this command npx patch-package react-native-snap-carousel.
Step 6: run this command npm run postinstall
I solved it opening a node_modules with vscode and serching for all "ViewPropTypes" that is inside 'react-native' module and replace it for:
import {ViewPropTypes} from 'deprecated-react-native-prop-types';
Before:
import { Platform, ViewPropTypes } from 'react-native'
After:
import { Platform } from 'react-native'
import {ViewPropTypes} from 'deprecated-react-native-prop-types';

resolving assets relative to react native bundle file outside project root

Issue(android): where to place image assets relative to js bundle file if bundle file is located outside of project root?
We have a small service where we upload JS bundles on each build. So, for example we have app com.example, if we want to update our app(while app review is pending in the app store) then we:
download JS bundle to android path /data/data/com.example/files/bundle/android.bundle
set this bundle as active via https://github.com/mauritsd/react-native-dynamic-bundle
Imagine that in the react App component we have a single image with path star.png.
When we activate a new bundle then star image is not shown.
I've checked the image path via https://reactnative.dev/docs/image#resolveassetsource in release build and the image uri resolves just to star.
So I tried the following file structures:
â„–1
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star // <= our image
â„–2
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star.png // <= our image
But still image is not shown if the bundle file is outside of the project root.
Questions:
What am I doing wrong? https://github.com/Microsoft/react-native-code-push somehow managed to solve it.
Is ios solution the same one as for android?
Thanks in advance
Bundle assets should be placed in the same folder where js bundle file lives(tested only on android).
You can always get bundle asset path via https://reactnative.dev/docs/image#resolveassetsource.
How to test:
Put an image star.png to the project root.
Create a react native app with the following code:
import React from 'react';
import {
SafeAreaView,
Text,
StatusBar,
Image
} from 'react-native';
import Star from './star.png';
const App: () => React$Node = () => {
const r = Image.resolveAssetSource(Star);
console.log(r);
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<Text>TestAssetsApp</Text>
<Image
style={{width: 50, height: 50}}
source={Star}
/>
</SafeAreaView>
</>
);
};
export default App;
Set bundle path in your MainApplication.java(my app package is called com.testassetsapp):
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
#Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
#Override
protected String getJSMainModuleName() {
return "index";
}
// Add this method
#Override
protected String getJSBundleFile() {
return "/data/data/com.testassetsapp/files/android.bundle";
}
};
Create android JS bundle and assets via:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android.bundle --assets-dest assets
Install debug version via:
cd android && ./gradlew installDebug
NOTICE: test only via ./gradlew installDebug without metro bundler running as it always rewrites bundle path.
Now if you run the app you will get an error "Bundle not found".
Upload android.bundle file to /data/data/com.testassetsapp/files/android.bundle
Now if you run the app it should start. But star image is not yet displayed.
Upload bundle files from the assets folder to /data/data/com.testassetsapp/files so app data structure should be the following:
Now if you restart the app star image should be displayed.

`unable to resolve module #react-native-community/async-storage` broke down my React Native environment

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';

How to fix react-native-gesture-handler error not working

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

Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager. No fix?

I have followed the guide on the react-native-maps documentation : I got the error.
I looked everywhere on stackoverflow and on google and I was not able to find a fix.
I tried all answers I could find on forums and I still get the error.
The error :
Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager.
My code :
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet } from 'react-native';
export default class App extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<MapView
style = {styles.map}
showsUserLocation = {false}
followUserLocation = {false}
zoomEnabled = {true}
/>
)
}
}
const styles = StyleSheet.create ({
map: {
height: 400,
marginTop: 80
}
})
Please check these two links which provide you detailed information about react native map integration in iOS & Android
Map integration link 1 for Android & ios
Map integration link 2
Some time iOS library does not link properly so you need to manually add library into Xcode.
Try this:
open xcode project > your project > Build Phases > Link Binaries > Remove libAirMaps.a >
then add it again > check if it works ...
check image for detailed instruction
Edit :
if you already installed react-native-maps try to add AirMapsLib manually. Follow the instructions on this image. after that, try again the above instruction.
I do not face this issue yet in iOS but on Android.
Invariant Violation: requireNativeComponent:xxx not found in UIManager
Issue seems to be the dependent is not linked to your project, hence 2 solutions for this issue (depending on your 'dependency')
run react-native link in terminal/cmd at your project path.
Manual append the dependency in your MainApplication.java as shown below:
Manual append the dependency in your MainApplication.java as shown below:
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for
packages.add(new RNFirebaseAnalyticsPackage());
packages.add(new xxxPackage());
}
There may be
I have solved this issue by only running react-native run-android.
Note: if you have run react-native link unlink this first.
Add below lines to MainApplication.java
import com.airbnb.android.react.maps.MapsPackage;
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new MapsPackage());
return packages;
Take advantage of yarn. As npm would give giving errors that has no relevance to the solve the problem.
you need to add google api key in your project as well to install the library properly.
for me i had on my ios map, i had to close my terminal and my stimulator then restart again and everything was okay.
There are 2 possible errors which throw AIRMap error in your application.
Check your GOOGLE GEO API KEY is set correctly in AndroidManifest.xml. For e.g.:
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning"> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/> </application>
react-native-maps package is out of date.
With "react-native-maps": "^0.25.0" i had this problem too.
So try to update react-native-maps package. In your package.json set for e.g. "react-native-maps": "^1.4.0"