I have searched on google but I don't know react.
When I click on the button 'Connexion' I would like to be forwarded to the page About.js.
My app.js :
import React from 'react';
import {View, TextInput, StyleSheet, Text } from 'react-native';
import { Header, Button } from 'react-native-elements';
import About from './component/About';
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<Button
title="CONNEXION"
buttonStyle={{backgroundColor: "#F1C40F", borderColor: "transparent", marginTop: 20,}}
/>
</View>
);
}
}
My About.js
import React from 'react';
import {Text, View, StyleSheet } from 'react-native';
export default class About extends React.Component{
render() {
return (
<View style={style.view}>
<Text style={style.title}> A propos de moi</Text>
</View>
);
}
}
});
install react-navigation,
yarn add react-navigation
or with npm
npm install --save react-navigation
Inside your index.js, import StackNavigator
import App from './components/app;
import About1 from './components/About;
import {StackNavigator} from 'react-navigation';
Then add below code to the last of index.js
export default StackNavigator({
Home: {
screen: App,
},
Aboutsss:{
screen: About1,
},
});
Inside app.js, inside button give,
onPress = {this.props.navigation.navigate('Aboutsss')}
Hope you understand and if any doubt feel free to comment.
note:- when I try to install using npm I got some error in windows, but no problem with yarn.
To navigate between the screens you can use stackNavigator.
https://facebook.github.io/react-native/docs/navigation.html
Related
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.
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";
I was trying to use the react-navigation StackNavigator, and backtracked my code multiple times but couldn't find the issue. I was trying to build a simple navigation menu using this function for ios.
I'm using expo. So I started this project by creating a new expo project through terminal with the command "create-react-native-app testExpo". As shown below I modified the App.js a bit then created a screens folder -> then created two screens: "HomeScreen" and "LoginScreen"
These are the pictures of my code and the error
https://i.ibb.co/fQ9fjf2/Screen-Shot-2019-01-10-at-9-02-54-AM.png
https://i.ibb.co/7Xtx6jM/Screen-Shot-2019-01-10-at-9-03-01-AM.png
https://i.ibb.co/C8xbBVY/Screen-Shot-2019-01-10-at-9-03-07-AM.png
//Error picture
https://i.ibb.co/chgwYHT/Simulator-Screen-Shot-i-Phone-X-2019-01-10-at-08-59-08.png
App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation'
import LoginScreen from './screens/LoginScreen'
import HomeScreen from './screens/HomeScreen'
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
const AppNavigator = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen: {screen: HomeScreen}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
HomeScreen.js
import React, { Component } from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class HomeScreen extends Component{
render() {
return(
<View>
<Text>This is the home screen</Text>
</View>
);
}
}
export default HomeScreen;
LoginScreen.js
import React, {Component} from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class LoginScreen extends Component{
render() {
return(
<View>
<Text>This is the login screen</Text>
</View>
);
}
}
export default LoginScreen;
I expect the app to launch with multiple screens to the applications.