I'm using Drawer Navigator from React Navigation but after creating the custom component, the navigation doesn't work. There is no issue regarding importing.
Here is the Code:-
import React, { Component } from 'react';
import {DrawerNavigator} from 'react-navigation';
import {StyleSheet,Text,View,ScrollView,Image,Dimensions,TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from './components/HomeScreen/HomeScreen';
import Home from './components/Home/Home';
import Sample from './Sample';
const{height,width}=Dimensions.get('window');
const CustomDrawer = (props) => {
return(
<View>
<View style={styles.list}>
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Sample')}>
<View style={styles.listElements}>
<Ionicons name="md-home" size={25} color={'black'} style={styles.listIcons} />
<Text style={styles.listText}>Home</Text>
</View>
</TouchableOpacity>
</View>
</View>
)
}
const Drawer = DrawerNavigator({
HomeScreen: {
screen: HomeScreen
},
Home:{
screen:Home,
},
Sample:{
screen:Sample,
}
},
{
drawerWidth: 350,
contentComponent:CustomDrawer
});
export default class App1 extends React.Component {
render() {
return <Drawer />;
}
}
It throws an "Undefined is not an object (Evaluating '_this.props.navigation')" error clicking the view.
Related
I have the following code
Sidebar.js
import React from 'react'
import {View,Text,StyleSheet,Image,TouchableHighlight} from 'react-native';
import {Dimensions} from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
// const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
const logo = require('../assets/logo1.png');
export default class Sidebar extends React.Component {
constructor(props){
super(props);
this.handleNavigation = this.handleNavigation.bind(this);// you should bind this to the method that call the props
}
handleNavigation(){
this.props.navigation.navigate('QuoteDay');
}
render() {
return (
<View style={styles.navigationContainer}>
<View style={styles.logoContainer}>
<Image style={styles.logo}
source={logo} />
</View>
</TouchableHighlight>
<TouchableHighlight
activeOpacity={0.6}
underlayColor="#ffffff"
onPress={() => alert('Pressed!')}>
<Text style={styles.listitem}> <Feather name="edit" size={30} color="#273746"/> Quotes </Text>
</TouchableHighlight>
<TouchableHighlight
activeOpacity={0.6}
underlayColor="#ffffff"
onPress={this.handleNavigation}>
<Text style={styles.listitem}> <Feather name="sunrise" size={30} color="#273746"/> Quote of the Day </Text>
</TouchableHighlight>
</View>
</View>
)
}
}
App.js
import React from 'react';
import {DrawerLayoutAndroid} from 'react-native';
import {AppNavigator} from './screens/Navigation';
import Sidebar from './screens/Sidebar';
export default class App extends React.Component {
render(){
const navigationView = (
<Sidebar/>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition="left"
statusBarBackgroundColor="#F0B27A"
renderNavigationView={() => navigationView}
>
<AppNavigator />
</DrawerLayoutAndroid>
)
}
}
Navigation.js
import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { HomeScreen } from './Home';
import { ModalScreen } from './Modal';
import { QuoteScreen } from './QuoteDay';
const { Navigator, Screen } = createStackNavigator();
const HomeNavigator = () => (
<Navigator mode="modal" headerMode='none'>
<Screen name='Home' component={HomeScreen} />
<Screen name='MyModal' component={ModalScreen}/>
<Screen name='QuoteDay' component={QuoteScreen}/>
</Navigator>
);
export const AppNavigator = () => (
<NavigationContainer>
<HomeNavigator/>
</NavigationContainer>
);
But it is giving me the following error
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
whenever I try to navigate from Sidebar.js to any other screen.
How should could I go about solving this sort of this problem.
The problem is that Sidebar is not rendered inside a screen in a navigator and does therefore not receive the navigation prop which explains the error you're getting.
I recommend you to use react navigation's Drawer (https://reactnavigation.org/docs/drawer-navigator/) instead of DrawerLayoutAndroid. You can still use your custom Sidebar component layout this way by passing Sidebar to the drawerContent prop of react navigation's Drawer navigator.
Navigation.js
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import Sidebar from './path';
// Other imports...
const Home = createStackNavigator();
const Main = createDrawerNavigator();
const MainNavigator = () => {
return (
<Main.Navigator
drawerStyle={{width: 240}}
drawerContent={(props) => <Sidebar {...props} />}>
<Main.Screen name="HomeNavigator" component={HomeNavigator} />
</Main.Navigator>
);
};
const HomeNavigator = () => (
<Home.Navigator mode="modal" headerMode="none">
<Home.Screen name="Home" component={HomeScreen} />
<Home.Screen name="MyModal" component={ModalScreen} />
<Home.Screen name="QuoteDay" component={QuoteScreen} />
</Home.Navigator>
);
export const AppNavigator = () => (
<NavigationContainer>
<MainNavigator />
</NavigationContainer>
);
App.js
// Be sure to import StatusBar from 'react-native' for setting the status bar color
export default class App extends React.Component {
componentDidMount() {
StatusBar.setBackgroundColor('#F0B27A');
}
render() {
return <AppNavigator />;
}
}
So the approach I've taken here is to create a Drawer Navigator and to make this the main navigator. The HomeNavigator is a screen of this MainNavigator. This way every screen inside MainNavigator has access to the drawer and the navigation prop; In this case that means HomeNavigator and every screen it has.
I tried to give an onPress action to one of my custom button made with TouchableOpacity. It is supposed to navigate me to another screen. I did how exactly i did at other screens but this time it doesn't work and don't get any error as well. On the Navigation.js, when i give initialRouteName manually, screen appears, but when i click on the button, nothing happens.
Home Screen:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
Navigation JS:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: IntroScreen,
Home: HomeScreen,
Baslica: BaslicaScreen
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
You need to wrap your components between AppContainer tags in your root component similar with below so that the navigation object become aware of the react-navigation context.
import AppContainer from './navigation'; // your navigation.js file
export default class RootApp extends React.Component {
...
render() {
return <AppContainer>
// the rest of your other components here
</AppContainer>
}
}
you Should use navigation param like this:
this.props.navigation.navigate("yourScreen", { ParamName: Valu });
Edit Your code like This:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
and Edit this code like that :
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: {screen:IntroScreen},
Home: {screen:HomeScreen},
Baslica: {screen:BaslicaScreen},
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
I have two components for my project, and I have gone through all the steps for react navigation as follow:
// App.js
import React from 'react';
import Main from './app/componenets/Main'
import details from './app/componenets/details'
import { createStackNavigator, createAppContainer } from 'react-navigation'
const mainNavigator = createStackNavigator(
{
MainScreen: Main,
detailsScreen: details,
},
{
initialRouteName :'MainScreen'
}
);
const AppContainer = createAppContainer(mainNavigator);
export default class App extends React.Component{
render() {
return(
<AppContainer />
);
}
}
Then I have my Main.js which I have a method as follow:
import React from 'react';
import {
StyleSheet ,
Text,
View,
} from 'react-native'
import Note from './Note'
import detail from './details'
import { createStackNavigator, createAppContainer } from "react-navigation";
export default class Main extends React.Component {
static navigationOptions = {
title: 'To do list',
headerStyle: {
backgroundColor: '#f4511e',
},
};
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: ''
}
}
render() {
let notes = this.state.noteArray.map((val,key) => {
return <Note key={key} keyval={key} val={val}
goToDetailPage= {() => this.goToNoteDetail(key)} />
});
const { navigation } = this.props;
return(
<View style={styles.container}>
<View style={styles.footer}>
<TextInput
onChangeText={(noteText) => this.setState({noteText})}
style={styles.textInput}
placeholder='What is your next Task?'
placeholderTextColor='white'
underlineColorAndroid = 'transparent'
>
</TextInput>
</View>
<TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
<Text style={styles.addButtonText}> + </Text>
</TouchableOpacity>
</View>
);
}
//This method is declared in my Note.js
goToNoteDetail=(key)=>{
this.props.navigation.navigate('detailsScreen')
}
}
//Styles which I didn't post to be short in code here
But when I try to do the navigation I get this error:
'undefined is not and object(evaluating 'this.props.val.date')
Do I need to pass the props in a way? or should I do anything else? I am new to React native and confused!
in order to access this.props make arrow function or bind the function in constructor.
goToDetail=()=>{
this.props.navigation.navigate('detailsScreen')
}
Just remove createAppContainer
const AppContainer = mainNavigator;
and tell me what react-navigation that you work with
I am new to React Native and implementing react-navigation to understand this concept but getting error.
I searched for it through different links as The component for route 'Feed' must be a React component and I changed import and export according to the answer of this question but same error is still there. My code as below,
MainScreenNavigation.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
// import HomeScreen from '../screens/Home/HomeScreen';
// import Profile from '../screens/Profile/Profile'
export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
Splash: Splash,
Main: SigninNavigator,
}, {
initialRouteName: 'Splash'
},
)
);
const SigninNavigator = createSwitchNavigator({
Signin: Signin,
// Home: HomeNavigator,
}, {
initialRouteName: 'Signin'
},
);
// const HomeNavigator = createStackNavigator({
// Profile: Profile,
// HomeScreen: HomeScreen,
// },
// {
// initialRouteName: 'HomeScreen'
// }
// );
App.js
import React, {Component} from 'react';
import {MainScreenNavigation} from "./src/navigations/MainScreenNavigation";
class App extends Component {
render() {
return (
<MainScreenNavigation />
);
}
}
export default App;
Splash.js
import React from 'react';
import {ImageBackground, StatusBar, View, Text, TouchableOpacity} from 'react-native';
import { Logo } from '../../components/Logo';
import { styles } from './styles';
class Splash extends React.Component{
gotoSigninScreen = () => {
this.props.navigation.navigate("Main");
};
render(){
return(
<ImageBackground
source={require('../../assets/splash.png')}
style={styles.imageBackgroundStyle}>
<StatusBar backgroundColor='#3F91D6'
barStyle='light-content' />
<View style={styles.container}>
<View style={styles.upperBody}>
<View style={styles.containerInside}>
<Logo />
<Text style={styles.upperBodyText}>Track, Drive & Deliever</Text>
</View>
</View>
<View style={styles.lowerBody}>
<TouchableOpacity style={styles.buttonContainer}
onPress={() => navigate('Signin')}>
<Text style={styles.buttonText}>Get Started</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
)
}
}
export default Splash;
Signin.js
import React from 'react';
import {TouchableOpacity, Text, TextInput, View, KeyboardAvoidingView} from 'react-native';
import {styles} from './styles';
import {Logo} from "../../components/Logo";
import {hintColor} from "../../prefabs/colors";
class Signin extends React.Component {
gotoHomeScreen = () => {
this.props.navigation.navigate("Home");
};
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Logo/>
<View style={styles.formContainer}>
<TextInput style={styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Email'
placeholderTextColor={hintColor}/>
<TextInput style={styles.input}
returnKeyType="go"
ref={(input) => this.passwordInput = input}
placeholder='Password'
placeholderTextColor= {hintColor}
secureTextEntry/>
<TouchableOpacity style={styles.buttonContainer}
// onPress={this.gotoHomeScreen}
>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
export default Signin;
Whats actually going wrong with this code and how to fix it?
I get rid of this error by changing my MainScreenNavigation.js as follows
MainScreenNavigation.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
import HomeScreen from '../screens/Home/HomeScreen';
import Profile from '../screens/Profile/Profile';
const HomeNavigator = createStackNavigator({
Profile: Profile,
HomeScreen: HomeScreen,
},
{
initialRouteName: 'HomeScreen'
}
);
const SigninNavigator = createSwitchNavigator({
Home: HomeNavigator,
Signin: Signin,
}, {
initialRouteName: 'Signin'
},
);
export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
Main: SigninNavigator,
Splash: Splash,
}, {
initialRouteName: 'Splash'
},
)
);
returning this error while tying to navigate using switchnavigation.
i have tried removing this. props then returns undefined 'navigation'.
import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'react-navigation';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import layout from '../../constants/LayoutStyle'
import QuoteScreen from './QuoteScreen';
const HomeScreen = () => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top: hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
const RootStack = createSwitchNavigator(
{
Home: HomeScreen,
Quote: QuoteScreen,
}
);
const AppContainer = createAppContainer(RootStack);
export default class app extends React.Component {
render() {
return <AppContainer />
}
}
expected to complete navigation properly
HomeScreen is a functional component and hence you should not use this.props.navigation, just say props.navigation.
And If you want to use props inside the function component, then use should pass props as an argument to that functional component. Like this =>
const HomeScreen = (props) => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top:
hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
If this does not work then pass navigation as props to HomeScreen component wherever u use, Like this =>
<HomeScreen
navigation = {this.props.navigation} // or navigation = {props.navigation}, if it is functional component
/>