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
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
I am very new to programming with React-native, and I was wondering if anyone could explain how I should fix this error? I was following along with a tutorial and had an error come up due to this section of code, even though it matched the tutorial code.
Here is the section of code:
import React, { createContext, useContext } from "react";
import * as Google from "expo-google-app-auth";
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const signInWithGoogle = async() => {
await Google.logInAsync
}
return (
<AuthContext.Provider
value={{
user: null,
}}
>
{children}
</AuthContext.Provider>
);
};
export default function useAuth() {
return useContext(AuthContext);
}
These other two sections may be relevant as well:
Root of the App:
import React from 'react';
import { Text, View, SafeAreaView, Button, Alert } from 'react-native';
import AuthProvider from "./hooks/useAuth";
import StackNavigator from "./StackNavigator";
import { NavigationContainer} from "#react-navigation/native";
// Function for creating button
export default function App() {
return (
<NavigationContainer>
<AuthProvider>
<StackNavigator />
</AuthProvider>
</NavigationContainer>
);
}
This is my code for the Login Screen:
import React from 'react';
import { View, Text } from 'react-native';
import useAuth from '../hooks/useAuth';
const LoginScreen = () => {
const { user } = useAuth();
console.log(user);
return (
<View>
<Text>
Login to the app
</Text>
</View>
);
};
export default LoginScreen
This is the error that appears:
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
I suggest you auth with firebase. it makes easier this things.
I want to redirect my current app screen to login screen if the user is not authenticated. So I created a global component RedirectorToLogin and use this component in my App.js . But I'm getting this error Couldn't find a navigation object. Is your component inside a screen in a navigator ? because I'm using useNavigation inside RedirectorToLogin.
What is the reason for this error to be occured ?
My RedirectorToLogin.js
import React, { useContext, useEffect } from 'react'
import { useNavigation } from '#react-navigation/native'
import AuthGlobal from '../Context/store/AuthGlobal'
const RedirectorToLogin = (props) => {
const context = useContext(AuthGlobal)
const navigation = useNavigation()
useEffect(() => {
if (!context.stateUser.isAuthenticated) {
navigation.navigate('Login')
}
return () => {}
}, [context.stateUser.isAuthenticated])
return <></>
}
export default RedirectorToLogin
My App.js
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { LogBox } from 'react-native'
import { NavigationContainer } from '#react-navigation/native'
import Toast from 'react-native-toast-message'
import ErrorBoundary from 'react-native-error-boundary'
// Redux
import { Provider } from 'react-redux'
import store from './Redux/store'
// Context API
import Auth from './Context/store/Auth'
// Navigatiors
import Main from './Navigators/Main'
// Screens
import Header from './Shared/Header'
import MyAppState from './Global/MyAppState'
import Network from './Global/Network'
import RedirectorToLogin from './Global/RedirectorToLogin'
const errorHandler = (error, stackTrace) => {
/* Log the error to an error reporting service */
console.log('**** error log form error handler ****')
console.log(error)
console.log(stackTrace)
console.log('**** **** ****')
}
LogBox.ignoreAllLogs(true)
export default function App() {
return (
<ErrorBoundary onError={errorHandler}>
<Auth>
<Provider store={store}>
<NavigationContainer>
<Header />
<Main />
<MyAppState />
<Network />
<RedirectorToLogin />
<Toast ref={(ref) => Toast.setRef(ref)} />
</NavigationContainer>
</Provider>
</Auth>
</ErrorBoundary>
)
}
I referred to this article and updated my Main.js to show only login navigator when user is not authenticated. So I can get rid of having RedirectorToLogin
I'm new to react native and while running my app I'm getting the following error:
/node_modules/react-native-elements/src/card/Card.js
Attempted import error: '../helpers/normalizeText' does not contain a default export (imported as 'normalize')
As a result my app does not start on Expo Client.
I have four files:
I am not importing normalizeText.js directly,
Here are my main files that are being used in the project
App.js
import Main from './components/MainComponent';
export default function App() {
return (
<Main />
);
}
MenuComponent.js
import {View, FlatList} from 'react-native' ;
import {ListItem} from 'react-native-elements';
function Menu(props){
const renderMenuItem = ({item, index}) => {
return(
<ListItem
Key={index}
title={item.name}
subtitle={item.description}
hideChevron={true}
leftAvatar={{ source: require('./images/uthappizza.png') }}
/>
);
}
return (
<FlatList
data = {props.dishes}
renderItem={renderMenuItem}
KeyExtractor={item => item.id.toString()}
/>
);
}
export default Menu;
3) MainComponent.js
``` import React, {Component} from 'react';
import Menu from './MenuComponent';
import {DISHES} from '../shared/dishes';
class Main extends Component {
constructor(props){
super(props)
this.state = {
dishes : DISHES
}
}
render(){
<Menu dishes={this.state.dishes} />
}
}
export default Main; ```
4) Dishes.js
This file is has a json objects list which is has information to populate the
app.
Small Changes you need to add in the helpers ../helpers/normalizeText.
Go to this path
node_modules/react-native-elements/src/helpers/noramlizeText.js
Change this line module.exports = normalize; to export default normalize;
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';