I have been trying to create a touchable highlight that takes to me a new scene by using this.props.navigation.navigate for a react-native app. However, react native gives me an error that says undefined is not an object (evaluating '_this2.props.navigation'). Here is my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow(beer) {
return (
<View style={styles.row}>
<Image style = {styles.icon} source = {squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
}
Any ideas on how to get it fixed?
Although #justelouise is right and the
StackNavigator Definiton
part of the code would help, still, if you've navigated to this page using stack navigator then it's been added to the stick navigator already.
I think this.props.navigation is available under the render() method. If you want to use it in another method, then you have to pass it from render() to the method you want. Something like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow (beer, renderNavigation) {
return (
<View style={styles.row}>
<Image style={styles.icon} source={squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => renderNavigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
render () {
const navigation = this.props.navigation;
return (
<View>
{this.renderRow(BEER, navigation)}
</View>
)
}
}
If you are navigating to stackNavigator outside of render() then try this
static navigationOptions = ({ navigation })=>{
const { navigate } = navigation
return{
title: 'Header Text',
headerRight:(<Button
title="Settings" backgroundColor="rgba(0,0,0,0)" color="rgba(0,122,255,1)"
onPress={() =>navigate('settings')}
/>)
}
}
Related
I used This <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> to open other page, But when I click <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> in photos page, I got this error:
enter image description here
The code:
import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '#react-navigation/native';
const SplashScreen = ({navigation}) => {
const { colors } = useTheme();
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require('../assets/fmasdeco.png')}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[styles.footer, {
backgroundColor: colors.background
}]}
animation="fadeInUpBig"
>
<Text style={[styles.title, {
color: colors.text
}]}>Stay connected with everyone!</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<LinearGradient
colors={['#08d4c4', '#01ab9d']}
style={styles.signIn}
>
<Text style={styles.textSign}>Get Started</Text>
<MaterialIcons
name="navigate-next"
color="#fff"
size={20}
/>
</LinearGradient>
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
My page SignUpScreen.Js
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function SignUpScreen() {
return (
<View>
<Text>Hello</Text>
</View>
)
}
const styles = StyleSheet.create({})
Whenever You Navigate From Component which isn't in Your Navigation Container Your Navigation Props Is Undefined Your Splashscreen Component isn't in your Navigation Container May be it is a Child of Screen Thats why You Couldn't get Navigation Prop Pass navigation from from Parent Component where you rendered Splashscreen .
OR
You Should Use Use Navigation Hook Provided By React navigation To Navigation Between Screen from Outside of Navigation Container....
import { useNavigation } from '#react-navigation/native';
const someComponent = () => {
const navigation = useNavigation();
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<Text>Navigation To Sigin Screen</Text>
</TouchableOpacity>
}
Hope this would Help...
I am trying to access the props.route.params.data information from the react navigation route prop, however when I try to output it on the screen it just says TypeError: undefined is not an object(evaluating props.routes.params). I know I have correctly followed the path to that data object because I console.log it on the console and it outputs that data. However when I want to put put it on the user interface it gives me that error. Been searchong online but no one has the same issue, maybe because the way to get the params using react stack navigator v5 is by route.params, and v5 came outa couple of months ago. So I will post my code below along with the console.log screen, the error message, and also the object that I am picking from. Thank you!
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import About from "./screens/About";
import Home from "./screens/Home";
import PokeDetails from "./screens/PokeDetails"
import { createStackNavigator } from '#react-navigation/stack';
const App =()=> {
const Stack = createStackNavigator();
return(
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="PokeDetails" component={PokeDetails}/>
<Stack.Screen name="About" component={About}/>
</Stack.Navigator>
</NavigationContainer>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
export default App;
// Home.js
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View style={GlobalStyles.container}>
<View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello"})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
// PokeDetails.js
import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log(props)
console.log(props.route.params.data, "PROPSSSSSSSSSSS");
return(
<View style={GlobalStyles.container}>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
export default PokeDetails;
You are getting the following error because you are pokedetails in your home screen, you can get the data props only if you navigate to pokedetails screen, the thing you can do something like this:
change your Home.js like this:
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import PokeDetails from "./Pokedetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View>
<View>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello", imageUrl:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
Here iam just passing imageUrl also for reference purpose.
change your pokedetails.js some thing like this:
import React from "react";
import { View, Text , Image, Button} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log("props is",props);
if(props.navigation == undefined)
{
return(
<View>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.name}</Text>
</View>
)
}
else{
return(
<View>
<Image source={{uri: props.route.params.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
}
export default PokeDetails;
Here iam just adding a if condition to check whether the screen is loaded is navigated from another screen.
when the Homescreen loaded it will be something like this:
On clicking bulbassor you will be navigating to the pokedetails screen where here iam showing the details you are sending through navigation:
Hope this helps!
I have this component in react-native and when I press the button i need the whole view to be cloned.
How can I do it?
import React, { Component } from 'react';
import {
Platform, Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
render() {
return (
<View>
<TextInput
style={styles.input2}
placeholder="Registered addresses"
/>
<TouchableOpacity style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
</View>
);
}
}
export default AccountForm;
I'm assuming, you want to add one TextInput on tapping the Image. You can modify based on requirement.
import React, { Component } from 'react';
import {
Platform,
Text,
Image,
View,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
constructor() {
super();
this.state = {
count: 1,
};
this.addMore = this.addMore.bind(this);
}
addMore() {
this.setState({
count: ++this.state.count,
})
}
renderAddress() {
const elements = [];
for (let i = 0; i < this.state.count; i++) {
elements.push(
<TextInput key={i}
style={styles.input2}
placeholder="Registered addresses"
/>
);
}
return elements;
}
render() {
return (
<View>
{this.renderAddress();}
<TouchableOpacity onPress={this.addMore} style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
}
</View>
);
}
}
export default AccountForm;
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.
i am getting above mentioned error while running my code and have also searched about this error , i do understand the meaning of this error But i am not able to figure it out in my case.
Here is the code for index.android.js file :-
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import TabNavigatoro from './src/pages/TabNavigatoro';
export default class ReactNewsfeedDemo extends Component {
render() {
return (
<TabNavigatoro/>
);
}
}
AppRegistry.registerComponent('ReactNewsfeedDemo', () => ReactNewsfeedDemo);
Code for TabNavigatoro.js :-
import React, { Component } from 'react';
import {
AppRegistry,
Image
} from 'react-native';
import { Actions, ActionConst } from 'react-native-router-flux';
import logoImg from '../images/logo.png';
import eyeImg from '../images/eye_black.png';
import homeView from './homeView';
import profileView from './profileView';
import TabNavigator from 'react-native-tab-navigator';
export default class TabNavigatoro extends Component {
constructor(props){
super(props);
this.state={selectedTab:'home'}
}
render() {
return (
<TabNavigator selectedTab = {this.state.selectedTab}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={logoImg} />}
renderSelectedIcon={() => <Image source={logoImg} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={eyeImg} />}
renderSelectedIcon={() => <Image source={eyeImg} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
{profileView}
</TabNavigator.Item>
</TabNavigator>
);
}
}
Here is homeView.js code :-
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class homeView extends Component {
render() {
return (
<View style={styles.container} >
<Text style = {styles.description}>
This is Home View , Please click to confirm.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flex:1,
alignSelf : 'stretch',
justifyContent:'center',
},
description : {
fontSize:16,
color: '#ffffff',
textAlign:'center',
},
});
I found one link with same error but it was not answered :-
https://github.com/expo/react-native-tab-navigator/issues/130
please let me know what actually causing problem whey it's no picking {homeView} and {profileView} pages, why it's coming null ?
Appreciate!!!