I need some help for navigation between screens - react-native

I don't know why I can't import my screen, or I just can't find my mistake. I have another screen like this one. The import and the stack navigator screens is like here, but there isn't error there.
Here is my code:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import MainNavigator from './LoginScreen';
// Some Code
const MainNavigator1 = createStackNavigator({
SignUp: {
screen: SignUpScreen,
navigationOptions: {
header: null,
}
},
Login: {
screen: MainNavigator,
navigationOptions: {
header: null,
}
}
})
export default createAppContainer(MainNavigator1);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
LogInScreen:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import AppContainer22 from './DrawerNavigatorNew';
import MainNavigator1 from './SignUpScreen';
const firebaseConfig = {
apiKey:
authDomain:
databaseURL:
projectId:
storageBucket:
};
firebase.initializeApp(firebaseConfig);
class LoginScreen extends React.Component {
constructor (props) {
super(props)
this.state =({
email:'',
password:'',
error:'',
})
}
/*
signUpUser = (email, password) => {
try {
if(this.state.password.length <6)
{
alert("Please enter atleast 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password)
}
catch (error){
console.log(error.toString())
}
}
*/
onSignInPress() {
this.setState({error:''})
const {email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
this.setState({error:''})
this.props.navigation.navigate('Drawer');
})
.catch(() => {
this.setState({error:'Authentication failed'})
})
}
render(){
let { height, width } = Dimensions.get('window');
return (
<ImageBackground source={{uri:'https://guidetoiceland.is/image/437199/x/0/northern-lights-in-all-the-colors-of-the-rainbow-dance-across-the-sky-in-iceland-6.jpg'}}
style={{height, width}}>
<Container style={styles.container}>
<View style={{justifyContent:'center', alignItems:'center'}}>
<Image source={{uri:'https://image.flaticon.com/icons/png/512/10/10155.png'}}
style={styles.profileImg}/>
</View>
<Form>
<Item rounded>
<Icon active name='md-mail' size={20} color={'white'}/>
<Input
name='email'
placeholder='YourEmail#gmail.com'
autoCorrect={false}
autoCapitalize='none'
onChangeText={(email)=> this.setState({email})}
keyboardType='email-address'
style={{marginTop: 10}}
/>
</Item>
<Item rounded>
<Icon active name='md-key' size={25} color={'white'}/>
<Input
name='password'
placeholder='******'
secureTextEntry={true}
autoCorrect={false}
autoCapitalize='none'
onChangeText={(password)=> this.setState({password})}
style={{marginTop: 10}}
/>
</Item>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Button style={{marginTop: 10}}
full
rounded
success
onPress = {this.onSignInPress.bind(this)}
>
<Text> Login </Text>
</Button>
<Button style={{marginTop: 10}}
full
rounded
primary
onPress = {this.props.navigation.navigate('SignUp')}
>
<Text style={{color: 'white' }}> Sign Up </Text>
</Button>
</Form>
</Container>
</ImageBackground>
);
}
}
const MainNavigator = createStackNavigator({
Home: {
screen: LoginScreen,
navigationOptions: {
header: null,
}
},
Drawer: {
screen: AppContainer22,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: MainNavigator1,
navigationOptions: {
header: null,
}
}
});
export default createAppContainer(MainNavigator);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
And here is the Error:

Related

How can I show the Drawer (SideMenu) on any screen except in the login using React Native?

I had several problems trying to achieve this.
The sidemenu is not displayed on the Login screen, but in the Home component yes(this is fine).
But if I go back to the login component (by clicking on the menu navigation item), drawer is now shown from the login (It only must be showed on the Home component). I do not know why the template that I have to put in the drawer is not shown, by default the routes that I have created appear and with this the problem occurs (I am trying to put a template in the sidemenu)..
How can I fix this?
this is my code:
app.js
import React from "react";
import { StyleSheet, View } from "react-native";
import UserNavigation from "./app/navigation/UserNavigation";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return <UserNavigation />;
}
}
userNavigation.js
import React from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image
} from "react-native";
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Icon } from "native-base";
import LoginScreen from "../screens/login/Login";
import HomeScreen from "../screens/home/Home";
const { width } = Dimensions.get("window");
const CustomDrawerNavigation = props => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 250,
backgroundColor: "#fff",
opacity: 0.9
}}
>
<View
style={{
height: 200,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("../../assets/img/logo.webp")}
style={{ resizeMode: "contain", width: "100%" }}
/>
</View>
<View
style={{
height: 50,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
></View>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
<View style={{ left: 20, bottom: 20 }}>
<View style={{ flexDirection: "row" }}>
<View
onPress={() => props.navigation.navigate("Login")}
style={{
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "center",
marginRight: 15
}}
>
<Icon
type="MaterialCommunityIcons"
name="logout"
style={{ fontSize: 24 }}
onPress={() => props.navigation.navigate("Login")}
/>
<Text>Salir</Text>
</View>
</View>
</View>
</SafeAreaView>
);
};
const DrawerStack = createStackNavigator({
Home: HomeScreen
});
const DrawerNavigation = createDrawerNavigator({
Home: {
name: "Home",
screen: HomeScreen
},
Login: {
name: "Cerrar SesiĆ³n",
screen: LoginScreen
}
});
const AppNavigator = createSwitchNavigator(
{
App: DrawerNavigation,
Login: {
screen: LoginScreen
}
},
{
initialRouteName: "Login",
drawerPosition: "left",
I have another problem and I don't know why the template (CustomDrawerNavigation) I have to put in the drawer is not shown.
contentComponent: CustomDrawerNavigation,
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "DrawerToggle",
drawerWidth: (width / 3) * 2
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
login.js
import React, { Component } from "react";
import { View } from "react-native";
import { Button, Text } from "native-base";
export default class Login extends Component {
constructor() {
super();
this.state = {};
}
handlerLogin = async () => {
this.props.navigation.navigate("Home");
};
render() {
return (
<View>
<Text>Login</Text>
<Button block button onPress={() => this.handlerLogin()}>
<Text>Go to home</Text>
</Button>
<Text>Login</Text>
</View>
);
}
}
home.js
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { StatusBar } from "react-native";
import {
Container,
Header,
Title,
Left,
Icon,
Right,
Button,
Body,
Content,
Text,
Card,
CardItem
} from "native-base";
export default class Home extends Component {
constructor() {
super();
this.state = {
loading: false
};
}
closeDrawer = () => {
this.drawer._root.close();
};
openDrawer = () => {
this.drawer._root.open();
};
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.openDrawer()}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Home</Text>
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
For this you can create two Navigators.
Advantages:
1. After login he cant get back to Login screen if he press back
2. Side Drawer wont be visible in Login Page
Imports we need:
import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { createDrawerNavigator } from 'react-navigation-drawer';
Login Stack:
const LoginStack = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
}
},
forgotPassword: {
screen: ForgotPassword,
navigationOptions: {
title: 'Forgot Password'
}
}
},
{
initialRouteName: 'Login',
} );
Home Page Stack:
const homePageBottomNavigationStack = createStackNavigator(
{
Home: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
},
},
{
initialRouteName: 'Home',
} )
Drawer Navigator:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
} );
Switch Navigator:
const switchNavigator = createSwitchNavigator(
{
LoginStack: LoginStack,
PostLoginStack: PostLoginStack
},
{ headerMode: "none", initialRouteName: "LoginStack" } );
const AppContainer = createAppContainer(switchNavigator);
package.json:
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.1",
"react-native-paper": "^3.2.1",
"react-native-reanimated": "^1.4.0",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^1.10.3"
For Having a custom drawer component, make this change:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
},
{
contentComponent: YourCustomDrawerComponent
}
);
You will need to create two navigators one for the Login and one for the App and then wrap them into a SwitchNavigator
So
Login = StackNavigator
App = DrawerNavigator
and Login and App together into a SwitchNavigator
You can refer this article
https://medium.com/building-with-react-native/routing-in-react-native-apps-and-how-to-configure-your-project-with-react-navigation-library-d8d58005bfe9

How to display the menu list from API in DrawerNavigator

I have created the side menu using DrawerNavigator with the static menu names and screens. I want the menu names and screens to be dynamic. Meaning to say I like to fetch those details in API and display in the DrawerNavigator. Please help to resolve this.
const MyApp = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen,
},
WebMenuScreen: {
screen: WebMenuScreen,
},
}, {
drawerPosition: 'right',
},{
contentComponent: CustomDrawerComponent
}, {
initialRouteName: 'Login'
});
Try this, I hope this will helps you.
in Route File
import DrawerNavigator from "./DrawerNavigator";
import Home from './Home';
import About from './About'
import {
createStackNavigator,
createAppContainer,
} from "react-navigation";
const MainNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: {
htitle: 'Home'
}
},
About: {
screen: About,
navigationOptions: {
htitle: 'About'
}
},
});
const Routes = createAppContainer(MainNavigator);
export default Routes;
in DrawerNavigator File
import React from 'react';
import { Platform, Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Home from './Home';
import About from '/About'
import MenuDrawer from './MenuDrawer';
const WIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTH*0.83,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const DrawerNavigator = createDrawerNavigator(
{
Home:{
screen:Home
},
About:{
screen:About
},
},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
in Menu Drawer File
import React from "react";
import {
View,
Text,
ScrollView,
Image,
TouchableOpacity,
} from "react-native";
var obj = JSON.parse('{ "name":"Home","name":"About" }');
// import styles from './menuDrawerStyles'
class MenuDrawer extends React.Component {
navLink(nav, text) {
return (
<TouchableOpacity
style={{ height: 50 }}
onPress={() => this.props.navigation.navigate(nav)}
>
<Text style={styles.link}>{text}</Text>
</TouchableOpacity>
);
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.scroller}>
{
this.obj.map((data) => {
<View style={styles.bottomLinks}>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
</View>
})
}
</ScrollView>
</View>
);
}
}
in Menu Button File
import React from "react";
import { StyleSheet , Platform } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
export default class MenuButton extends React.Component {
render() {
return (
<Icon
name="reorder"
color="black"
size={25}
style={styles.menuIcon}
onPress={() => this.props.navigation.toggleDrawer()}
/>
);
}
}
const styles = StyleSheet.create({
menuIcon: {
zIndex: 9,
position: "absolute",
top: Platform.OS === "android" ? 15 : 25,
left: 20
}
});
In Menu Drawer file you can call Api and fetch menu list.

While adding navigation PLugin its not Working showing error

New to react-native and trying to make react-native with the sample app.
I created Two Screen. LOGIN AND FORM Screen.
I want Once I clicked to login button it will go to form screen. I add library of navigation for routing.
But it shows error.
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/pages/pages/Login';
import Form from './src/pages/pages/Form';
const AppNavigator = StackNavigator({
Login: { screen: Login},
Form: { screen: Form},
});
export default class App extends Component<{}> {
render() {
return (
<View style ={styles.container}>
<AppNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
state = {
username: '', password: ''
}
onChangeText = (key, val) => {
this.setState({ [key]: val })
}
signUp = async () => {
const { username, password } = this.state
try {
// here place your signup logic
console.log('user successfully signed up!: ', success)
} catch (err) {
console.log('error signing up: ', err)
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('username', val)}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('password', val)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Form') } title = "Form"
>
<Text > LOGIN </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
width: 350,
height: 55,
backgroundColor: '#ff4000',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 4,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
alignItems: 'center',
backgroundColor: '#58d63b',
padding: 10,
width:320,
height:55
}
})
Form.js
import React, {Component} from 'react';
import {View,Text} from 'react';
export default class Login extends Component {
render() {
return (
<View>
<Text> This Is Form Page</Text>
</View>
);
}
}
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
THIS IS THE ERROR I HAVE GETTING ALL THE TIME
I tried everything clear cache and re-install npm but no luck.
Anyone can help.It would be great.

Native-Base SideBar is not visible in React-Navigation

I integrated sidebar for the drawer while its not showing. It shows simple react-navigation drawer nothing else.
Here is my code. How can I make it worked and visible?
App.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';
import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation';
import WelcomeScreen from './screens/WelcomeScreen';
import SigninScreen from './screens/SigninScreen';
import SignupScreen from './screens/SignupScreen';
import HomeScreen from './screens/HomeScreen';
import BusinessScreen from './screens/BusinessScreen';
import TechScreen from './screens/TechScreen';
import ProfileScreen from './screens/ProfileScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import SettingsScreen from './screens/SettingsScreen';
import SideBar from './components/SideBar';
export default class App extends React.Component {
render() {
const MainNavigator = TabNavigator({
welcome: { screen: WelcomeScreen },
signin: { screen: SigninScreen },
signup: { screen: SignupScreen },
main: {
screen: DrawerNavigator({
home: { screen: HomeScreen },
business: { screen: BusinessScreen },
tech: { screen: TechScreen },
profile: {
screen: StackNavigator({
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
})
}
},
)
}
},
{
contentComponent: props => <SideBar {...props} />
}
);
return (
);
}
}
HomeScreen.js
import React from "react";
import { StatusBar } from "react-native";
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right
} from "native-base";
import SideBar from '../components/SideBar';
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Chat App to talk some awesome people!</Text>
</Body>
</CardItem>
</Card>
<Button
full
rounded
dark
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("business")}>
<Text>Chat With People</Text>
</Button>
<Button
full
rounded
primary
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("tech")}>
<Text>Goto Profiles</Text>
</Button>
</Content>
</Container>
);
}
}
SideBar.js
import React from "react";
import { AppRegistry, Image, StatusBar } from "react-native";
import {
Button,
Text,
Container,
List,
ListItem,
Content,
Icon
} from "native-base";
const routes = ["home", "business", "tech", "profile"];
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Content>
<Image
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 80, width: 70 }}
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png"
}}
/>
</Image>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
button
onPress={() => this.props.navigation.navigate(data)}>
<Text>{data}</Text>
</ListItem>
);
}}
/>
</Content>
</Container>
);
}
}
What is going wrong?
Try below package for use side bar
https://github.com/react-native-community/react-native-side-menu
Try this method

this.props.navigation is undefined

I use library with react-navigation and i can slide the drawer as well.
Now i want to set a button can open the drawer , but i find that my this.props.navigation is undefined from console.log(this.props.navigation).
So it will cause the undefined error if i try to use
<Button transparent onPress={() =>
{this.props.navigation.navigate('DrawerOpen')}>
<Icon name='menu' />
</Button>
How do i fix the error ? Any help would be appreciated.
I create my Drawer with a component like this:
import React, { Component } from 'react';
import { Image, ScrollView } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
class MyDrawer extends Component {
render() {
const TheDrawer = DrawerNavigator({
PageOne: {
screen: PageOne,
navigationOptions: {
drawerLabel: 'It\s page One',
drawerIcon: () => (
<Image source={require('../img/nav_icon_home.png')} />
),
},
},
PageTwo: {
screen: PageTwo,
navigationOptions: {
drawerLabel: 'It\'s page Two',
drawerIcon: () => (
<Image source={require('../img/nav_icon_home.png')} />
),
},
},
}, {
drawerWidth: 300,
contentComponent: props => <ScrollView>
<DrawerItems {...props}
activeTintColor='#008080'
activeBackgroundColor='#EEE8AA'
inactiveTintColor='#20B2AA'
inactiveBackgroundColor='#F5F5DC'
style={{ backgroundColor: '#F5F5DC' }}
labelStyle={{ color: '#20B2AA' }}
/>
</ScrollView>
});
return (
<TheDrawer />
);
}
};
export default MyDrawer;
Use MyDrawer in App.js: (Undefined error is over here)
import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { TabNavigator, DrawerNavigator } from 'react-navigation';
import MyDrawer from './screens/MyDrawer';
import { Container, Header, Button, Text, Icon, Left, Right, Title, Body } from 'native-base';
//style={[styles.icon, { tintColor: tintColor }]}
export default class App extends React.Component {
render() {
// it shows undefined
console.log(this.props.navigation);
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => { alert('test') }}>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>I am Title Man</Title>
</Body>
<Right />
</Header>
<MyDrawer />
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
To control TheDrawer navigator from App component, you need to store the ref of TheDrawer to a service, and dispatch actions from that service.
class MyDrawer extends Component {
// ...
render(): {
//...
return (
<TheDrawer
ref={navigatorRef => {
NavigatorService.setContainer(navigatorRef);
}}
/>
);
}
}
Then use NavigatorService.navigate('DrawerOpen') to open the drawer. For more details, you can see this