How to implement WebView in QR Code Generator using react native? - react-native

[Invariant Violation: WebView has been removed from react-native.][1]
[1]: https://i.stack.imgur.com/ce7T9.png, https://snack.expo.io/#aboutreact/generation-of-qr-code-in-react-native?session_id=snack-session-ESXWizmjL

WebView have been removed from React Native Core. You should install the package to use it.
npm install --save react-native-webview
For IOS, need to do
cd ios && pod install
Use like
import { WebView } from 'react-native-webview';
More details at
Package
and
Getting Started Guide

Related

Magic.link React Native cannot import WebView from react-native

working on implementing magic.link using react-native but i get an error when importing Magic
import { Magic } from "#magic-sdk/react-native";
error:
Attempted import error: 'WebView' is not exported from 'react-native'.
I think its because of the sub dependency of react-native-webview has been removed, but i did install it. npm install --save react-native-webview#^8.0.0 as the tutorial says? Stuck for a while now, not sure how to procede with Magic
https://magic.link/docs/login-methods/email/integration/react-native
This link was attached to the docs https://github.com/react-native-webview/react-native-webview/issues/373 . But don't know why it should not work, since the correct react-native-webview dependency was installed (8.0.0) or (^8.0.0, which is 8.2.1)
I installed the packages as the tutorial suggests
yarn add #magic-sdk/react-native
# Ensure the required `peerDependencies` are installed
yarn add react-native-webview#^8.0.0
Use this one:
npm install --save #magic-sdk/react-native
then try to link it using npm react-native link

ViewPager of React Native gives error :: 'ViewPagerAndroid has been removed from React Native'

I am trying to use the View Pager on React Native and I am using the reference link for help
https://reactnativecode.com/create-viewpager-with-tab-title-dot-indicators/?unapproved=42387&moderation-hash=570c68d8ea5535b832994536ba239b28#comment-42387
When I use the code as it is and run, it gives an error -
ViewPagerAndroid has been removed from React Native. It can now be installed and imported from 'react-native-viewpager' instead of 'react-native'.
What is that I am missing ?
yarn add #react-native-community/viewpager
Or
npm -i #react-native-community/viewpager --save
For linking use these command
react-native link #react-native-community/viewpager
In Newer versions of React Native ViewPager is not available, so you have to add it manually
then, you can import it like these
import ViewPager from '#react-native-community/viewpager';
You have to notice:
if your react native version < 0.63 - you need install react-native-tab-view 2.x.x version (the latest in this version is 2.16.0)
if >= 0.63 so install 3.x.x
Maybe this is the reason

react-native-in-app-utils not added to NativeModules

I ran:
react-native install react-native-in-app-utils
and it completed successfully. I added the import to my code:
import { NativeModules } from 'react-native'
const { InAppUtils } = NativeModules
No errors occur in building and starting but NativeModules is empty and InAppUtils is undefined.
I have used this successfully in RN 0.48; this is on RN 0.55.
Is there some step I am missing?
Documentation details for react-native-in-app-utils is misleading regarding Linking.
Install Library (react-native-in-app-utils) using rnpm. you need to install rnpm.
1.npm install rnpm -g
2. rnpm install react-native-in-app-utils
rnpm will auto link your library for IOS.
SUGGESTION
Do not install library using Yarn , npm and react-native install react-native-in-app-utils
react-native-in-app-utils requires you to have created your app with 'react-native init`. Or, you have to eject from CRNA.
CRNA can't use native modules unless you eject/detach (similar to expo, as they're interrelated):
https://github.com/chirag04/react-native-in-app-utils/issues/130
https://facebook.github.io/react-native/docs/getting-started.html

React-native-camera error with Expo: undefined is not an object (evaluating 'CameraManager.Aspect')

I cannot seem to get react-native-camera working in Expo. Here is a screenshot of the error I am receiving:
The error originates on line 62 of react-native-camera index.js which is calling NativeModules.CameraManager. Does this have something to do with expo not having access to some native APIs?
Steps already taken:
react-native link react-native-camera
watchman watch-del-all
rm -rf node_modules && npm install
rm -fr $TMPDIR/react-*
npm start -- --reset-cache
Restarting the build
I also created a regular react native app via react-native init and was able to properly set up react-native-camera without any issues.
I reached out to the Expo team directly and this was the response I received:
custom native modules are not supported in expo unless you eject
see the sdk api reference section of docs to see what native apis we
expose https://docs.expo.io/versions/v16.0.0/index.html
Answer from expo
You have to use the expo camera from:
import { Camera, Permissions } from 'expo';
Take a look at:
https://docs.expo.io/versions/latest/sdk/camera.html
As I understand, you want to use the camera with Expo.
In this case you can use the Expo Camera package with comes with the Expo API
SDK API ReferenceCamera:
https://docs.expo.io/versions/latest/sdk/camera.html
As background info - Expo and native modules: React-Native is able to
use native app code and access native features, but it needs to be
'linked' via the native app code e.g. the POD file. In the case of
Expo, the native app is already written and only executes your React
Native code. With Expo, linking is only possible when you 'eject' or
'detach' from the original code, which does only make sense in some
cases.

Add babel polyfill to React Native Project

I´m having a issue on android. Got this error:
undefined is not a function(evaluating '_iterator2typeof
Symbol==='function'?Symbol.iterator:'##iterator'´)
I think it is related to the use of for of, es6.
Can i add babel-polyfill to React Native Project ?
In order to add babel-polyfill to your react-native project after installing
npm install --save babel-polyfill
just import it like this in your entry endpoint:
import 'babel-polyfill';
Now you can use new built-ins like Promise or WeakMap, static methods like Array.from and instance methods like Array.prototype.includes, etc.
You can use
npm install es6-symbol --save
Then add in your index.android.js & index.ios.js
import 'es6-symbol/implement'