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
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { NavigationContainer } from '#react-navigation/native'
This is the erro message.
Unable to resolve "react-native-screens" from "node_modules\#react-navigation\bottom-tabs\src\views\BottomTabView.tsx"
Failed building JavaScript bundle.
Did you install
npm install #react-navigation/bottom-tabs or if you used yarn package manager,
yarn add #react-navigation/bottom-tabs
Have you updated the pod file if you added this package?
cd ios
pod install
Install the following packages
npm install --save react-native-gesture-handler react-native-reanimated react-native-screens
Check the docs
https://reactnavigation.org/docs/getting-started/
Hope this helps!
What is the best/easiest way to create new react-native-app using react-native-0.59.9 or lower?
Trying to use https://github.com/futurepress/epubjs-rn , which only runs in react-native 0.59 or lower.
The example app in https://github.com/futurepress/epubjs-rn/EpubReader does not work out of the box.
please use epubjs-rn-62
usage
To use the components in your own app install via npm or yarn
npm install --save epubjs-rn
import { Epub } from 'epubjs-rn';
Then you can add the reader element in your code:
<Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow={"paginated"} />
In order to start a new project with a specific React Native version, you can use the --version
react-native init ProjectName --version="0.59.9"
Check official documentation for more information.
EDIT
But in order to run an older version, you need to downgrade your React Native CLI version according to Compatibility of React Native CLI.
If you have already installed a version of react-native CLI, uninstall it using
npm uninstall -g react-native-cli
Then you have to install an older version as below,
npm install react-native-cli#1.0.0
Hope this will help you.
I have installed react-navigation in my React Native project. Its a starter project doesn't have any codes. But while running project I am facing error like this.
Here is my Navigation code
import { createStackNavigator } from 'react-navigation';
import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';
const Navigation = createStackNavigator({
Home: { screen: Home },
WeatherDetail: {
screen: WeatherDetail
}
});
export default Navigation;
And here is the App.js codes
import Navigator from './Router';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Navigator />
</View>
);
}
}
If I remove the navigator component from the App.js and replace it with a Text the application runs without any error.
remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
If you are using react-link to link your dependencies:
0pen your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx
Close Xcode
In your /ios folder run "pod update"
In your project source run "react-native link"
Open Xcode and Clean Build Folder from Xcode Menu -> Product
Run your application from Xcode
Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios
Now run your application from Xcode, you should be fine.
From the official doc:
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,
},
},
},
};
If your are using React 0.60, just omit this official doc. Follow following steps:
rm react-native.config.js if exist
react-native link react-native-gesture-handler
cd ios && pod install && cd ..
react-native run-ios
I get the same error on ios from RN v0.60
The following worked for me:
cd ios
pod install
First, remove node_modules and package-lock.json and run npm install.
After installing the react-navigation package in your React Native project. You should install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:
npm install react-native-gesture-handler
And finally, link gesture dependency as:
react-native link react-native-gesture-handler
This answer based on the React Navigation document.
maybe someone come here because same problem as me.
i got this error because i'm using react-navigation version 3.x, in that version stackNavigator is change to createStackNavigator and should use createAppContainer(createStackNavigator)
im fix it just like mr.amiri said but im not delete my node_module im just follow step 3 - 5
Since I am not allowed to comment, I am posting it here. This is the answer by #Amiri Houssem but I am adding one more thing:
remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
If there is an error even after these 5 steps, check android/settings.gradle and change that line to this:
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
I'm answering because none of the above answers were relevant to me.
I got this error because VSCode automatically inserted import { TouchableOpacity } from 'react-native-gesture-handler' as a dependency in my file when I added a <TouchableOpacity> element.
Give the last files you edited a once-over just in case there's an import statement you don't expect!
I used this in the CLI to solve the issue
cd iOS
pod install
cd ..
react-native unlink react-native-gesture-handler
Uninstalled the app from the device and run the android project - react-native run-android and it worked fine
you can check your version of react-native
if React Native 0.59 and lower you can
react-native link react-native-gesture-handler
and check your #react-navigation version in
https://reactnavigation.org/versions
may be its late.
Temporary solution downgrade the version of react navigation:
1- unlink and uninstall react-navigation and the handler
2- add "react-navigation": "^2.18.2" to package.json
3- remove node_modules folder
4- npm i
5- react-native link
if you have done the above, it hasn't run yet, try this
if you use Windows
cd android
.\gradlew cleanBuildCache
and try running it
react-native run-android
Even though react-native-gesture-handler is present in node_modules folder, we need to add it to path or install it again. Then link with native code.
1) npm install --save react-native-gesture-handler
success Saved 1 new dependency.
info Direct dependencies
└─ react-native-gesture-handler#1.0.15
info All dependencies
└─ react-native-gesture-handler#1.0.15
2) react-native link
rnpm-install info Linking react-native-gesture-handler ios dependency
rnpm-install info Platform 'ios' module react-native-gesture-handler has been
successfully linked
rnpm-install info Linking react-native-gesture-handler android dependency
rnpm-install info Platform 'android' module react-native-gesture-handler has
been successfully linked
3) react-native run-android or react-native run-ios
If you are using a configuration with Podfile in ios. Follow this steps:
Comment this line pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' in <react-native-project>/ios/Podfile.
Open <react-native-project>.xcworkspace Add RNGestureHandler.xcodeproj in Libraries (Right click over library folder and select "Add files to ") from node_modules/react-native-gesture-handler/ios.
Add libRNGestureHandler.a in (Build Phases) -> (Link Binary With Libraries).
This worked well for me as well.
1) npm install react-navigation
2) npm install react-native-gesture-handler
3) npm intstall
4) react-native link
uninstall the app
5) react-native run-android
Execute the following commands in command prompt (Run as Administrator)
npm install react-navigation
npm install react-native-gesture-handler
npm intstall
react-native link
Re-Install the application will resolve the issue.
I struggled with this and none of the above answers worked for me. Here's what I had to do:
Delete your ios folder entirely.
Delete your node_modules folder and package-lock.json.
Restart your computer.
Run react-native eject to re-create your native code folders.
Run npm install
Run react-native link
Run npm run start -- --reset--cache
Now run react-native run-ios
see your native react version, if version 0.60 then you must migrate to androidX using a jetifier, follow the steps in this link
https://github.com/mikehardy/jetifier
successful for me :)
If you're on React Native >= 0.60:
You should see the following entry in your ios/Podfile:
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
If this line is not there, first run:
react-native link react-native-gesture-handler
ios/Podfile should now contain a new entry.
Now run this command from iOS directory /ios/:
pod install
Run your iOS project again either directly using XCode or react-native run-ios
I have posted this here have created react-native app using
react-native init myapp
added web3 in package.json
npm install
react-native run-ios
but i am getting the error unable to resolve module crypto from web3-eth-accounts. Is there any way to fix this
unable to resolve crypto
Crypto is a node js module, when React Native is run - it uses Javascript Core. Crypto isn't include within this. When I installed crypto I used the following package:
https://www.npmjs.com/package/react-native-crypto
Instructions:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
Import shim.js in your index.js file.
When you have done that crypto should be made available, if it still doesn't work I had to create a const in my App.js file like so:
export const cryp = require('crypto');
And import it into the components you need.
UPDATE
I've done a fresh build for this, I followed the below:
react-native init TestApp
Follow the instructions above for Crypto.
Linked:
react-native link
react-native run-ios
react-native-crypto don't work on recent react-native version 0.63.3 and react version 16.13.1, any more.
I used crypto-js package. The version is 3.1.9-1 in my react-native app. It's working well.
You can add below line in package.json file.
"crypto-js": "3.1.9-1",
crypto is a node's library that works with the browser however we can use it with react native with some hacks mentioned below follow these steps and boom! you are ready to rock.
npm i --save react-native-crypto
==> install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
==>install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
==> install node core shims and recursively hack package.json files
==> in ./node_modules to add/update the "browser"/"react-native" fieldwith relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
i had the same problem, it seems the crypto module is not supported by react native because when i install crytpo , it does not have an index.js file in the node_modules. so my problem came about when i was trying to use jsonwebtoken which uses crypto to encrypt data. so i uninstalled jsonwebtoken and switched to react-native-pure-jwt