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",
I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:
Component exception
In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.
This is my code:
HeaderButton.js
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "#expo/vector-icons";
const CustomHeaderButton = (props) => {
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color="black"
/>
);
};
export default CustomHeaderButton;
WelcomeScreen.js
import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
const WelcomeScreen = (props) => {
return (
<ImageBackground
source={require("../assets/images/tsl.jpg")}
style={styles.backgroundImage}
>
<Image
source={require("../assets/images/slogan.jpg")}
style={styles.logo}
/>
<View style={styles.buttonContainer}>
<MainButton
onPress={() => {
props.navigation.navigate({
routeName: "UserLogin",
});
}}
>
User Login
</MainButton>
<MainButton
onPress={() => {
props.navigation.navigate({ routeName: "DriverLogin" });
}}
>
Driver Login
</MainButton>
<View style={styles.newAccountContainer}>
<Text style={styles.newAccountText}>Don't have an account?</Text>
</View>
<View style={styles.registerContainer}>
<MainButton style={styles.registerButton}>Register now</MainButton>
</View>
</View>
</ImageBackground>
);
};
WelcomeScreen.navigationOptions = {
headerLeft: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item title="Menu" iconName="ios-menu" />
</HeaderButtons>
),
};
Thank you!
For everybody who will get error (on Max's course, vid 173 :) ):
TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)
Try to add npm i --save #react-navigation/native
If it doesn't help, delete node_modules & package-lock.json, check & update your package.json to correct versions. Here is my dependencies:
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/native": "^5.9.4",
"expo": "40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "^0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9"
After you'll done this, just run npm install.
I hope that it will helps somebody. Learn and enjoy!=)
I had the same issue and I did npm i --save #react-navigation/native since the error stated that useTheme was not found.
Hi I've been having this exact same issue. I'm working through a react-native course on Udemy.
Obviously this is specific to the course code etc. but I hope something here can fix your issue also.
I tried a few things so I'm not exactly sure what fixed the issue... here is what I did:
I changed the react-navigation and react-navigation-header-buttons vesrsions in package.json to those which are used in Max's code (3.11.1 & 3.0.1 respectively) and I think I ran npm install. (to update them?)
App didnt work, wouldnt launch error with react-navigation-header-buttons
ran expo update, to update packages and re-build node_modules and package-lock.json
was given a list of packages which didnt update: expo-app-loading, react-navigation, react-navigation-drawer, react-navigation-header-buttons, react-navigation-stack, react-navigation-tabs
ran expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs
noticed react-navigation warning that v3.13.0 wasnt supported upgrade to 4.x
ran npm install react-navigation#4 installed 4.4.4
react-navigation-header-buttons was still at an older version 3.0.5, so I ran npm install react-navigation-header-buttons#6 installed 6.3.1
npm start - Apps are working on emulator and physical device!
My working app now has the following dependencies (in package.json):
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"
I had the same, and resolved by:
expo install react-navigation-header-buttons#6
because npm install ... throw me an error
You need to go to your package.json file, and set the following version to the "react-navigation-header-buttons" package:
"react-navigation-header-buttons": "^6.3.1"
Then run npm install again and try to run your app.
Check dependency of react-navigation-header-buttons in package.json. It may not of version 6. If it is the case, then delete that line from package.json and reinstall navigation-header-button of version 6 using npm install --save react-navigation-header-buttons#6
"md-cart" is no longer available in the ionicons list, replace the iconName with a valid name like
iconName = "cart-outline"
in my case and it will start working!
yarn add #react-navigation/native or npm i --save #react-navigation/native should solve the problem.
For everybody who will get error (on Max's course, vid 173:), run this command:
npm install react-navigation-header-buttons#6
And it will fix the issue.
I followed this step and the error disappeared:
first:
npm install --save #react-navigation/native
or
yarn add #react-navigation/native
next:
delete node_modules And I reinstalled the packages again
I createad reports with GoodData UI and works successful.
GoodData UI exists many requests. In desktop OK but In mobile will use many 4G to customer.
Do exist control to requests ?
image
Hi Ivan,
I used react link.
In image exists 856 request without to stop.
Code used:
<div style={{ height: 400, width: 600 }}>
<Visualization
identifier="abbAX8VdfTM8"
projectId="dkrwpz8ki4iplckqups7luwz8uiviacy"
/>
</div>
I updated the dependencies and worked successfully.
"dependencies": {
"#gooddata/react-components": "^6.1.1",
"node-sass": "^4.11.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.1.2" },
I've just tried to use the vue-katex module https://www.npmjs.com/package/vue-katex.
I set up a simple example using vue-cli
$ vue init webpack-simple my-project
And then I added the vue-katex package, added the few lines of code to put some KaTeX mathematical stuff on the page and started my dev server. However, the mathematical notation is not displaying properly, and I'm getting a big black box displayed on my page.
Here's the relevant part of my package.json:
"dependencies": {
"vue": "^2.5.11",
"vue-katex": "^0.1.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
Here's my app code (I've tried to take the code directly from the vue-katex npm page above):
<template>
<div id="app">
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>
<img src="./assets/logo.png">
...
</div>
</template>
<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';
Vue.use(VueKatex);
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
And a screenshot of the result:
You can see the math doesn't render and I get this weird big black box. I've included the dev tools inspection to try to make it easier to diagnose.
I've tried to keep everything as simple as possible - if anyone could tell me what I'm doing wrong, I'd really appreciate it!
Many thanks in advance,
One step is missing from the vue-katex docs. If you go to the parent project, https://github.com/Khan/KaTeX you'll find that in their walk through they include a link to an external css file. You'll need to include this too:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">
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