I'm facing the problem as "react-navigation is not exist in the haste module map" eventhough I've installed "react-navigation" and "react-native-gesture-handler"
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation'
const RootStack = createStackNavigator({
SplashScreen: { screen: SplashScreen },
MainScreen: { screen: MainScreen },
AddExpenseScreen: { screen: AddExpenseScreen },
}, {
initialRouteName: 'SplashScreen',
headerMode: 'none'
})
const App = createAppContainer(RootStack)
Package.json
------------
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-gesture-handler": "^1.5.0",
"react-native-navigation": "^3.3.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6"
},
In your package.json, it says "react-native-navigation", but you're importing from "react-navigation".
Make sure to follow the instructions properly https://reactnavigation.org/docs/en/getting-started.html
Instead of :
const App = createAppContainer(RootStack)
Try :
export default createAppContainer(RootStack);
Check this for details.
Related
I have started learning react-native and I'm experiencing some issues. I don't seem to be able to use both components (createBottomTabNavigator and createStackNavigator). Export default can only be used once and I would like to render both components(at the moment only one or the other is rendering).
It would be great to get some help. thanks
Navigation.js
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import Search from '../Components/Search'
import Favourites from '../Components/Favourites'
import FilmDetail from '../Components/FilmDetail'
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Search Film'
}
},
FilmDetail: {
screen: FilmDetail,
navigationOptions: {
title: 'Film Details'
}
}
})
const MoviesTabNavigator = createBottomTabNavigator({
Search: {
screen: Search
},
Favourites: {
screen: Favourites
}
})
export default createAppContainer(MoviesTabNavigator)
I'm aware that I'm not using the latest version of React-Native
Package.json
{
"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"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"expo": "~39.0.2",
"expo-cli": "^3.28.5",
"expo-status-bar": "~1.0.2",
"moment": "^2.29.1",
"numeral": "^2.0.6",
"react": "16.13.1",
"react-dom": "^16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.5.0",
"react-navigation-tabs": "^2.8.13",
"react-redux": "^7.2.2",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
here is my App.js
import React from 'react'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
export default class App extends React.Component {
render() {
return (
<Provider store={Store}>
<Navigation/>
</Provider>
);
}
}
Nesting your screen will solve your problem. I assume you want SearchStackNavigator within MoviesTabNavigator. Do something like below
const MoviesTabNavigator = createBottomTabNavigator({
Search: {
screen: SearchStackNavigator
},
Favourites: {
screen: Favourites
}
})
export default createAppContainer(MoviesTabNavigator)
To navigate between stacks and land in a specific screen use:
navigation.navigate('Stack', {screen: 'screenName')
Error seems to be that Search is not referring to your SearchStackNavigator but your "Search" component you import at the top.
Nested Stacks are possible. I'd recommend taking a look here: Master React Navigation 5
I recommend you to use react-navigation 5.x and follow this example:
SearchStackNavigator:
import {createStackNavigator} from '#react-navigation/stack';
const Stack = createStackNavigator();
const SearchStackNavigator = () =>
<Stack.Navigator>
<Stack.Screen
name="Search"
component={Search}
/>
<Stack.Screen
name="FilmDetail"
component={FilmDetail}
/>
</Stack.Navigator>
MoviesTabNavigator:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import SearchStackNavigator from "./SearchStackNavigator";
const Tab = createBottomTabNavigator();
const MoviesTabNavigator = () =>
<Tab.Navigator>
<Tab.Screen
name="Search"
component={SearchStackNavigator} />
<Tab.Screen
name="Other tab"
component={OTHER STACK OR SCREEN HERE} />
</Tab.Navigator>
react-navigation docs:
bottom-tab docs
stack-navigation docs
I am trying to build a navigation where I have a problem when I add
{
initialRouteName: 'Loading',
}
When I use the stacknavigator without initialRouteName everything works fine. I am working on ios simulation (react-native run-ios) and I tried pod install already a few times.
This is app.js
import React from 'react';
import Loading from './Loading';
import SignUp from './SignUp';
import Login from './Login';
import Main from './Main';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator(
{
Home: Loading,
Home: SignUp,
Home: Login,
Home: Main,
},
{
initialRouteName: 'Loading',
}
);
export default createAppContainer(AppNavigator);
This is the error:
TypeError: undefined is not an object (evaluating 'routeConfigs[initialRouteName].params')
This error is located at:
in NavigationContainer (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
getInitialState
StackRouter.js:1:2241
getStateForAction
StackRouter.js:1:4880
NavigationContainer
index.bundle?platform=ios&dev=true&minify=false:99867:102
renderRoot
[native code]:0
runRootCallback
[native code]:0
unstable_runWithPriority
scheduler.development.js:643:23
failedRoots.forEach$argument_0
react-refresh-runtime.development.js:201:29
forEach
[native code]:0
failedRoots.forEach$argument_0
react-refresh-runtime.development.js:193:24
Refresh.performReactRefresh
setUpReactRefresh.js:43:6
setTimeout$argument_0
require.js:609:10
_callTimer
JSTimers.js:146:14
callTimers
JSTimers.js:399:17
callFunctionReturnFlushedQueue
[native code]:0
Here is my package.json
{
"name": "kowop",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.0.0-alpha.32",
"react-navigation": "^4.1.0",
"react-navigation-stack": "^2.0.16"
},
"devDependencies": {
"#babel/core": "7.8.3",
"#babel/runtime": "7.8.3",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Does anyone have an idea what the problem may be?
Thanks a lot!
Tim
As I know, initialroutename is using by indexed name, not screen name. In your project, you have to use 'Home'.
So you have to use different name between screens. like,
const AppNavigator = createStackNavigator(
{
loading: Loading,
signUp: SignUp,
login: Login,
main: Main,
},
{
initialRouteName: 'loading',
}
);
Aside, I think use name 'Home' for four screen is very bad idea. You have to try use different name between screens.
Change this :
{
initialRouteName: 'Loading',
}
To :
{
initialRouteName: 'Home',
}
Screen key should be passed to initialRouteName as param
Thanks, I was indeed not referring to the screen.
I am facing some issue to upgrade all libraries of React Native from old to latest.
Please help me with the error if you can understand and can suggest me possible solution.
Thank You.
react-navigation, redux, redux-saga
Package.json
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
"android-release-build": "npm run android-bundle && cd android && ./gradlew assembleRelease && cd ..",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/MyApp/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"2": "^2.0.0",
"lodash.debounce": "^4.0.8",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-native": "0.59.9",
"react-native-af-video-player": "^0.2.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-htmlview": "^0.14.0",
"react-native-image-progress": "^1.1.1",
"react-native-keyboard-manager": "^4.0.13-12",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-modal": "^11.0.1",
"react-native-pdf": "^5.1.0",
"react-native-permissions": "^1.1.1",
"react-native-progress": "^3.6.0",
"react-native-splash-screen": "^3.2.0",
"react-native-storage": "^1.0.1",
"react-native-tab-view": "^2.5.0",
"react-native-version-number": "^0.3.6",
"react-native-webview": "^5.11.0",
"react-navigation": "^3.11.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",
"rn-fetch-blob": "^0.10.15"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./app/assets/fonts/"
]
}
}
Index.js
import { AppRegistry, SafeAreaView,StyleSheet } from 'react-native';
import App from './app/App';
import React from 'react';
import { Provider } from 'react-redux'
import configureStore from './app/redux'
import {fetchCinemaList} from './app/redux/actions'
const store = configureStore()
store.dispatch(fetchCinemaList());
const DemoApp = () => (
<Provider store={store}>
<App/>
</Provider>
)
const styles = StyleSheet.create({
safeArea: {
flex: 1,
flexGrow: 1,
backgroundColor: 'white',
shadowColor: 'transparent',
},
});
export default store
AppRegistry.registerComponent('MyApp', () => DemoApp);
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import {DeviceEventEmitter, Platform, AppState, } from 'react-native';
import React, {Component,} from 'react';
import {connect} from 'react-redux'
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer
} from 'react-navigation';
import SplashScreen from 'react-native-splash-screen';
import {Tabs} from './config/tabBarConfig'
import {SideMenu} from './components'
import { fetchCards, fetchReservations, navigationChanged } from './redux/actions';
import store from '../index'
import {PromoSplash} from './screens/splash'
import {testUser} from './assets'
import KeyboardManager from 'react-native-keyboard-manager'
import { load,} from './services/utils';
if (Platform.OS == 'ios') KeyboardManager.setEnable(true);
function getCurrentRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
if (route.routes) {
return getCurrentRouteName(route);
}
return route.routeName;
}
const Nav = createDrawerNavigator({
Tabs
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
contentComponent: props => <SideMenu {...props}/>
});
export const MainNav = createStackNavigator({
Splash: {
name: "PromoSplash",
screen: PromoSplash
},
MainNavigator: {
name: "Nav",
screen: Nav
}
}, {
headerMode: 'none',
initialRouteName: "Splash",
})
class App extends Component {
constructor (props) {
super(props)
this.state = {
cineId: '',
appState: AppState.currentState,
}
}
async retrouveInfoCine() {
const infoCine = await load('selectedCinema', "");
this.setState({cineId: infoCine.id, });
}
componentWillMount() {
fetchReservations(testUser);
}
render() {
return (
<MainNav
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = getCurrentRouteName(currentState);
const prevScreen = getCurrentRouteName(prevState);
console.log("prevScreen, currentScreen", prevScreen, currentScreen)
store.dispatch(navigationChanged(prevScreen, currentScreen))
if (prevScreen !== currentScreen) {
if (currentScreen == "Mes Réservations" || currentScreen == "MyCard") {
let state = store.getState()
if (currentScreen == "Mes Réservations" ) { //&& !state.reservations.reservations_fetched) {
console.log("Mes Reservations")
store.dispatch(fetchReservations(state.userInfo.token))
} else {
store.dispatch(fetchCards(state.userInfo.token))
}
DeviceEventEmitter.emit('ModalVisible', { visible: true })
}
if (prevScreen == "Mes Réservations" || prevScreen == "MyCard") {
DeviceEventEmitter.emit('ModalVisible', { visible: false })
}
if (currentScreen == "Programme") {
SplashScreen.hide();
DeviceEventEmitter.emit('refreshData', {})
}
if (currentScreen == "Mon Cinéma") {
DeviceEventEmitter.emit('refreshDatesList', {})
}
}
}}
/>
)
}
}
const appFinal = createAppContainer(App);
export default connect()(appFinal)
I am getting TypeError: undefined is not an object (evaluating 'Component.router.getStateForAction') error though I have changed code as per latest navigation code requirement.
Old Versions:
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",
I'm trying to set up Enzyme testing for my React Native project. I've been getting various errors in various scenarios.
Scenario 1
When I try to set up a test for one of my components, I get this error:
/Users/TuzMacbookPro2017/Development/QMG-local/APPS/ELECTRO/node_modules/#expo/vector-icons/Zocial.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Zocial.json';
^^^^^^^^
SyntaxError: Unexpected identifier
Some relevant files
test file
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import LoginView from "../src/screens/LoginView";
describe("LoginView", () => {
const wrapper = mount(<LoginView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
jest.config.js
module.exports = {
setupFilesAfterEnv: ["<rootDir>setup-tests.js"],
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|#react-native-community|react-native-elements)"
],
preset: "react-native"
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"]
};
};
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll --bail",
"testff": "node ./node_modules/jest/bin/jest.js --watchAll --bail"
},
"jest": {
"preset": "jest-expo",
"testEnvironment": "node",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"#expo/samples": "2.1.1",
"#react-native-community/async-storage": "^1.3.4",
"axios": "^0.18.0",
"expo": "^32.0.0",
"flow-bin": "^0.98.1",
"native-base": "^2.12.1",
"pluralize": "^7.0.0",
"react": "16.5.0",
"react-dom": "^16.8.6",
"react-native": "0.57",
"react-native-elements": "^1.1.0",
"react-native-geocoding": "^0.3.0",
"react-native-global-font": "^1.0.2",
"react-native-indicators": "^0.13.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-render-html": "^4.1.2",
"react-native-uuid": "^1.4.9",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"redux-test-utils": "^0.3.0",
"redux-thunk": "^2.3.0",
"sugar": "^2.0.6"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"axios-mock-adapter": "^1.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "^4.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"fetch-mock": "^7.3.3",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.2",
"jest-expo": "^32.0.0",
"jsdom": "^14.1.0",
"mock-async-storage": "^2.1.0",
"prettier-eslint": "^8.8.2",
"react-test-renderer": "^16.8.6",
"redux-mock-store": "^1.5.3",
"redux-saga-tester": "^1.0.460"
},
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
setup.tests.js
import Adapter from "enzyme-adapter-react-16";
import { configure } from "enzyme";
import jsdom from "jsdom";
import "react-native";
import "jest-enzyme";
function setUpDomEnvironment() {
const { JSDOM } = jsdom;
const dom = new JSDOM("<!doctype html><html><body></body></html>", {
url: "http://localhost/"
});
const { window } = dom;
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
copyProps(window, global);
}
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === "undefined")
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
setUpDomEnvironment();
configure({ adapter: new Adapter() });
imports from the component under test
import React, { Component } from "react";
import {
Image,
Input,
Button,
ThemeProvider,
Overlay
} from "react-native-elements";
import { View, Text, Picker } from "react-native";
import { DotIndicator } from "react-native-indicators";
import { connect } from "react-redux";
import { login, assignUser } from "../redux/actions/authActions";
import F8StyleSheet from "../components/F8StyleSheet";
import { Dropdown } from "react-native-material-dropdown";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import User from "../models/User";
import uuid from "react-native-uuid";
Scenario 2
So that's a problem, but then something else interesting happens. When I swap out my LoginView for a super simple component, the test runs, but brings up some new errors that cast some suspicion on my rendering setup.
SimpleView.js
import React from "react";
import { Text, View } from "react-native";
export default (SimpleView = ({ params }) => (
<View>
<Text>SimpleView</Text>
</View>
));
test
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import SimpleView from "./__mocks__/SimpleView";
describe("LoginView", () => {
const wrapper = mount(<SimpleView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
errors
PASS tests/LoginView.test.js (6.058s)
LoginView
✓ can get through the damn test file (4ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <Text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
One reason for your issue could be the "preset": "react-native" line in your jest.config.js. Try changing it to "preset": "jest-expo". This is the way the expo documentation (https://docs.expo.io/versions/v35.0.0/guides/testing-with-jest/) explains how to setup jest with your project.
I encountered the same issue, and can't find a solution. So I had to mute error output:
jest --silent
ref: https://stackoverflow.com/a/49591765/4975761
I am new at react native and I am trying to create an iOS app. My splash screen works fine and loads the initial App.js screen when creating project fine. However, when I change the return to my own .js file, it fails to build and is stuck on splash screen. Please give me some tips, I followed many tutorials.
App.js
// App.js
import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import GetStarted from './authentication/GetStarted'
import { createStackNavigator, createAppContainer } from 'react-navigation'
const AuthNav = createAppContainer(
createStackNavigator({
GetStarted: { screen: GetStarted },
})
);
type Props = {};
export default class App extends Component<Props> {
componentDidMount() {
SplashScreen.hide()
}
render() {
return (
<AuthNav />
);
}
}
GetStarted.js
//GetStarted.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
export default class GetStarted extends Component {
render() {
return (
<View style={styles.container}>
<Text>Lets get started</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItem: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}
});
package.json
{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.3",
"react-native-firebase": "^5.2.2",
"react-native-navigation": "^2.12.0",
"react-native-splash-screen": "3.0.6",
"react-navigation": "^3.3.0"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
You are using "react-navigation": "^3.3.0" and trying to import StackNavigator. In v2+ they renamed StackNavigator to createStackNavigator. Looks like the tutorial you used is using v1. So, you can either change the version you are using to "react-navigation": "^1.5.2" or stay and use createStackNavigator. If you choose to stick with the version you are on (v2+), read another one of my responses to this same issue here; it will explain further.