Trying to create a drawer navigator in React Native using VSCode.
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
When I get this error:
Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
I made sure that everything in babel.config.js is correct:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
I added the following import to the top my root file (App.js):
import 'react-native-gesture-handler';
I reset my cache too using:
npm cache clean --force
Here are also all of my packages:
...
...
...
"dependencies": {
"#react-navigation/drawer": "^6.5.5",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.6",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
...
...
...
Just ran into this issue, was fixed by running
npm start -- --reset-cache
Try installing preset by
npm i metro-react-native-babel-preset --save-dev
and then
npm start -- --reset-cache
Since the ViewPropTypes has been removed from 'react-native' and the packages using it didn't update. this error appears after building the app
ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
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.
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.
packages I'm using:
"#react-native-clipboard/clipboard": "^1.10.0",
"#react-native-community/checkbox": "^0.5.12",
"#react-native-firebase/app": "^14.11.0",
"#react-native-firebase/auth": "^14.9.4",
"#react-native-firebase/database": "^14.11.0",
"#react-native-firebase/firestore": "^14.11.0",
"#react-native-google-signin/google-signin": "^7.2.2",
"#react-native-masked-view/masked-view": "github:react-native-masked-view/masked-view",
"#react-native-picker/picker": "^2.4.1",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"base-64": "^1.0.0",
"num-words": "^1.2.2",
"numeral": "^2.0.6",
"pdf-lib": "^1.17.1",
"react": "17.0.2",
"react-native": "^0.69.0",
"react-native-blob-util": "^0.16.1",
"react-native-country-picker-modal": "^2.0.0",
"react-native-date-picker": "^4.2.2",
"react-native-fbsdk-next": "^8.0.5",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-html-to-pdf": "^0.12.0",
"react-native-pdf": "^6.5.0",
"react-native-picker-select": "^8.0.4",
"react-native-progress": "^5.0.0",
"react-native-radio-input": "^0.9.4",
"react-native-ratings": "^8.1.0",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1",
"react-native-share": "^7.5.0",
"react-native-signature-canvas": "^4.3.1",
"react-native-vector-icons": "^9.1.0",
"react-native-webview": "^11.21.2",
"react-scripts": "^5.0.1"
Any solution?
I can recommend doing the steps outlined in this github discussion.
Steps
Install patch-package, this will later be used to make the changes more persistent.
Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types
Now you have to hack the node_modules. Go to node_modules/react-native/index.js starting around line 436 and change 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'.",
);
},
to 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
},
Run npx patch-package react-native to save the patch.
Rebuild the app.
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.
Props to goguda for providing this answer.
I had the same error I followed the following steps and I resolved it. It arises because react-native has removed the view prop types from the library but still some external modules require the use of it.
Run the command in the terminal
npm i deprecated-react-native-prop-types#2.2.0
Go to the node modules and find the module that you are using in my case it was "react-native-camera"
Navigate into the src folder of the module file (in my case it was in RNCamera.js) and look for
import {
findNodeHandle,
Platform,
NativeModules,
ViewPropTypes,
requireNativeComponent,
View,
ActivityIndicator,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native';
In the following code remove the ViewPropTypes and paste the following command below this
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
save the file and run it again, Hope it helps <3
I had the same error using react-native-camera. I fix it by installing npm i deprecated-react-native-prop-types#2.2.0 and replacing in node_modules/react-native-camera
all imports in files.
import { ViewPropTypes } from 'react-native';
for
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
In case anyone is getting the error with react-native-snap-carousel this is another way to fix it:
npm i --save react-native-snap-carousel#4.0.0-beta.6
github issue
I had the same error using react-native-snap-carousel. I fix it by replacing in node_modules/react-native-snap-carousel
Check All files and change this import
import { ViewPropTypes } from 'react-native';
with this and this error gone
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
I was facing this problem (Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable.) when I used drawer navigation
so I follow this step
I hope this will help someone
EDIT -
For me.. This error represented a mismatch violation with an older version of Expo Go in the simulator and the version of Expo Cli I was running. It was important that I upgraded each version of Expo one version at a time. It had nothing to do with my React or React Native code. As of Expo 46, expo upgraded the ios simulator with a prompt so the fix below i only relevant below version 46.
In my case, I am using Expo managed Workflow and this error popped up after I upgraded Expo Go on the ios simulator, which prompted me to have to upgrade Expo because the simulator wouldn't allow the version of Expo I was using (43) . After upgrading Expo, and running the simulator, I was greeted with this error, which sent me down a rabbit hole, (where this question is one of the only relevant search results) of trying to upgrade react native to be compatible with the new Expo version and so on. However, this error persisted no matter what version of react native I was using. So finally I tested a different project on the same simulator and found that the actual simulator was throwing the same error on a new project with all the latest versions.
My solution was too simple.
Install a new Simulator with the version of Expo the project is running on. While in the root of the Expo project, in the terminal, I ran
expo client:install:ios
After that, for this project these exact errors completely went away and the Simulator ran fine. I know that this is probably not a long-term fix for the actual error and that upgrading Expo and React Native is going to be necessary and this may not be the issue for many people, but in order to keep working on the project, this allowed me to move forward.
This works for me, just installed these packages. Try it, it might help you as well.
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
I had the same issue after upgrading to the new RN v0.69. Changing node_modules/react-native-camera would solve the problem locally. However, we know that when the node dependencies need to be installed from scratch - in a CI/CD process for example - the changes at 3rd party library need to be done over again. So, a better solution I suggest is to intercept the react-native-camera component at build runtime level using the babel-plugin-module-resolver as suggested here https://github.com/psycheangel/deprecated-with-module-resolver. I did another way because this solution did not work for me since it's more generic and got conflict with other stuffs I have on my project. Still using the same babel resolver plugin but to address the specific problem with react-native-camera component, this is the way I did based on the above solution by psycheangel:
Step 1
Install the babel resolver plugin and the turn around dependency:
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 resolver/react-native/index.js with this code:
import * as ReactNative from 'react-native'
import * as DeprecatedPropTypes from 'deprecated-react-native-prop-types'
delete ReactNative['ColorPropType']
delete ReactNative['EdgeInsetsPropType']
delete ReactNative['ImagePropTypes']
delete ReactNative['PointPropType']
delete ReactNative['TextInputPropTypes']
delete ReactNative['TextPropTypes']
delete ReactNative['ViewPropTypes']
module.exports = {
...ReactNative,
...DeprecatedPropTypes,
}
Step 3
add module resolver plugin config to babel.config.js:
const path = require('path')
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
resolvePath(sourcePath, currentFile) {
if (
sourcePath === 'react-native' &&
currentFile.includes('react-native-camera/src/RNCamera.js')
) {
console.log('resolver', sourcePath, currentFile)
return path.resolve(__dirname, 'resolver/react-native')
}
},
},
],
],
}
My app crashes when I start to run it in production mode. In dev mode all works correctly. Only logs I have on the screen. What can I do?
I used:
"expo": "38.0.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-native": "~0.62.2",
Link to screenshot with logs
I found my problem. It's all because of wrong auto import.
I have imported useState from "react/cjs/react.development", not from 'react'.
Instead
import { useState } from "react/cjs/react.development";
I need write
import React, { useState } from "react";
Im working on a react native app using this principal dependencies:
react native
react native router flux
react thunk
expo
I was working using this package.json:
"dependencies": {
"expo": "23.0.4",
"humps": "^2.0.0",
"install": "^0.10.1",
"lodash": "^4.17.4",
"native-base": "^2.3.5",
"react": "16.0.0",
"react-native": "0.50.4",
"react-native-extend-indicator": "^0.1.2",
"react-native-keyboard-aware-scroll-view": "^0.4.2",
"react-native-maps": "^0.19.0",
"react-native-maps-directions": "^1.3.0",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-qrcode": "^0.2.6",
"react-native-router-flux": "4.0.0-beta.24",
"react-native-svg-uri": "^1.2.3",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.4.2",
"react-navigation-redux-debouncer": "^0.0.2",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"swagger-client": "2.1.32"
}
The application is using expo so i install the dependencies using:
yarn install
and then run the app by
yarn start --reset-cache
I was working fine since i wanted to add a new dependencie, so i remove the node_modules folder and the yarn.lock file, added the new dependencie and execute yarn install again.
After that, im getting this error when opening the application:
TypeError: undefined is not a function (evaluating 'addListener')
it is related with react-navigation, but im using react-native-router-flux 4.0.0-beta.24 that uses react-navigation ^1.0.0-beta.19 internally.
I have recently notice that people using react-navigation are having some troubbles with this (https://github.com/react-navigation/react-navigation/issues/3416) but using the beta.28 version.
If i go back to a previous node_modules folder (from the trash) my application runs well, so.. probably the thing is that some dependency with the ^ symbol of my package.json is no more compatible.. maybe thunk or react native router flux with my react native version.
any ideas?
Here is the part of the code when i use the react thunk middleware:
import {applyMiddleware, compose, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import getRootReducer from "../reducers/index";
import navigationDebouncer from 'react-navigation-redux-debouncer';
import {restApi} from "../lib/restApi";
const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__ });
export default function getStore(initialState) {
const enhancer = compose(
applyMiddleware(
thunkMiddleware.withExtraArgument(restApi),
navigationDebouncer(600),
loggerMiddleware
),
);
return createStore(
getRootReducer,
initialState,
enhancer
);
}
and here is the main app:
import React, {Component} from 'react';
import {Provider} from 'react-redux'
import getStore from './src/store/configureStore'
import {StatusBar} from 'react-native'
import AppNavigation from './src/navigation';
const Store = getStore();
export default class App extends Component {
constructor(props) {
super(props);
}
async componentWillMount() {
await Expo.Font.loadAsync({
'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
});
}
render() {
StatusBar.setHidden(true);
return (
<Provider store={Store}>
<AppNavigation/>
</Provider>
);
}
}
EDIT: i have found that now react-native-router-flux uses 1.0.0 react-navigation (the new stable release), and after it was using the 1.0.0-beta.27 version.. the application works with the beta version but has this problem with the 1.0.0 version...
so i realice that you are using a fixed version of react navigation in your last release (1.0.0-22.beta)
so the question is, is there a way to still using RNRF 4.0.0-beta.24 BUT using a fixed version (like 1.0.0-27.beta for example) ?
i mean, i think that is make no sence that 4.0.0-beta.24 uses ^1.0.0-beta19 (that will result in the installation of the last 1.0.0 release) and a newer version like 4.0.0-beta.28 uses a fixed lower version (1.0.0-beta.22)
So after doing some research and some tests i want to answer my question.
The problem was with the react-navigation dependency that handles internally react-native-router-flux
The dependencies are:
react-native-router-flux beta.0 - beta.24 -> react-navigation ^1.0.0-beta.19
react-native-router-flux beta.25 - beta.28 -> react-navigation 1.0.0-beta.22
the big difference here is that versions from 0 to beta24 uses ^
So .. what is the problem with that?
when installing the dependencies beta24 will search for the newest version of react-navigation since 1.0.0-beta.19, that version is the recent stable release 1.0.0 of react-navigation (the library is no more in beta version).
react-native-router-flux doesnt provide support for that dependency. It doesnt provide support to other olders dependencies neither, so they had just put the 1.0.0-beta22 react-navigation dependency fixed on their lastest releases package.json (since beta 26).
probably they will fix it since there are a lot of apps that use redux or other libraries that doesnt have good interaction with react-native-router-flux.
So for now.. the solution for Redux users is to go for the beta26 version, and for people that doesnt use redux probably beta27 and beta28 will be ok.
Here is the discussion: https://github.com/aksonov/react-native-router-flux/issues/2865
Here is another related issue: https://github.com/aksonov/react-native-router-flux/issues/2799
Building fails after adding navigation and a drawer to my components. using
import { Drawer, View} from 'native-base'
import { Navigator } from 'react-native'
Below are my dependencies.
"dependencies": {
"native-base": "2.1.5",
"react": "15.6.1",
"react-native": "0.46.1",
"react-navigation": "^1.0.0-beta.10"
}
I have tried all the steps suggested in response body[ Red Screen ] but no luck.
native-base#2.1.5 is not compatible with react-native#0.46, just upgrade to 2.2.1 can solve it.
See https://github.com/GeekyAnts/NativeBase/commit/3a4db18ee31c89c419b578dbad9ca306e9a56058, the commit log is not clear.