Develop Reference

TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')

I want to Create a Global Header that can call the Navigation Drawer
My main code is like this :
import * as React from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList,DrawerItem, } from '#react-navigation/drawer';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Header from './components/Headertest';
function Screen1() {
return (
<View>
<View><Text>Screen1</Text></View>
</View>
);
}
function Screen2() {
return (
<View>
<View><Text>Screen2</Text></View>
</View>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Screen1" component={Screen1} />
<Drawer.Screen name="Screen2" component={Screen2} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Header />
<MyDrawer />
</NavigationContainer>
);
}
And my Header Code is like this:
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
class Header extends React.Component {
render() {
return(
<View style={{flexDirection: 'row', height:50, backgroundColor:'#12415e', marginTop: 25 }}>
<View style={{flex: 1, justifyContent: 'center', alignItems:'center',flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
<Icon style= {{color: 'white'}} name='bars'/>
</TouchableOpacity>
</View>
</View>
)
}
}
export default Header;
But instead an error appears like this:
TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')
What's wrong with my code?

The <Header /> component is not inside a Navigator, so it doesn't have access to the navigation props. Make the <Header /> component a functional component and use the useNavigation() hook.
More details here: https://reactnavigation.org/docs/connecting-navigation-prop

react-native-navigation giving error "undefined is not an object (evaluating '_this.props.navigation.navigate')"

I'm trying to navigate to the home page from login page but my login-form is in another folder named "component", When I'm navigating from the login page using touchableOpacity it is working, But when I'm doing same thing from login-form component it is giving me an error. Can someone tell me what I'm doing wrong.
Here is the code which I'm trying to perform.
code of Login.js
import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';
type Props = {};
export default class Login extends Component<Props> {
static navigationOptions = {
header: null
}
render() {
return (
<ScrollView>
<View>
<LoginForm/>
</View>
<View>
<Text> Skip login and goto</Text>
<Text onPress={()=>this.props.navigation.navigate('Home')}>
Home
</Text>
</View>
</ScrollView>
);
}
}
code of LoginForm.js
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
type Props = {};
export default class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
here is the screenshot of error:
Error when navigating to page in another folder
Please help me to get out of this error. Thanks in advance. :)

You can use withNavigation or you should pass navigation as a props to child component.
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import { withNavigation } from 'react-navigation';
type Props = {};
class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
export default withNavigation(LoginForm);

In the end of your LoginForm.js you need to put export {LoginForm};
If only this not work, try make your import like this: import {LoginForm} from '../components/LoginForm';

React native react-navigation variable inside other component

Inside my header component, there is a menu icon. When I press the icon, it should open the DrawerNavigation.
I already tried to add
const { navigate } = this.props.navigation;
But unfortunately, it doesn't fix the problem.
My header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
My home screen, where I import the header component:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header />
<Text>Home Screen</Text>
</View>
);
}
}
This error appears when the icon inside the header is pressed
How can I use the navigation inside the header component? Thanks in advance.
Update
Header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.header}>
<Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
Home screen:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header navigation={this.props.navigation} />
<Text>Home Screen</Text>
</View>
);
}
}
Error after update

You need to pass the navigation object to your header component like this
<Header navigation={this.props.navigation} />
Your header component now should be something like this
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
openDrawer() {
this.props.navigation.navigate('DrawerToggle');
}
}

Style is not passed down to Custom Component React Native

I have a Custom Button Component with this code
import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
const CustomBtn = ({props, text, onPress }) => (
<TouchableOpacity {...props} onPress={onPress}>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableOpacity>
);
CustomBtn = {
text: PropTypes.string,
onPress: PropTypes.func,
};
export default CustomBtn;
I want to override the styles (Margins, Paddings) of the Component in my view where I write
<CustomBtn style={styles.BtnMargin} onPress={this.handlePressLogin} text="Login" />
But my custom Button don't get the style. How to change the code for the custom btn to solve this?

You are using the stateless component wrong. If you look at the signature you can notice that it accepts props as an argument:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
In the line {...props} varibale props is undefined because it is the same as this.props.props in a normal component. What you really want to do is:
const CustomBtn = (props) => (
<TouchableOpacity {...props} onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.text}>{props.text}</Text>
</View>
</TouchableOpacity>
);

Stack Navigator in react native

I am using stack navigator to navigate between screen in my react native app. But it is giving me an error using this.props.navigation.navigate . kindly tell me what i am doing wrong here .
I am using react-native router-flux too in my app but for some purpose i need to use stack navigator as my app has home page and it shows some content of blog feed and onclicking read more it should open detailed view of only that specific blog feed in detailed page, therefore, for this purpose i am using stack navigator here .
Here is my code:
Home.js:
import React, { Component } from 'react';
import {
ActivityIndicator,
ListView,
Text,
StyleSheet,
View,
Button,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';
import {
Card,
CardItem,
Content,
Header,
Body,
Footer,
FooterTab,
Container,
Left,
Icon,
Right
} from 'native-base';
import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
count:0,
count1:0
}
}
componentDidMount() {
return fetch('http://www.cardory.co.uk/jan/json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.items),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 80}}>
<ActivityIndicator />
</View>
);
}
return (
<Container style={{flex: 1, paddingTop: 60}} >
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{rowData.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={{marginLeft:10,marginRight:10}}>
<FitImage source={{uri: GetImage(rowData.content_html)}}/>
<HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
</Content>
</CardItem>
<CardItem>
<Left>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('Detail')}>
<Text style={styles.ReadMore}>
Read more
</Text>
</TouchableOpacity>
</Left>
<Right>
<Text style={styles.Time}>
<Icon name="time" style={{color:'#483D8B'}}/>
<TimeAgo time= {rowData.date_published}/>
</Text>
</Right>
</CardItem>
</Card>
}
/>
</Container>
);
}
}
const styles=StyleSheet.create({
textHeading:{
fontSize:20,
marginTop:20
},
titleHeading:{
fontSize:20,
fontWeight:'bold',
color:'black',
alignItems:'center',
},
ReadMore:{
color:'#483D8B',
fontSize:15,
fontWeight:'bold'
},
Time:{
color:'#483D8B',
alignSelf:'stretch'
},
});
Navigation.js:
import React,{Component} from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Home from './Home';
import Info from './Info';
import Details from './Details';
import Register from './Register';
const Navigation = StackNavigator({
Home:{screen: Home},
Info:{ screen: Info},
Details:{ screen: Details},
Register:{ screen: Register}
});
And my aim is on cliking read more it should open only that specific blog feed any help would be appreciated. Thanks in advance!

in onPress callback, this may be changed, so the value of this.props.navigation may be different to your expect. you should use a variable to save navigation and avoid use this in callback. see my code below.
render() {
const {navigation} = this.props;
...
<TouchableOpacity onPress={() => navigation.navigate('Detail')}>
...
}

I believe what #Harlan is asking for is something like:
import AppNavigator from './Navigation.js'
class App extends Component {
render(){
return(
<View>
<AppNavigator/>
</View>
)
}
}
AppRegistry.registerComponent( 'app', () => App );
And he probably has a point since you are not exporting your navigator in Navigation.js. Without something like the above code, then your components will not have navigation in their props.