I have created a react native application and I use react-navigation to navigate between the different screens.
My code works and isn't giving me any errors on this issue, but VSCode is since last week. Every script where I use the createStackNativeNavigator from react-navigation, the component parameter is red underlined.
VSCode screenshot
This is part of my package.json with the relevant libraries.
"dependencies": {
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/native": "6.0.0",
"#react-navigation/native-stack": "6.0.0",
...
"react": "17.0.1",
"react-native": "^0.68.1"
}
This is how I defined the types.
import { NativeStackScreenProps } from '#react-navigation/native-stack';
import Destination from './Destination';
/**
* Any expected props for each screen
*/
export type NativeStackParams = {
[Destination.UserLanding]: undefined;
[Destination.UserDetails]: undefined;
[Destination.UserTasks]: undefined;
};
export type IBaseScreenProps<D extends keyof NativeStackParams> = NativeStackScreenProps<
NativeStackParams,
D
>;
I updated some packages, but restored the versions after this issue came. But eventually I don't think that the versions have anything to do with it, because it wasn't resolved when I restored them.
Related
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";
I tried to run react-navigation v4 on my project however it keeps crashing on launch
I reset cash a hundred times, check every versions are consistent with each others, and follow step-by-step the HelloWorld of react-navigation doc, nothing works even on a simplistic example :
import React from 'react';
import { Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('some-app-name', () => App);
export default createAppContainer(() => <Text>LOL</Text>);
Relevant package.json part :
{
....
"react-native": "0.59.10",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-navigation": "^4", // resolving to react-navigation#4.0.10
....
}
The error is coming from Component.router which is null in the createAppContainer HOC constructor, specifically:
Error message is "TypeError: Cannot read property 'getStateForAction' of undefined
(from #react-navigation/src/native/src/createAppContainer.js line:131)
https://github.com/react-navigation/native/blob/master/src/createAppContainer.js
Ok I found it, the composed Component inside createAppContainer MUST be a navigator, or the Component.router (check the source code) property will not be here.
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.
Native. I am getting this issue:
D:\abc\node_modules\react-native\Libraries\Core\ExceptionsManage…:71 Warning: checkPropTypes has been moved to a separate package. Accessing React.checkPropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead.
Please help me to know this issue.
My app dependency is:
"dependencies": {
"react": "16.0.0-alpha.12",
}
as informative the error is react has moved the prop-types from react-core to another independent package , so in order to use you need to add that to your project.
add another dependency in package.json
"dependencies": {
"react": "16.0.0-alpha.12",
"prop-types": "15.5.8",
}
and wherever you used to import
import {PropTypes} from React or React.PropTypes
you need to import PropTypes from 'prop-types'