I am learning to import files into React Native. I am trying to import the User.js file into the App.js file, but it displays an error and I don't understand where I'm wrong. Help me please.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import User from "../Components/User";
export default function App() {
return (
<View>
<User/>
</View>
)};
const styles = StyleSheet.create({});
User.js
import React from "react";
import {StyleSheet} from 'react-native';
import {View, Text} from 'react-native';
let User = () => {
return <View>
<Text>Hello My Darling</Text>
</View>
export default User;
let styles = StyleSheet.create({});
You need to close the bracker of your "User" export function.
import React from "react";
import {StyleSheet} from 'react-native';
import {View, Text} from 'react-native';
let User = () => {
return (
<View>
<Text>Hello My Darling</Text>
</View>
);
}; // << close this bracket.
export default User;
let styles = StyleSheet.create({});
Closing bracket of the 'User' function is missing. Currently, export statement is inside the functional component which is not allowed.
Related
how to use a functional custom component in react native??? i actualy build a login functional component like a custom react but not exsist a "div" i made a "View"
why should this not work??
import React from 'react';
import { Text, View } from 'react-native';
const Login = () => {
return (
<View>
<Text>Hi</Text>
</View>
);
}
export default Login;
---------------------------------
import React from 'react';
import {Login} from './components/Login/Login';
import { Text, View } from 'react-native';
const App = () => {
return (
<View>
<Login/>
</View>
)
}
export default App;
You've got your named exports and default exports turned around.
This would work instead:
import React from 'react';
import { Text, View } from 'react-native';
const Login = () => {
return (
<View>
<Text>Hi</Text>
</View>
);
}
export default Login;
---------------------------------
import React from 'react';
import Login from './components/Login/Login';
import { Text, View } from 'react-native';
const App = () => {
return (
<View>
<Login/>
</View>
)
}
export default App;
When you export default Login, you must import it as a default import with import Login from './components/Login/Login'
Here is an Expo Snack with the working code as well
So this is the error: TypeError: undefined is not an object (evaluating 'navigation.push')
I use React Navigation 5 and. This is my App.js:
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, FlatList, Alert} from 'react-native';
const MyApp = ({navigation}) => {
return(
<Button
onPress={() => navigation.push('Information')}
title="Get Information"
/>
);
}
export default MyApp;
What is the problem? :)
You should define navigation inside your const MyApp!
And you also should import useNavigation
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, FlatList, Alert} from 'react-native';
import { useNavigation } from '#react-navigation/native';
const MyApp = () => {
const navigation = useNavigation();
return(
<Button
onPress={() => navigation.push('Information')}
title="Get Information"
/>
);
}
export default MyApp;
Thanks for your help Allandiego
I am building a react-native app with a screen home.js file in screens/home.js folder by importing
with import Home from ./screens/home.js; in App.js
iam using expo cli
when i run expo start --web
error occurs cannot resolve ./screens/home.js. iam sure with the path and file name. what can be the problem
App.js
import React ,{useState}from 'react';
//import { View, Text } from 'react-native';
import Home from './screens/home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
const getFonts=()=>{
return Font.loadASync({
'nunito-regular':require('./assets/fonts/Nunito-Regular.ttf'),
'nunito-bold':require('./assets/fonts/Nunito-Bold.ttf'),
})
}
export default function App() {
const [fontsLoaded,setFontsLoaded]=useState(false);
if(fontsLoaded){
return(
<Home/>
);
}
else{
return(
< AppLoaded
startASync={getFonts}
onFinish={()=>setFontsLoaded(true)}
/>
)
}
}
screens/home.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { render } from 'react-dom';
export default function Home() {
render(){
return (
<View style={styles.container}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding:24,
},
titleText:{
fontFamily:'nunito-bold',
fontSize:18,
}
});
Remove render method from the home screen made some changes to your code try to do some thing like this:
import React ,{useState}from 'react';
import Home from './screens/Home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
export default function App() {
return(
<Home/>
)
}
And home.js to
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Home() {
return (
<View style={{justifyContent:"center",alignItems:"center",flex:1}}>
<Text >Home Screen</Text>
</View>
);
}
////////////this is homescreen, here i try to go to 'Components'. it's not recognize 'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text>
<Button
onPress={() => props.navigation.navigate('Components')}
title="Go to Componetes demo"
/>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default HomeScreen;
/////////This is the index.js here i am using homescreen.
import React from 'react';
import { AppRegistry,View } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';
import ComponentsScreen from './src/screens/ComponentsScreen';
import Header from './src/screens/Header';
const App = () => {
return(
<View style={{ flex: 1 }}>
<Header headerText={'Hello ! '}/>
<HomeScreen />
</View>
);
};
AppRegistry.registerComponent('Tal', () => App);
This is the App.js,and the navigator is here. This is edited.
i Need help .///////////////////////////////////////////////
/////##########//////////
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
const navigator = createStackNavigator (
{
Home : HomeScreen,
Components : ComponentsScreen,
List : ListScreen
},
{
initialRouteName : 'Home',
defaultNavigationoptions : {
title : App
}
}
);
export default createAppContainer(navigator);
First, you need to understand how are you gonna have that navigation as prop inside a component.
Each screen component in your app is provided with the navigation prop automatically. It's important to highlight the navigation prop is not passed into all components; only screen components receive this prop automatically! React Navigation doesn't do anything magic here. For example, if you were to define a MyBackButton component and render it as a child of a screen component, you would not be able to access the navigation prop on it. If, however, you wish to access the navigation prop in any of your components, you may use the withNavigation HOC.
Please pass the navigation prop from the screen where you are introducing the homeScreen. It does not have access of navigation that is why it is throwing the error.
I am beginning with ReactNative and try to get a component I can navigate to as well as use inline.
MyComp is the component. In Home I try to navigate to MyComp by a button as well as have it inline with .
App.js
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Home from "./Home";
import MyComp from "./MyComp";
const navi = createStackNavigator({
Home: {screen: Home},
MyComp: {screen: MyComp}
});
const App = createAppContainer (navi);
export default App;
Home.js
import React from 'react';
import {StyleSheet, Text, View, Button, Alert} from 'react-native';
import {navigate} from 'react-navigation';
import {MyComp} from "./MyComp";
export default class Home extends React.Component
{
static navigationOptions = {title: 'At Home'};
render()
{
return (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Button
title={"Goto MyComp"}
onPress={() => this.props.navigation.navigate('MyComp')}/>
<MyComp/> {/* Compiler Error */}
</View>
);
}
}
MyComp.js
import React from 'react';
import {Text, View, Button} from 'react-native';
export default class MyComp extends React.Component
{
render()
{
return (
<View>
<Text>Here I am</Text>
</View>
);
}
}
But the inline produces an error.
Invariant Violation: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
Check the render method of Home.
I am not sure whats the problem here. Is it not possible to use a component in both ways?
remove brackets when u import component in home screen
change
import {MyComp} from "./MyComp";
to
import MyComp from "./MyComp";