I am a newbie at react-native and I am facing some issues in the react-native app, after installing 'react-navigation', everything is mentioned in the images. Hope you can help me. Have a good day.
App.js file
MainActivity.java
Package.json
Terminal-issue
Node-cli
First: install #react-navigation/stack by
npm install #react-navigation/stack
using console(console must be opened in your project main directory).
Choose one:
If you are using bare React-Native project install react-gesture-handler using npm install react-native-gesture-handler.
If you are using expo managed project(e.g you created project using npx expo init) - use
npx expo install react-native-gesture-handler.
Docs: https://reactnavigation.org/docs/stack-navigator/
After successfull install please restart your metro/expo server.
Use createNativeStackNavigator from native-stack instead.
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
...
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
See Installing the native stack navigator library for details.
package.json:
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
MainNavigator:
import React from 'react';
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation/stack';
import HomeScreen from './Surveys'
const Stack = createStackNavigator(MyStack);
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
)
}
export default createAppContainer(Stack);
I have deleted node_modules, npm installed for Expo, installed specifically react-navigation/native, installed specifically react-navigation/stack.. I've gone in circles for an hour on this, nothing fixes it.
Try this:
$ yarn add react-navigation
$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
$ yarn add react-navigation-stack #react-native-community/masked-view
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
i was trying to re-use parts of an old project using old versions of these libraries/components. the solution was to build it from scratch with the current versions, which was very easy/fast. i wasted a few hours, which i guess isn't a total loss because will serve as a reminder that sometimes it is better to just start from scratch.
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