I created a nested navigation in my app. There is a TabNavigator as default in NavigationContainer and it contains screens and HomeFeed Stack Navigator which is like this;
BottomTabBar
HomeStackNavigator (HomeFeed)
Detail Screen
Settings Screen
Content Screen
When ever I go to Detail screen from Content screen I cannot come back to Content screen from Detail. It appears an error The action 'GO_BACK' was not handled by any navigator.
Can someone help me please?
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "^2.4.2",
Related
I am using the Expo Managed React Native.
I am trying to use a drawer navigation and have followed the the React Navigation documentation here.
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import HomeScreen from './src/screens/HomeScreen'
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I run the expo start command and scan the QR code with my mobile phone.
When running, it throws this error and doesn't run at all. I have tried using a stack navigator and it works fine. Only when using the drawer navigator, the error shows up.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `DrawerNavigator`.
My dependencies are as follows
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/drawer": "^6.0.0-next.21",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"expo": "~42.0.1",
"expo-linear-gradient": "~9.2.0",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12",
"react-native-webview": "11.6.2",
"react-native-youtube-iframe": "^2.1.0"
},
i had the same problem, i changed the version > 6... with :
1 (uninstall)-> npm uninstall #react-navigation/drawer
2 -> npm install #react-navigation/drawer#^5.x
that is it!
check your #react-navigation/drawer with #react-navigation/native
When keyboard is appear, navigation back using gesture not work in react navigation with CardStyleInterpolators.forModalPresentationIOS.
When I hide keyboard it works.
This happening in android and I can not confirm it for iOS.
Here is what's happening:
"#react-navigation/native": "^5.7.0",
"#react-navigation/stack": "^5.7.0",
I have bottomTabNavigator in my tab and inside each tab I have stacks. I want to reset the stack whenever I click on another tab.
Tab Navigator-
Tab 1 -
|_Stack Navigator
- Screen 1
- Screen 2
Tab 2 -
|_Stack Navigator
- Screen 3
- Screen 4
Tab 3 -
|_Stack Navigator
- Screen 5
- Screen 6
The present scenario is,
. Suppose I am on tab 1 - I navigate to Screen 2 from screen 1
. Then I click to Tab 2
. Now if I again click on Tab 1, Screen 2 is showing instead of Screen 1.
Similar thing is happening on each tab.
I want to reset the tab on each tab click.
Please help.
I am using -
"dependencies": {
"#react-native-community/cli": "^4.1.0",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.0.5",
"#react-navigation/native": "^5.0.5",
"#react-navigation/stack": "^5.0.5",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-gifted-chat": "^0.13.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.0.0-beta.7",
},
You can add a listener on your tab screen and do your custom navigation inside
<AppTabs.Screen
name="TabScreen1"
listeners={({ navigation }) => ({
tabPress: () => {
navigation.navigate('Main1', { screen: 'Main2' });
},
})}
/>
There is a dispatch method provided by navigation. You can dispatch a StackActions.reset() action on your current navigation object with an index of 0, which should hard reset the stack.
I have strange problem with webview in react native.
Some pages, which are made in reactjs are not visible in webview
For example this code
<WebView
source={{uri: 'https://cassetterocks.github.io/react-infinite-scroller/demo/'}}
style={{marginTop: 20}}
/>
is working without problems and the page appears in webview and is visible in app.
But when i change it to this
<WebView
source={{uri: 'http://projects.wojtekmaj.pl/react-calendar/'}}
style={{marginTop: 20}}
/>
nothing is displayed, only white screen.
Has webview some special limitations or does somebody know reason for this behavior?
Thank you
EDIT:
After lot of attemps a realized that problem is not in react native but in react js. I found few pages in react-js based on this configuration
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2"
}
and they working without problem in webviews
but pages based on this configuration
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
are problematic.
But i don't known if the problem is in react version or webpack version :-(
FINAL EDIT:
Problem is in probably in react version, with 15.3.2 is everything ok, with 16.2.0 webview display nothing
UIWebView has all sorts of limits that have plagued hybrid developers for a decade now. I'm not aware of a comprehensive list of all the hairs it will make you pull out. It's generally a whack-a-mole exercise I'm afraid. Here's an article which will point to some of the pitfalls... http://undefinedvalue.com/beware-lure-ios-uiwebview.html
As your googling you may see references to Apple fixing these problems in WKWebView but alas this has it's own problems discussed in this React Native github issue: https://github.com/facebook/react-native/issues/321
I don't use Navigator in my codes. But I am getting this error.
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-router-redux": "^0.2.2",
"react-redux": "^5.0.5",
"redux": "^3.7.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
}
Anyone can help me?
This happened to me when my IDE automatically added the following lines:
import * as AsyncStorage from "react-native";
which means: everything in that file, which won't work. Solved it by changing to this:
import AsyncStorage from "react-native";
Navigator is no longer supported in react native so this is no longer allowed:
import { Navigator } from 'react-native'
Remove the Navigator from 'react-native' imports and substitute it with this:
import { Navigator } from 'react-native-deprecated-custom-components';
Navigation experimental(Previously Navigator) has been removed from React Native and moved to a separate package react-native-deprecated-custom-components. It has been deprecated and not recommended. To fix your old code you can perform following steps
Install package react-native-deprecated-custom-components
npm install react-native-deprecated-custom-components --save
Import NavigationExperimental(Previously Navigator)
import NavigationExperimental from 'react-native-deprecated-custom-comreponents';
Replace Navigator with NavigationExperimental.Navigator