Getting the following error:
The component for route 'Books' must be a React component. For example:
import MyScreen from './MyScreen';
But i'm not even using react-navigation in this screen.
https://snack.expo.io/#ganiyat1/colorful-thrills
import React, { useState } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';
const Book = () => {
const [selectedTab, setSelectedTab] = useState(0);
return (
<SafeAreaView style={styles.container}>
<MaterialTabs
items={['New Releases', 'All', 'BOM']}
selectedIndex={selectedTab}
onChange={setSelectedTab}
barColor="#1fbcd2"
indicatorColor="#ff914d"
activeTextColor="white"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
You are not exporting the Book component.
In the book component, either add export default Book to the bottom, or do export const Book.... You also need to change the import to for a default export
import Book from './components/Books';
or
import { Book } from './components/Books';
if you do a named export (export const Book).
Related
I'm taking a React Native tutorial and I'm getting the error:
Failed to compile
Syntax Error
None of these files exist:
*..\..\..\..\..\.src\screens\ListScreen(.native|ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|tsx|ios.js|native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|native.json|.json)
*..\..\..\..\..\.src\screens\ListScreen\index(.native|ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|tsx|ios.js|native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|native.json|.json)
There are only three files being imported into my App.js file and the error shows when I import ListScreen from ".src/screens/ListScreen". When I comment out that line the error goes away. I have no idea what's causing it.
Below is the code from the four JS files and the folder structure. It's a course on Udemy and no one else has encountered it so I'm not sure what I'm doing wrong since all the other files were authored by the instructor which I downloaded at the beginning of the course.
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import ComponentsScreen from "./src/screens/ComponentsScreen";
import ListScreen from ".src/screens/ListScreen";
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components: ComponentsScreen,
},
{
initialRouteName: "Components",
defaultNavigationOptions: {
title: "App",
}
}
);
export default createAppContainer(navigator);
HomeScreen.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const HomeScreen = () => {
return <Text style={styles.text}>ProjectWherewoof</Text>
};
const styles = StyleSheet.create({
text: {
fontSize: 30,
},
});
export default HomeScreen;
ComponentsScreen.js
import { Text, StyleSheet, View } from "react-native";
const ComponentsScreen = () => {
const greeting = <Text>Getting Started with React Native</Text>;
const myname = 'Arturo';
return (
<View>
<Text style={styles.greetingStyle}>{greeting}</Text>
<Text style={styles.nameStyle}>My name is {myname} !!!</Text>
</View>
);
};
const styles = StyleSheet.create({
greetingStyle: {
fontSize: 45,
},
nameStyle: {
fontSize: 20,
}
});
export default ComponentsScreen;
ListScreen.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const ListScreen = () => {
return <Text>List Screen</Text>;
};
const styles = StyleSheet.create({});
export default ListScreen;
Folder Structure:
Folder Structure snapshot
You're missing a slash in import ListScreen from ".src/screens/ListScreen";. .src is not a directory in your project.
It should be import ListScreen from "./src/screens/ListScreen"; (or just "src/screens/ListScreen";)
after upgrade from React-navigation 4 to React-navigation 6 the default imports cause undefined errors when used for assignments.
The Application uses expo, Expo SDK version is 44.
This error occurs when opening the application
Application error
RoutesNavigators.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import ConfigsLoading from './screens/commons/configs_loading';
const Stack = createNativeStackNavigator();
const RoutesNavigator = () => (
<NavigationContainer>
<Stack.Navigator initialRouteName="ConfigsLoading" screenOptions={{ headerShown: false }}>
<Stack.Screen name="ConfigsLoading" component={ConfigsLoading} />
</Stack.Navigator>
</NavigationContainer>
);
export default RoutesNavigator;
configs_loading / index.jsx
/* eslint-disable no-constant-condition */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, ActivityIndicator, Text } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import lojas from '../../features/lojas';
import { styles } from './styles';
import pushTokens from '../../../infra/push_tokens';
import usuarios from '../../features/usuario';
import campanhas from '../../features/campanhas';
class ConfigsLoading extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="#999999" />
<Text>{this.props.t('commons:carregando')}</Text>
</View>
);
}
}
ConfigsLoading.propTypes = {
navigation: PropTypes.object.isRequired,
credenciais: PropTypes.object.isRequired,
recuperarLojaFavorita: PropTypes.func.isRequired,
setarLojaCorrente: PropTypes.func.isRequired,
recuperarCredencial: PropTypes.func.isRequired,
aceitarTermosUso: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
criarTokenUsuario: PropTypes.func.isRequired,
pushToken: PropTypes.string,
recuperarCampanhaVigente: PropTypes.func.isRequired,
};
ConfigsLoading.defaultProps = {
pushToken: undefined,
};
const mapStateToProps = state => ({
salvandoLojaFavorita: lojas.selectors.obterSalvandoLojaFavorita(state),
pushToken: pushTokens.selectors.obterToken(state),
credenciais: usuarios.selectors.obterCredencial(state),
aceitandoTermosUso: usuarios.selectors.obterAceitandoTermosUso(state),
excluidoCredencialUsuario: usuarios.selectors.obterExcluindoCredencial(state),
});
const obj = translate(['common'], { wait: true })(ConfigsLoading);
export default connect(mapStateToProps, {
...lojas.actions, ...pushTokens.actions, ...usuarios.actions, ...campanhas.actions,
})(obj);
lojas / index.js
import Container from './components/Container';
import Lista from './components/Lista';
import * as constants from './constants';
import * as actions from './actions';
import * as selectors from './selectors';
import reducer from './reducer';
export default {
Container,
Lista,
reducer,
constants,
actions,
selectors,
};
pushTokens, campanhas and usuarios files has te same export as the lojas file
i have the following plugins in my babel.config.js
"babel-plugin-module-resolver",
"react-native-reanimated/plugin"
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'm using react-navigation and redux for navigation between screens I'm getting an error instead.
Invariant Violation: createReduxBoundAddListener is deprecated in
react-navigation-redux-helpers#2.0.0! Please use reduxifyNavigator
I don't know how to fix it please help me out.
App.js
import React from 'react';
import { Provider } from "react-redux";
import store from "./src/redux/store"
import { createReduxBoundAddListener } from "react- navigation-redux-helpers";
import AppWithNavigationState from "./src/navigators/AppNavigator";
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
//Here Im getting an error regarding creacteReduxBoundAddListener
<AppWithNavigationState listener{createReduxBoundAddListener("root")}/>
</Provider>
);
}
}
AppNavigator.js file
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {connect} from "react-redux";
import {PropTypes} from 'prop-types';
import {addNavigationHelpers,createStackNavigator } from "react-navigation";
import LoggedOut from "../screens/LoggedOut";
import LogIn from "../screens/Login";
import ForgotPassword from "../screens/ForgotPassword";
// created screens using createStackNavigator
export const AppNavigator = createStackNavigator({
LoggedOut:{screen:LoggedOut},
LogIn:{screen:LogIn},
ForgotPassword:{screen:ForgotPassword},
});
const AppWithNavigationState = ({ dispatch,nav,listener}) =>{
<AppNavigator navigation=
{addNavigationHelpers({dispatch,state:nav,addListener:listener})}/>
};
AppWithNavigationState.propTypes = {
dispatch:PropTypes.func.isRequired,
nav:PropTypes.object.isRequired
};
const mapStateToProps = state =>({
nav:state.nav,
});
export default connect(mapStateToProps)(AppWithNavigationState);
navigation.js
import {AppNavigator} from "../../navigators/AppNavigator";
const firstAction =
AppNavigator.router.getActionForPathAndParams("LoggedOut"); //decide which
//screen will
//load first
const initialNavState = AppNavigator.router.getStateForAction(firstAction);
export const nav = (state=initialNavState, action)=>{
let nextState = AppNavigator.router.getStateForAction(action,state);
return nextState || state;
}
You can check this repo https://github.com/JaiDeves/AirBnB-React, I've updated the code with the newer version of react-navigation.
So I have a rootstack navigation from react-navigation
I have a folder Markets with index.js like this:
import ExampleOne from './ExampleOne';
import ExampleTwo from './ExampleTwo';
import ExampleThree from './ExampleThree';
import ExampleFour from './ExampleFour';
import ExampleFive from './ExampleFive';
export {
ExampleOne,
ExampleTwo,
ExampleThree,
ExampleFour,
ExampleFive
};
with ExampleOne.js to ExampleFive.js like this:
import React, { Component } from 'react';
import { Container, Content, Text } from 'native-base';
export default class ExampleOne extends Component {
render() {
return (
<Container>
<Content>
<Text>Example</Text>
</Content>
</Container>
)
}
};
But when I importing it to RootStack.js, I got an error "The Component for route 'ExampleOne' must be a React Component.'
RoutStack.js like this:
import React from 'react';
import { createStackNavigator } from 'react-navigation';
// Import all MarketsScreen
import { ExampleOne, ExampleTwo, ExampleThree, ExampleFour, ExampleFive } from './Markets';
const RootStack = createStackNavigator({
ExampleOne: ExampleOne,
ExampleTwo, ExampleTwo,
ExampleThree: ExampleThree,
ExampleFour: ExampleFour,
ExampleFive: ExampleFive
});
export default RootStack;
Is there anything wrong with my code? I'm following some tutorial but it's not work on me
try to call the resources ExampleOne, ExampleTwo..etc, should not use the object {ExampleTwo} .. is unnecessary ..