in the link below have some screen shots of my code (same as the React Navigation official tutorial)
EMU-ERROR
CODE
My json file is:
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-gesture-handler": "^1.3.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^3.11.0",
"styled-components": "^4.3.2"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.1",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Any one know how to solve this problem ?
please use this code for navigation
import {
createStackNavigator,
createSwitchNavigator,
createAppContainer,
} from 'react-navigation';
// Auth screens
import Login from './Screen/Login'
import Signup from './Screen/Signup'
// Auth stacks
const AuthStackLogin = createStackNavigator({
Login,
Signup,
},{
headerMode: 'none'
}
);
export default createAppContainer(createSwitchNavigator(
{
AuthStackLogin: {
screen: AuthStackLogin
},
},
{
initialRouteName: 'AuthStackLogin'
}
));
Related
i followed a tutorial for adding web support using to a expo project **. using typescript, react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page after Web Bundling complete.
Started Metro Bundler
Web Bundling complete
even though it works just fine on the emulator. i get no error in the console.
package.json:
{
"name": "imibonano",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web",
"commit": "node scripts/github.js"
},
"dependencies": {
"#expo-google-fonts/poppins": "^0.2.2",
"#expo/webpack-config": "^0.16.24",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/slider": "4.2.1",
"#react-native-firebase/app": "^14.2.3",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-bottom-tabs": "^5.3.15",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"dotenv": "^14.2.0",
"expo": "~45.0.0",
"expo-app-loading": "^2.0.0",
"expo-cli": "^5.4.8",
"expo-font": "~10.1.0",
"expo-google-app-auth": "^8.1.7",
"expo-linear-gradient": "~11.3.0",
"expo-modules-core": "~0.9.2",
"expo-splash-screen": "^0.15.1",
"expo-status-bar": "~1.3.0",
"firebase": "^9.6.4",
"jest": "^28.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-custom-swiper": "^1.0.16",
"react-native-flipper": "^0.146.1",
"react-native-gesture-handler": " ~2.2.1",
"react-native-pager-view": "5.4.15",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "0.17.7",
"react-native-web-swiper": "^2.2.2",
"react-query": "^3.39.1",
"react-query-native-devtools": "^4.0.0",
"react-redux": "^8.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.66.13",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"private": true
}
app.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import NavigationStack from "./navigation/NavigationStack";
import Providers from "./navigation/index";
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import AppLoading from 'expo-app-loading';
import { AuthProvider } from "./navigation/AuthProvider";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import AppNavigation from './navigation';
import {
useFonts,
// Poppins_100Thin,
// Poppins_100Thin_Italic,
// Poppins_200ExtraLight,
// Poppins_200ExtraLight_Italic,
// Poppins_300Light,
// Poppins_300Light_Italic,
Poppins_400Regular,
// Poppins_400Regular_Italic,
Poppins_500Medium,
// Poppins_500Medium_Italic,
Poppins_600SemiBold,
// Poppins_600SemiBold_Italic,
// Poppins_700Bold,
// Poppins_700Bold_Italic,
// Poppins_800ExtraBold,
// Poppins_800ExtraBold_Italic,
// Poppins_900Black,
// Poppins_900Black_Italic
} from '#expo-google-fonts/poppins';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [loaded] = useFonts({
title: require('./assets/fonts/klarissa.regular.ttf'),
Poppins_400Regular,
Poppins_600SemiBold,
Poppins_500Medium
});
if (!isLoadingComplete || !loaded) {
return <AppLoading />;
} else {
return <Providers />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0a0a0a",
alignItems: "center",
justifyContent: "center",
}
})
index.js:
import React from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import { AuthProvider } from "./AuthProvider";
import NavigationStack from "./NavigationStack";
export default function Providers() {
return (
<AuthProvider>
<SafeAreaView style={styles.container}>
<NavigationStack />
</SafeAreaView>
</AuthProvider>
);
}
Greetings to everyone,
I started working on a React-Electron project and I am stuck on the following error for days,
Error
After I click the button, I want a log, "My custom Notification". Instead, it throws an error. How do I make this work? Maybe I am using it all in a wrong way?
Here is the code that generates that error,
Preload.js
const {ipcRenderer, contextBridge} = require('electron');
contextBridge.exposeInMainWorld('electron', {
notification: (message) => {
console.log(message);
ipcRenderer.send('notify', message);
}
})
main.js
const {BrowserWindow, app} = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
backgroundColor: 'white',
webPeferences: {
nodeIntegration: false,
worldSafeExecuteJavaScript: true,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
require('electron-reload')(__dirname, 'node_modules', '.bin', 'electron');
App.js
import React, {useEffect} from 'react';
import './app.css';
function App () {
return (
<div className='App'>
<h1>Hello React</h1>
<button onClick={() => {
window.electron.notification('My custom Notification');
}}>Click me</button>
</div>
)
}
export default App;
package.json
{
"name": "electron-react-ap",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"watch": "webpack --config webpack.common.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.5.1",
"electron": "^16.0.6",
"electron-reload": "^2.0.0-alpha.1",
"file-loader": "^6.2.0",
"fs": "0.0.1-security",
"nedb": "^1.8.0",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.47.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
}
}
Someone help this lost soul
The code was working fine in react-redux v5 but when I upgraded to v7 I obtained the following runtime error when navigating to the page with the CartContainer:
react-dom.development.js:11102 Uncaught Error: Could not find "store" in the context of
"Connect(CartContainer)". Either wrap the root component in a <Provider>, or pass a custom
React context provider to <Provider> and the corresponding React context consumer
to Connect(CartContainer) in connect options.
Now I do wrap the root-level component in a Provider, in the typical gatsby way,
Here is the ReduxWrapper.js file:
import React from 'react';
import { Provider } from 'react-redux';
import { getAllProducts } from './src/actions'
import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import rootReducer from './src/reducers';
const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger());
}
const store = createStore(rootReducer,applyMiddleware(...middleware))
store.dispatch(getAllProducts())
export default ({ element }) => (
<Provider store={store}>{element}</Provider>
);
The store instance should run downstream into any container that has connect() called on it.
additionally both gatsby-Browser.js and gatsby-ssr.js have the following:
export { default as wrapRootElement } from './ReduxWrapper';
the connected component in question, CartContainer.js is given below:
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { checkout } from '../actions'
import { getTotal, getCartProducts } from '../reducers'
import Cart from '../components/checkout/Cart'
const CartContainer = ({ products, total, checkout }) => (
<Cart
products={products}
total={total}
onCheckoutClicked={() => checkout(products)} />
)
CartContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
quantity: PropTypes.number.isRequired
})).isRequired,
total: PropTypes.string,
checkout: PropTypes.func.isRequired
}
const mapStateToProps = (state) => ({
products: getCartProducts(state),
total: getTotal(state)
})
export default connect(
mapStateToProps,
{ checkout }
)(CartContainer)
I am expecting CartContainer to have access to the store, and I suspect the problem lies with the fact I upgraded react-redux from v5 to v7, Since everything was working fine until that moment.
My dependencies:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "1.0.0",
"author": "David W",
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free": "^5.12.1",
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/free-brands-svg-icons": "^5.12.1",
"#fortawesome/free-solid-svg-icons": "^5.12.1",
"#fortawesome/react-fontawesome": "^0.1.9",
"#reach/router": "^1.3.3",
"bootstrap": "^4.4.1",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"gatsby": "^2.19.45",
"gatsby-background-image": "^0.10.2",
"gatsby-image": "^2.2.43",
"gatsby-plugin-env-variables": "^1.0.1",
"gatsby-plugin-manifest": "^2.2.39",
"gatsby-plugin-offline": "^3.0.32",
"gatsby-plugin-react-helmet": "^3.1.23",
"gatsby-plugin-sass": "^2.1.29",
"gatsby-plugin-sharp": "^2.4.3",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-sharp": "^2.3.13",
"google-map-react": "^1.1.6",
"jquery": "^3.4.1",
"node-sass": "^4.13.1",
"nodemailer": "^6.4.3",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-dom": "^16.13.1",
"react-fontawesome": "^1.7.1",
"react-helmet": "^5.2.1",
"react-map-gl": "^5.2.3",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"typescript": "^3.8.3"
},
"devDependencies": {
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"heroku-postbuild": "gatsby build",
"start": "gatsby serve",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-default.git"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-default#readme",
"main": "gatsby-browser.js"
}
I am trying to use react-redux hooks, however I get the error:
TypeError: (0 , _reactRedux.useDispatch) is not a function
Any ideas?
...
import { useDispatch, useSelector } from "react-redux";
import { StackActions, NavigationActions } from "react-navigation";
import CustomImage from "./CustomImage";
const VideoEpisode = props => {
const { id, title, description, video, preview, push, testLink } = props;
const dispatch = useDispatch();
return (
<TouchableHighlight
....
onPress={() => {
const resetAction = StackActions.reset({
...
});
dispatch(resetAction);
}}
>
...
</TouchableHighlight>
);
};
export default VideoEpisode;
package.json
{
"name": "iaapp",
"version": "0.0.1",
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"name": "Innovative Anatomy",
"flow": "flow",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "^7.0.0",
"#react-native-community/async-storage": "^1.6.1",
"react": "16.8.5",
"react-dom": "^16.8.6",
"react-native": "0.59.10",
"react-native-circular-progress": "^1.1.0",
"react-native-component-fade": "^1.0.2",
"react-native-elements": "^1.1.0",
"react-native-fade": "^1.0.3",
"react-native-fade-in-view": "^1.0.5",
"react-native-gesture-handler": "^1.1.0",
"react-native-responsive-image": "^2.3.1",
"react-native-share": "^1.2.1",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^9.5.1",
"react-native-vector-icons": "^6.6.0",
"react-native-view-shot": "^2.6.0",
"react-native-webview": "^5.12.1",
"react-native-webview-bridge": "^0.40.1",
"react-navigation": "^3.0.9",
"react-navigation-backhandler": "^1.3.2",
"react-navigation-transitions": "^1.0.11",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/preset-flow": "^7.0.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"prettier": "^1.18.2",
"react-native-dotenv": "^0.2.0",
"redux-logger": "^3.0.6"
},
"rnpm": {
"assets": [
"./assets/fonts"
]
},
"private": true
}
I had a similar problem with react.createcontext, and the only thing that seemed to work was to delete the node_modules folder and reinstall them (npm install).
Just make sure your package.json is configured correctly
Try upgrading your redux version { useDispatch } don't work on older ones
I also came around the same problem, tried everything deleting the node modules, clearing cache installing appropriate react-redux version but nothing worked. Later I found that the action which I was passing was not in proper format. Recheck the action action passed to dispatch function.
My app uses CRNA and Expo, and my issue is that the Font.loadAsync() asynchronous function can't locate a .otf font file in the assets/fonts/ folder in my project directory. I am absolutely sure that the directory and file names are correct. I receive this error.
link to image of my error screen
Here is my code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo'
import Root from './js/Root';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
fontLoaded: false
}
}
async componentDidMount() {
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
this.setState({ fontLoaded: true })
}
render() {
if (!this.state.fontLoaded) {
return <AppLoading />
}
return <Root />;
}
}
Here is my package.json:
{
"name": "Zumer",
"version": "0.1.0",
"private": true,
"devDependencies": {
"flow-bin": "^0.40.0",
"jest-expo": "^0.4.0",
"react-native-scripts": "0.0.28",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"flow": "flow"
},
"packagerOpts": {
"assetExts": ["ttf", "otf"]
},
"jest": {
"preset": "jest-expo",
"tranformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
},
"dependencies": {
"#expo/vector-icons": "^4.0.0",
"expo": "^16.0.0",
"native-base": "^2.1.2",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"react-native-elements": "^0.11.1",
"react-navigation": "^1.0.0-beta.8",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-observable": "^0.14.1",
"redux-persist": "^4.6.0",
"rxjs": "^5.3.0"
}
}
Could it be that the .otf file format isn't supported by Expo?
I fixed this issue by converting the otf files to ttf
I had a similar issue and I was able to resolve it by removing the quotes around the key that requires the font source.
Before:
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
After
await Font.loadAsync({
Light: require('./assets/fonts/SemplicitaPro-Light.otf')
})
And using it in the stylesheet like so
const styles = StyleSheet.create({
text: {
fontFamily: 'Light'
}
});
Everything worked fine after that.