I just got to this code:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
headerMode="none"
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, }}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
And reports an error in "headerMode = "none", i already made some searchs but i couldnt find what exactly is wrong.
Should it be defined in some other way? Or is there something i should have installed
What i already have installed :
yarn add #react-navigation/native,
npx expo install react-native-screens react-native-safe-area-context,
yarn add #react-navigation/native-stack,
yarn add #react-navigation/stack and
npx expo install react-native-gesture-handler
I just made some changes and its working fine now, instead of using headerMode I'm using headerShown in the screenOptions, so the code will look like this:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
/*headerMode="none"*/
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
I don't know what was wrong, maybe with the new versions it changed, but it worked now.
Related
I am integrating tailwindcss in react native project using expo but the older version of tailwindcss (https://tailwindcss-react-native.vercel.app) is now deprecated and it is now nativewind (https://www.nativewind.dev/)
I am following now nativewind(https://www.nativewind.dev/)
I have added the dependencies for tailwind
yarn add nativewind
yarn add --dev tailwindcss
Then added tailwind.config.ts
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./screens/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
then updated babel.config.js as
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ["nativewind/babel"],
};
};
Now I am trying to add the TailwindProvider in App.js file but getting the error
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import { TailwindProvider } from 'nativewind';
//import { TailwindProvider } from 'tailwindcss-react-native';
export default function App() {
const Stack = createNativeStackNavigator()
return (
<NavigationContainer>
<TailwindProvider>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
</Stack.Navigator>
</TailwindProvider>
</NavigationContainer>
);
}
HomeScreen.js
import { View, Text } from 'react-native'
import React from 'react'
export default function HomeScreen() {
return (
<View>
<Text>HomeScreen</Text>
</View>
)
}
Error is :
I am stuck here how to use TailwindProvider with new API (https://www.nativewind.dev/quick-starts/expo)
I've been using tailwind-react-native-classnames without issues.
I was facing the same problem about 30 minutes ago and this is what i did. I stopped the app deleted the component and recreated the component again and i don't know why but for some reason it started working... and i don't think you need "tailwindprovider" when using nativewind ... using mine without it and works just fine
my App.js
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Home from './screens/Home';
export default function App() {
const Stack=createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={Home}/>
</Stack.Navigator>
</NavigationContainer>
);
}
my Home.js component
import { View, Text } from 'react-native'
import React from 'react'
const Home = () => {
return (
<View >
<Text className="text-red-600">Home screen style test</Text>
</View>
)
}
export default Home
Im getting this error
BUNDLE ./index.js
error: node_modules\react-native-reanimated\src\index.ts: C:\Work\WordHunt\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `#babel/plugin-proposal-export-namespace-from`.
5 | export * from './reanimated1';
6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
| ^^^^^^^^^^^^
8 |
What Im getting on the phone:
[1]: https://i.stack.imgur.com/suoug.jpg
when I try to use createDrawerNavigator:
import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
);
}
This is my App.js file:
import React from 'react';
import Main from './src/Components/Screens/Main';
import MyDrawer from './src/Components/SideMenu';
function App() {
return (
<MyDrawer />
)
}
export default App;
IM using react native cli, not expo
//firstly you need to configure your babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
//add this plugins
plugins: ['react-native-reanimated/plugin'],
};
};
First run this to make sure everything compatible:
expo update
npm install react-native-screens react-native-safe-area-context
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
npx pod-install ios
I found the answer. This helps me: https://github.com/software-mansion/react-native-reanimated/issues/846#issuecomment-944115333
import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from "#react-navigation/native";
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation={true} initialRouteName="Main">
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I can't seem to figure out what seems to be the issue. I am getting a render error, "Could'nt find a 'component'; get component or children prop for the screen dashboard. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined.
My code in App.js is as follows:
```
import React from "react";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import {
MainLayout
} from "./screens";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={'Dashboard'}
>
<Stack.Screen
name="Dashboard"
component={MainLayout}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App
```
My code in /screens/Dashboard/MainLayout is as follows:
```
import React from 'react';
import {
View,
Text
} from 'react-native';
const MainLayout = () => {
return (
<View>
<Text>MainLayout</Text>
</View>
)
}
export default MainLayout;
```
You are exporting MainLayout as default so import it without { }. You can import default component with any name but non default components with exact name inside { }.
Change your import in App.js like below ( It seems that you also not given full path)
... // rest of imports
import MainLayout from "./screens/Dashboard/MainLayout";
... // rest of codes
Click here to know more about Importing and Exporting
I am new to coding and react native. I have been trying to set up an app with just some basic pages to practice with react navigation but keep getting thrown an error.
Failed building JavaScript bundle.
Unable to resolve "./src/navigation/MainTabs" from "src/navigation/AppNavigator.js"
I am using expo and have installed these npm:
npm install #react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
npm install #react-navigation/stack
Here is my code so far:
App.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator.js';
const App = () => {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}
export default App;
AppNavigator.js
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import MainTabs from './src/navigation/MainTabs';
const Stack = createStackNavigator();
const AppNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name='MainTabs' component={MainTabs} />
</Stack.Navigator>
);
}
export default AppNavigator;
MainTabs.js
import * as React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import PartyMenuScreen from './src/screens/PartyMenuScreen';
import TableMenuScreen from './src/screens/TableMenuScreen';
import VacationMenuScreen from './src/screens/VacationMenuScreen';
const Tabs = createBottomTabNavigator();
const MainTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Party Games' component={PartyMenuScreen} />
<Tab.Screen name='Table Games' component={TableMenuScreen} />
<Tab.Screen name='Vacation Games' component={VacationMenuScreen} />
</Tab.Navigator>
);
}
export default MainTabs;
I have tried reinstalling the npm modules and renaming file paths. Beyond that I am not sure what to do. I believe it may have something to do with my dependencies but I am not sure how to troubleshoot them.
You have error in AppNavigator.js import path for
import MainTabs from './src/navigation/MainTabs';
From the error message, I am assuming you have AppNavigator.js and MainTabs.js at the same level in folder hierarchy.
Replace above import with below:
import MainTabs from './MainTabs';
Resolved the issue. Used ../ for the imports because of the folder they were located in and changed the Tabs to Tab.
I have the following code in App.js file:-
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer} from "react-navigation";
const Home = ({ navigation }) => {
return (
<View>
<Text>This is Home page!</Text>
</View>
)
}
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
I followed the same instruction on this page:- https://reactnavigation.org/docs/stack-navigator/
But it gave an error
I fixed the issue by following the version 4 documentation
The problem is that when i installed the react-navigation package by following these commands:-
yarn add #react-navigation/native
I assumed by default if i install any package without defining a specific version, it suppose to install the latest current version of that package which is (v5) any by default i followed the package documentation for the version 5 . and when i checked the installed package version i noticed that the version 4 is installed no 5 .
Now i used the version 4 stack creating syntax :-
const navigator = createStackNavigator({
Home:Home,
},
{
initialRouteName: 'Home'
});
export default createAppContainer(navigator);
Every thing work fine now
Here is the URL for the
V5 https://reactnavigation.org/docs/hello-react-navigation
V4 https://reactnavigation.org/docs/4.x/getting-started
Try to import createStacknavigator as below:
import {createStacknavigator} from '#react-navigation/stack';
This worked for me in no time.
Import your navigator files from;
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';