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
Related
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.
I am implementing custom toggleSwitch in react native.I am new in react native. I gone through below link but I am not able achieve the implement.
https://www.digitalocean.com/community/tutorials/how-to-build-a-custom-toggle-switch-with-react
I also check https://dev.to/narendersaini32/how-to-create-custom-toggle-button-in-react-387m
Login.js
import React from 'react';
import styles from './style';
import {
SafeAreaView,
View,
Switch
} from "react-native";
class Login extends React.Component {
render() {
return (
<SafeAreaView>
<View style={styles.container}>
</View>
<View>
<ToggleComponent/> //I want to import here toggleSwitch
</View>
</View>
</SafeAreaView>
)
}
}
export default Login;
ToggleButton.js
import React from 'react';
const ToggleComponent = ({}) => (
*****************??**************
);
const styles = StyleSheet.create({
})
export default ToggleComponent;
I want to implement custom ToggleSwitch.
import this component in your file where you want to use it.
import ToggleComponent from "../location_of_ToggleComponent.js"
and then you can use it like any other component.
<ToggleComponent />
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.
When the header is click, I want it navigate to next page. However, I do not know how to access navigation props outside the class. Any suggestion on how to do this?
import React,{Component} from 'react'
import { View, Text, TouchableOpacity, FlatList} from 'react-native'
class header extends Component {
render(){
return(
<TouchableOpacity
onPress={() => **this.props.navigation.navigate('PageTwo')**}
>
<Text>{'Go to next Page Two'}</Text>
</TouchableOpacity>
)
}
}
export default class PageOne extends Component {
static navigationOptions = {
title: 'Page One',
}
constructor(props) {
super(props);
this.state = {
data: // ...
};
}
_renderItem = ({item}) => (
// ...
);
render(){
return(
<FlatList
ListHeaderComponent={header}
data={this.state.data}
renderItem={this._renderItem}
/>
)
}
}
For React Navigation
First make sure you installed react-navigation lib in your project.
If not then run "npm install --save react-navigation" in cmd.
Then create an App.js file to hold all router names like
App.js :
import React from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Splash from './src/components/Splash/Splash'
import Login from './src/components/Splash/Login'
const Navigation = StackNavigator({
Splash : {
screen : Splash
},
Login : {
screen : Login
},
})
export default Navigation;
In my case src is dirtecory for store all js file.
Now set AppRegistry.registerComponent in index.android.js.
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Splash from './src/components/Splash/Splash'
import Navigation from './App'
export class FirstReactDemo extends Component {
render() {
return (
<Splash/>
);
}
}
AppRegistry.registerComponent('FirstReactDemo', () => Navigation);
Now, set onclick listener in first screen.
Splash.js
import React, { Component } from 'react';
import {
View,
Text,
Button,
StyleSheet,
} from 'react-native';
import {StackNavigator} from 'react-navigation';
export default class SplashScreen extends Component {
static navigationOptions = {
title: 'Splash',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text
onPress={() =>navigate('Login')}
style={styles.text}>My Splash screen</Text>
</View>
);
}
}
Create Login.js file for next screen.
React Navigation I assume?
use the withNavigation HOC (https://github.com/react-community/react-navigation/blob/aead8ff9fbd2aceb2d06c8049c8ad0d55d77b5ab/docs/api/withNavigation.md)
pass navigation = {navigation} yourself while using your child component.