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;

'render' is not defined when running create react app

When I am using create react app when compliling I get the following errors ./src/Grid.js
"Line 3: Your render method should have return statement" and "Line 5: 'render' is not defined"
this is the contents of the the Grid.js file
import React, { Component } from 'react';
class Grid extends Component {
render(){
return <p>Hello, World</p>;
}
}
export default Grid;
I can't see that is wrong here? any help appreciated
import React, { Component } from 'react';
import Grid from './Grid.js';
class App extends Component
{
render()
{
return(
<div>
<Grid />
</div>
);
}
}
export default App;
This is where I am using the component
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Where ReactDOM render is used

You are missing import {render} from 'react-dom';.

It should be:
import React, { Component } from 'react';
class Grid extends Component {
render(){
return(<p>Hello, World</p>);
}
}
export default Grid;
The above quote no longer applies.
I tried your exact code for Grid.js and App.js from the question and it works well on my machine. Whatever reason why your thing isn't working isn't in your Grid.js or App.js.

Still no real explanation for this. Copying the component code in to a newly created file compiles correctly. Very strange indeed.

React Native (0.39.2) - Unknown named module error

React-Native "^0.39.2"
React "15.4.1"
I'm trying to import my custom component Main.jsx:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Main extends Component {
render() {
return(
<View>
<Text>
Imported
</Text>
</View>
)
}
}
within index.android.js
import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import Main from './app/components/Main'
export default class AppTest extends Component {
render() {
return (
<View>
<Main />
</View>
);
}
}
AppRegistry.registerComponent('AppTest', () => AppTest);
I don't understand why I got the error unknown named module './app/components/Main', my project structure is correct:
AppTest
|
app
|
components
|
Main.jsx
Maybe I've wrong or forgot something very basic but can't figure out the cause

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