I am using React Native. Below is my code in app.js.
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './components/Header';
export default function App() {
return (
<View>
</View>
);
}
I made another directory in root and added another js file which is Header.js. It contains below code.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Header() {
return (
<View>
</View>
);
}
I got an error message below.
The development server returned response error code: 500
The module ./components/Header could not be found
Directory Structure
Please let me know if you need more info.
It should be
const Header = () => {
return (
<View>
</View>
);
}
export default Header
Don't just reload an app, restart packager also.
Please correct your functional header component as:
const Header = () => {
return(
<View>.............</View>
)}
export default Header
And run react-native start and react-native run-android
Replace Header component to this:-
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const Header = ({props}) => { // you can also access props like this
return (
<View>
</View>
);
}
Related
I'm new to react native and I'm following a tutorial to learn the language.
I'm now trying to set a background image using ImageBackground.
WelcomeScreen.js:
import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native-web';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1
}
})
export default WelcomeScreen;
App.js
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';
export default function App() {
return (
<WelcomeScreen />
);
}
Now I get this error: Error: Image: asset with ID "1" could not be found. Please check the image source or packager.
I have a app folder in in my projectfolder. In this app folder I have the assets folder and a screens folder. The WelcomeScreen.js is in the screens folder. The background.jpg is in the assets folder and the App.js is in the main/project folder.
I can't seem to find any way to fix this error.
Try changing your module import from react-native-web to just react-native
WelcomeScreen.js
import React from "react";
import { ImageBackground, StyleSheet } from "react-native";
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
});
export default WelcomeScreen;
You do not need to add ./app to your WelcomeScreen.js file path
App.js
import WelcomeScreen from "./screens/WelcomeScreen";
export default function App() {
return <WelcomeScreen />;
}
Hope this helps!
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 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;
Error:
[#RNC/AsyncStorage]: NativeModule: AsyncStorage is null.
I got it when I try to run my app in expo with npm start
I got it last night, I fixed it and it worked till one hour ago, but now it’s here again.
I read other topics about the same error, but it doesn’t work for me.
my app.js code
import React from 'react';
import { Platform, StatusBar, StyleSheet, View, AsyncStorage} from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
import MainTabNavigator from './navigation/MainTabNavigator';
import * as firebase from 'firebase';
export default class App extends React.Component {
state = {
isLoadingComplete: false,
isAuthenticationReady: false,
isAuthenticated: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Icon.Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
}),
]);
};
AsyncStorage no longer in react-native library:
import { Platform, StatusBar, StyleSheet, View, AsyncStorage} from 'react-native';
remove AsyncStorage as a module and do npm install --save #react-native-community/async-storage
and then import into your file like so:
import AsyncStorage from '#react-native-community/async-storage';
I'm using React Router for a React Native app. Not sure what I'm missing here but I install react-router-native and require the history package, and setup a couple methods that just push a new route onto the stack but nothing happens. I console.log('clicked'); to check that it's firing and it is so not sure what's wrong.
import React, { Component } from 'react';
import { View } from 'react-native';
import Splash from './Splash';
import createHistory from 'history/createMemoryHistory';
const history = createHistory();
class SplashContainer extends Component {
goToLogin = () => {
history.push('/Login');
}
goToRegister = () => {
history.push('/SignUp');
}
render () {
console.log(history)
return (
<Splash
goToLogin={this.goToLogin}
goToRegister={this.goToRegister}
/>
);
}
}
export default SplashContainer;
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Button } from 'native-base';
import { Link } from 'react-router-native';
import PropTypes from 'prop-types';
const Splash = (props) => {
console.log(props)
return (
<View style={styles.container}>
<Button light block onPress={props.goToLogin}>
<Text>Login</Text>
</Button>
<Button dark block bordered style={{marginTop: 10}} onPress={props.goToRegister}>
<Text>Register</Text>
</Button>
</View>
);
}
Splash.propTypes = {
goToLogin: PropTypes.func.isRequired,
goToRegister: PropTypes.func.isRequired
}
export default Splash;
I don't know your Router config, but your methods should be:
goToLogin = () => {
const { history } = this.props
history.push('/Login');
}
history will passed down via props of component inside Router's stack.