I am new to react native. While implementing react-navigation, I am facing a strange problem. I am getting an error on iOS simulator "undefined is not an object (evaluating 'RNGestureHandlerModule.State'). Nowhere I am using gesture recognizer in the app.
export default class App extends Component {
render() {
return (
createStackNavigator({
Home: {screen: HomeScreen},
})
)
}
}
HomeScreen is a simple class:
export default class HomeScreen extends Component {
render() {
return(
<View>
<Text style={{marginTop: 80}}>Thi sis test</Text>
</View>
);
}
}
I am using react-native CLI. While installing react-navigation I am getting several warnings
ankur:MyGithub ankurprakash$ cd /Volumes/Glen/MyGithub/navigationSample
ankur:navigationSample ankurprakash$ npm install --save react-navigation#latest
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/sane as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/sane
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/uuid as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/uuid
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/json5 as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/json5
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/jsesc as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/jsesc
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/jest as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/jest-cli
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/esparse as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/esprima
npm WARN rm not removing /Volumes/Glen/MyGithub/navigationSample/node_modules/.bin/esvalidate as it wasn't installed by /Volumes/Glen/MyGithub/navigationSample/node_modules/esprima
Try this once:
remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
Related
error: Error: Unable to resolve module react-native-safe-area-context from C:\USER\App\NavigationApp\NavigationApp\node_modules\#react-navigation\stack\src\views\Stack\StackView.tsx: react-native-safe-area-context could not be found within the project.
I didn't wrote anything and just wanted to learn React Navigation. I installed #react-navigation/native and thought now I could start. But instead of JSX I get this error:
What to do?
My code:
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const App = () => {
return (
<View>
<Text>Hello</Text>
</View>
);
};
const styles = StyleSheet.create({
});
export default App;
react-navigation package needs couple of other packages to work and react-native-safe-area-context is part of them, you only need to install it
$ npm i --save react-native-safe-area-context
Read more here (https://reactnavigation.org/docs/getting-started/)
Happy coding
Did you installed dependencies of react navigation? react-native-safe-area-context is one of the dependency. There are other dependencies that you should install for things to start work. To do so run this command if you are using expo managed workflow.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
or if you are using bare work flow(react native CLI) run this
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
Also you should read the offical installation doc
I created new project in react-native but app doesnt open I dont know why ?
I installed these npms :
npm i react-navigation
npm i react-navigation-stack
npm i react-native-gesture-handler
npm i react-native-safe-area-context
npm install --save #react-native-community/masked-view
npm i react-native-screens
I didn't understand problem why app doesnt run
this is my package.json:
this is my app.js:
problem is with you createStackNavigator, i guess
also use "react-navigation": "^2.18.3"
import { createStackNavigator } from "react-navigation";
import Test from "./screens/test";
const navigate = createStackNavigator({
Test: { screen: Test },
});
export default navigate;
I am getting this error after running my App:
error: bundling failed: Error: Unable to resolve module react-native-safe-area-context from node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context could not be found within the project.
But the same thing I had done for my old demo. It worked perfectly fine.
I don't know what I am doing wrong here. Please check my code:
For installing:
React Native Navigation & Gesture Handler:
npm install --save react-navigation
npm install --save react-native-gesture-handler
React Native Stack:
npm install --save react-navigation-stack
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";
const MainNavigator = createStackNavigator(
{
FirstOptions: FirstOptionsPage
},
{
defaultNavigationOptions: {
headerStyle: {
// backgroundColor: '#28F1A6',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: "#ca375e",
headerTitleStyle: {
fontWeight: "bold",
color: "#161616"
}
}
}
);
const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;
And FirstOptionsPage.js:
import React from "react";
import {
SafeAreaView,
StyleSheet,
View,
Text,
ScrollView,
Switch
} from "react-native";
export default class FirstOptionsPage extends React.Component {
static navigationOptions = {
title: "Preferences"
};
constructor(props) {
super(props);
this.state = {
switch1Value: false
};
}
toggleSwitch1 = value => {
this.setState({ switch1Value: value });
console.log("Switch 1 is: " + value);
};
render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={styles.mainContainerStyle}>
<View style={styles.subContainerStyle}>
<Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
<View style={styles.switchStyle}>
<Switch
onValueChange={this.toggleSwitch1}
value={this.state.switch1Value}
thumbColor={MAGENTA_COLOR_CODE}
trackColor={{
false: GREY_COLOR_CODE,
true: DARK_GREY_COLOR_CODE
}}
/>
</View>
</View>
</SafeAreaView>
);
}
}
I am new to React-Native. How can I fix this?
I think the problem is in the SafeAreaView, for the new react-native version, it has migrated to react-native-community/react-native-safe-area-view. if you want to use SafeAreaView, you should install it first.
the new use is like this:
import SafeAreaView from 'react-native-safe-area-view';
export default function MyAwesomeApp() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Text>
Look, I'm safe! Not under a status bar or notch or home indicator or
anything! Very cool
</Text>
</View>
</SafeAreaView>
);
}
for installing it you can use the following commands:
yarn add react-native-safe-area-view react-native-safe-area-context.
if you do not use auto-link, you have to also link it. for details about it, see this link
It is a little funny, I wanted to add navigation so I added
npm install --save react-navigation
for this to work fine I had to add:
expo install react-native-gesture-handler react-native-reanimated
Then I got
Unable to resolve "react-native-safe-area-context"
So I added:
expo install react-navigation-stack
expo install react-native-safe-area-view react-native-safe-area-context
then I got
bundling failed: Error: Unable to resolve module #react-native-community/masked-view`
So I searched for the masked-view (which currently is not supported by the expo, according to its git document). Then I found out that I can use:
expo install #react-native-community/masked-view,
which could work or not :)
Therefore, from now on I use following commands at the start of all of my react-native projects, to be able to use navigation properly:
npm install --save react-navigation
expo install react-native-gesture-handler react-native-reanimated react-navigation-stack
expo install react-native-safe-area-view react-native-safe-area-context
expo install #react-native-community/masked-view.
After running these commands:
npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context
It prompted me an error about masked-view, so I also had to run npm i #react-native-community/masked-view and then my code can now be successfully run on Android physical device.
Thanks to Lenoarod and Gautam Shrivastav for pointing out the right direction.
installing following two,
npm install --save #react-native-community/masked-view
npm install react-native-safe-area-context
it is work for me
I think you miss link depency with your project so you can try as below:
With React Native 0.6 or higher:
On iOS, make sure you have Cocoapods installed and run:
cd ios
pod install
cd ..
With React native 0.59 and lower try:
react-native link react-native-safe-area-context
copy all and paste in terminal
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
work for me
Run the following:
expo install react-native-safe-area-context
expo will select the right version and then install it.
To use React Navigation you need to run the following command
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
or
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
i did this
yarn add #react-native-community/masked-view
yarn add react-native-safe-area-context
and it gave me another error on import type { ScreenProps } from 'react-native-screens'
then did
yarn add react-native-screens
all went well
use the commend npm i react-navigation-stack t solve this error
Starting the Metro Bundler directly from the project directory works for me.
# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
# Start Metro Bundler directly
react-native start
# Now run react-native run-android or react-native run-ios in another tab
If you are using #react-native/stack then before installing it use following command to install it's dependency
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
read the documentation at https://reactnavigation.org/docs/getting-started/
Me I think it is due to incompatible version pairs for expo and safe area context.
You should try run this:
npm uninstall react-native-safe-area-context
After, you run this :
expo install react-native-safe-area-context
error: bundling failed: Error: Unable to resolve module `#expo/vector-icons/Ionicons` from `E:\React Projects\Tourism\src\screens\TouristInformation\TouristInformation.js`: Module `#expo/vector-icons/Ionicons` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at ResolutionRequest.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
at DependencyGraph.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)
at Object.resolve (E:\React Projects\Tourism\node_modules\metro\src\lib\transformHelpers.js:141:30)
at dependencies.map.result (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
at Array.map (<anonymous>)
at resolveDependencies (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
at E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
at Generator.next (<anonymous>)
at step (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
BUNDLE [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓░░░░░░░░░ 48.8% (311/450), failed.
::ffff:127.0.0.1 - - [17/Jan/2019:21:01:47 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.11.0"
I ejected the project running 'expo eject'.
Then I added 'react-native-vector-icon' to use font icons provided by that package. But, whenever I import that library to any of my js file. Though I'm importing 'react-native-vector-icon',it shows the above error.
TouristInformation.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View,
} from 'react-native';
import residentBackgroundImage from '../../assets/residentBackground.jpg';
import Icon from 'react-native-vector-icons/Ionicons';
export default class TouristInformation extends Component {
render() {
return(
<View>
<Image
source = {residentBackgroundImage}
style = {styles.image} />
<Text> Yomuna </Text>
<Icon name="ios-person" size={30} color="#4F8EF7" />
</View>
);
}
}
const styles = StyleSheet.create({
image:{
},
});
Do you have #expo/vector-icons installed as a dependency? If so, it may be conflicting with react-native-vector-icons (react-native-vector-icons is already a dependency of #expo/vector-icons).Since you've already ejected from Expo I'm not sure you want that package installed.
react-native-vector-icons requires you to link native dependencies. The first thing to try is react native link from the terminal. It seems to work better with iOS than with Android. If that doesn't work there are other manual ways to do it.
From the RN docs
From the package docs (scroll down to the Android section)
The issue has to do with `babel-preset-expo'.
To resolve, do the following:
Run yarn remove babel-preset-expo
Runyarn add metro-react-native-babel-preset
In your babel.config.js, remove babel-preset-expo from presets, and instead add module:metro-react-native-babel-preset
Your babel.config.js should now look something like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ["module:metro-react-native-babel-preset"],
};
};
Run the below commands.
npm i react-native-vector-icons
npx react-native link react-native-vector-icons
Here is the error I get:
package.json
{
"name": "LoginApp2",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.48.3"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
index.js
import React, { Component } from 'react';
import { AppRegistry,View,Text,StyleSheet } from 'react-native';
import UsersManager from './pages/app';
AppRegistry.registerComponent('LoginApp2', () => UsersManager);
pages/app.js
import React, { Component } from 'react';
import { AppRegistry,View,Text,StyleSheet,ScrollView,TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './home';
import Login from './login';
import Register from './register';
import Profile from './profile';
const UsersManager = StackNavigator({
Home: { screen: HomeScreen },
Login: { screen: Login },
Register: {screen: Register},
Profile: {screen: Profile}
});
export default UsersManager;
Can someone please help me solve this issue?
This error means that either you haven't installed the react-navigation module or that you have installed the module but didn't re-built your project using react-native run-android or react-native run-ios.
Following these steps should solve your issue:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current packager and then
starting the packager again with react-native start.
We need to install the following dependencies:
npm i react-navigation #react-native-community/masked-view react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens
In code import the following:
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
Date : 25-June-2020 Working :
Follow this steps:
Install React Navigation
npm install react-navigation
Install Dependencies
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
Install React Navigation Stack
npm install react-navigation-stack #react-native-community/masked-view
Start the app and clear cache with
npm start -c
You have to just install the missing module ex.
npm install react-navigation
Then restart with
npm start
I just started to learn react. And got this problem, tried everything from the internet - nothing worked. Using Yarn instead of npm helped!
run "npm add #react-navigation/native" :that saved me hours
This error happened after updating to the new version, to fix it, just run the following command
npx react-native start --reset-cache
install has been replaced with add to add new dependencies. Run yarn add react-navigation instead.
You can use this way
npm install #react-navigation/native #react-navigation/native-stack
expo install react-native-screens react-native-safe-area-context // Expo
npm install react-native-screens react-native-safe-area-context // react native
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { NavigationContainer } from '#react-navigation/native';
const Stack = createNativeStackNavigator();
<NavigationContainer>
<Stack.Navigator initialRouteName={ routeName } screenOptions = {{ headerShown: false }}>
<Stack.Screen name="Home" component = { componentName } />
<Stack.Screen name="Onboarding" component = { componentName } />
</Stack.Navigator>
</NavigationContainer>
you can flow this document
I resolve this error reading the react navigation documentation, execute yarn add #react-navigation/native-stack. Then the react navigation will be work
Install React Navigation
npm install react-navigation --legacy-peer-deps
or
yarn add react-navigation
Install Dependencies
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
Install React Navigation Stack
npm install react-navigation-stack #react-native-community/masked-view --legacy-peer-deps
or
yarn add react-navigation-stack #react-native-community/masked-view
Start the app and clear cache with expo r -c
You need to install stack-navigator in your project.
npm install #react-navigation/stack
and
npm install react-native-gesture-handler
2nd is also required, as per reactnavigation.org
You can also follow this link for detailed steps:
https://reactnavigation.org/docs/stack-navigator/
Refer this image as well
If you're using Expo, run:
expo start -c
If you're not using Expo, run:
npx react-native start --reset-cache
If that doesn't work, you can also try the following:
rm -rf $TMPDIR/metro-bundler-cache-*
More information enter link description here
Stop the server and run:
npm start
This will resolve the issue.