Develop Reference

React Native Error: The component for route must be a React component

I'm trying to create a basic setup for react navigation, but for some reason, when I go to view the project, I get a blank screen and an error in terminal that says:
Error: The component for route 'screens' must be a React component. For example:
import MyScreen from './MyScreen';
...
screens: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
screens: MyNavigator,
}
I've looked at other Stack Overflow solutions, but none of them seem to apply in my case, so, is there something else I'm doing wrong here?
My App.js (Also importing fonts here, but these worked, it seems to be an issue with the routing)
import React, {useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';
const getFonts = () => Font.loadAsync({
'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf')
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return (
<Navigator />
);
} else {
return (
<AppLoading
startAsync= {getFonts}
onFinish= {()=> setFontsLoaded(true)}
onError= {()=> console.log('error')}
/>
);
}
}
homeStack.js
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import Scanner from '../screens/scanner';
const screens = {
Home: {
screen: Home
},
Scanner: {
screen: Scanner
},
};
const HomeStack = createStackNavigator({screens});
export default createAppContainer(HomeStack);
home.js
import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Home() {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.titleText}>Home Screen</Text>
</View>
);
}
scanner.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Scanner() {
return (
<View style={globalStyles.container}>
<Text>About Screen</Text>
</View>
);
}
My file directory
Any help would be much appreciated!

The video you are following along with is really old and probably not up to date anymore. Please follow the installation guides and then follow along this guide. That should get you up and running in minutes.

Access mobx stores from any component in react-native

I'm new to react-native and react world, I'm using mobx store for state management as a single source of truth, I want to be able to access globalStore object from ANY component in my application without having to import globalStore, I think this MIGHT be possible with react Context-Provider API but I'm still a newbie.
My globalStore (I access all stores from this root store):
import { PostStore } from '../stores/PostStore.js'
import { VenueStore } from '../stores/VenueStore.js'
class GlobalStore
{
postStore;
venueStore;
constructor()
{
this.postStore = new PostStore(this);
this.venueStore = new VenueStore(this);
}
}
export default new GlobalStore;
In my functional components I want to be able to to something simple like:
onPress={ globalStore.userStore.loggedUser }
without having to import globalStore into my components
My App.js component:
import React, { useEffect } from 'react'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import ROOTSTACK1 from '#components/navigators/ROOTSTACK1';
import { SafeAreaView, AsyncStorage } from "react-native";
import global from '#styles/Global';
const Stack = createStackNavigator();
function App()
{
return (
<SafeAreaView style={[ global.androidSafeArea ]}>
<NavigationContainer>
<ROOTSTACK1></ROOTSTACK1>
</NavigationContainer>
</SafeAreaView>
);
}
export default App;

React Native Navigation Component Not Rendering

I am using react navigation as per the docs but trying to make my app a bit more modular. I placed the result of createStackNavigator into a separate component..
Navigator.js
import React, { Component } from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './views/Home.js';
import TestComponent from './views/TestComponent.js';
const MainNavigator = createStackNavigator({
Home: {screen: Home},
Test: {screen: TestComponent}
});
export default createAppContainer(MainNavigator);
..and importing this component into my App.js
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Header from './Header.js';
import Navigator from './Navigator.js';
import FooterMenu from './FooterMenu.js';
class App extends Component {
render() {
return (
<View>
<Header />
<Navigator />
<FooterMenu />
</View>
);
}
}
export default App;
My index.js is as follows:
import { AppRegistry } from 'react-native';
import App from './components/App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Im finding that my <Header/> and <FooterMenu/> components are rendering but the <Navigator/> component is not.
I found that if I replace the top-level <View> component with a React fragment, it does render.
render() {
return (
<>
<Header />
<Navigator />
<FooterMenu />
</>
);
}
Although this syntax breaks my editor's (sublime) syntax highlighting. Though if I change the fragment to <React.Fragment> React native throws an exception.
My questions are:
Why does <Navigator/> not render if I wrap it in a <View> component?
Why do I get an error if I use <React.Fragment>?

If you want to create your own Navigator, here's how.
It is possible to take an existing Navigator and extend its behavior, using the following approach:
const MyStack = createStackNavigator({ ... });
class CustomNavigator extends React.Component {
static router = MyStack.router;
render() {
const { navigation } = this.props;
return <MyStack navigation={navigation} />;
}
}
Now it is possible to render additional things, observe the navigation prop, and override behavior of the router:
const MyStack = createStackNavigator({ ... });
class CustomNavigator extends React.Component {
static router = {
...MyStack.router,
getStateForAction: (action, lastState) => {
// check for custom actions and return a different navigation state.
return MyStack.router.getStateForAction(action, lastState);
},
};
componentDidUpdate(lastProps) {
// Navigation state has changed from lastProps.navigation.state to this.props.navigation.state
}
render() {
const { navigation } = this.props;
return (
<View>
<Header />
<MyStack navigation={navigation} />
<FooterMenu />
</View>
);
}
}
If you want to know more about this,

How to solve "Unable to resolve module..." error with react-native?

I am trying to learn to use react native and am following along with this YouTube tutorial. I have encountered an error stating the following, "Unable to resolve the module ... from ...: could not resolve ... as a file nor folder." I am fairly certain that the file path used is correct and I have followed the video very closely, and it appears to work in this video. Any help with this would be greatly appreciated as I am unfamiliar with using components in react.
index.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
import Component1 from './app/components/Component1/Component1';
export default class myapp extends Component {
render() {
return(
<View>
<Component1 />
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('myapp', () => myapp);
component1.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
export default class Component1 extends Component {
render() {
return(
<View>
<Text>This is Component 1.</Text>
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('Component1', () => Component1);

Try this path to your component
import Component1 from './app/components/Component1/component1';

Rendering a React.Component

Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP
import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';
export default class App extends React.Component {
render(){
return (
<div className="container">
<Catalog />
</div>
)
}
}
CATALOG
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';
function getCatalog(){
return {items: AppStore.getCatalog()}
};
class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog();
}
render(){
let items = this.state.items.map(item => {
return <CatalogItem key={item.id} item={item} />
});
return (
<div className="row">
{items}
</div>
)
}
}
Any help would be much appreciated.

You just need to export default something in Catalog:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import statement nothing will import:
import Catalog from './app-catalog';

Add export to Catalog
export default class Catalog extends React.Component {
}
because now from catalog there is nothing to import, and when you do
import Catalog from './app-catalog';
you will get undefined and undefined is not valid React component, that's why you get error