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.
Related
This is my second go around installing tailwind rn for a project and I simply can't get it to work.
I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file:
content: ["./App.js"],
The App.js file in the meantime looks like this:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View>
<Text style={tw('text-blue-600')}>Hello world</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.
I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.
This package gives the flexibility of mixing styles.
Install using yarn add twrnc or npm install twrnc.
Get more info from the GitHub page
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'm building a react native application with apollo client 3, and keep getting the following error when generating the javascript bundle.
Failed building JavaScript bundle.
Unable to resolve "./rules/FieldsOnCorrectType" from "node_modules/graphql/validation/index.js"
My code is pretty simple, this is App.tsx:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
import { ApolloClient, InMemoryCache, ApolloProvider } from '#apollo/client';
const client = new ApolloClient({
uri: 'localhost:4000/graphql',
cache: new InMemoryCache()
});
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
if (!isLoadingComplete) {
return null;
} else {
return (
<ApolloProvider client={client}>
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
</ApolloProvider>
);
}
}
I've tracked it down to the instantiation of the new ApolloClient object - commenting out those lines (and the provider) causes the error to disappear.
Renaming node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js to node_modules/graphql/validation/rules/FieldsOnCorrectType.js (dropping the Rule suffix of filename) fixes that specific error, but then errors on the next import in the validation/index.js file... I don't understand why.
I had the same problem with a react native app after upgrading to apollo client 3. For me it was a react native caching issue and the problem went away after following these instructions to clear the cache: How to clear react-native cache?.
I am using the react native cli and used these commands (I didn't check if all of them are actually necessary):
watchman watch-del-all
rm -rf /tmp/metro-cache
rm -rf node_modules
npm cache clean --force
npm install
npm start -- --reset-cache
If you are using the expo cli then apparently you can just do this:
expo start -c
I want to learn react native. I want to build a web app and an android app. I want to be to navigate between screens of my app. So I did this:
npx create-react-app my-app
cd my-app
npm install react-native-web
I then updated my index.js to look like this:
import React from 'react';
import App from './App';
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });
And I updated my App.js to look like this:
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({Home: {screen: function(props){return null}}});
const App = createAppContainer(MainNavigator);
export default App;
When I run the npm start command, I get the error
./node_modules/react-navigation-stack/lib/module/views/Header/Header.js
Attempted import error: 'MaskedViewIOS' is not exported from 'react-native'.
Does anyone know how to correct this problem?
Looks like this is an issue in react-navigation-stack v1 with the latest version of react-native-web but I don't think will be fixed.
The issue is MaskedViewIOS has been moved to react-native-community issue #132:
https://github.com/react-native-community/react-native-masked-view
Update to react-navigation-stack v2