Develop Reference

React Native: Passing navigation route as props into dynamically rendered component

I am building an app in which several of the screens have dynamically rendered cards that are mapped to an array of objects called ENTRIES. Each one of these cards can be pressed to navigate to a corresponding screen, however, I cannot seem to get the navigation to work.
I am passing is the screen value from ENTRIES as props from the Settings.js screen into the ClickableCard component, which then gets passed into the TouchableOpacity onClick as this.props.navigation.navigate(screen).
However I keep getting the following error TypeError: undefined is not an object (evaluating '_this3.props.navigation.navigate')
Here is an example of the code below:
App.js File
import React from 'react;
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import Home from './src/screens/Home';
import SettingsScreen from './src/screens/SettingsScreen';
import PrivacyScreen from './src/screens/PrivacyScreen';
import NotificationsScreen from './src/screens/NotificationsScreen';
import SoundsScreen from './src/screens/SoundsScreen';
import ThemeScreen from './src/screens/ThemeScreen';
const PrivacyStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();
const Tabs = createMaterialBottomTabNavigator();
const TabNavigator = () => {
return (
<Tabs.Navigator
initialRouteName="Home"
<Tabs.Screen
name="Home"
component={HomeStack}
/>
Tabs.Screen
name="Settings"
component={SettingsStack}
children={this.SettingsStack}
</Tabs.Navigator>
)
}
const AuthStack = () => (
<AuthStack.Navigator>
<AuthStack.Screen
name="Auth"
component={Auth}
/>
</AuthStack.Navigator>
);
const SettingsStackScreen = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen
name="Settings"
component={Settings}
/>
<SettingsStack.Screen
name="Privacy"
component={PrivacyStack}
/>
<SettingsStack.Screen
name="Theme"
component={ThemeScreen}
/>
<SettingsStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
<SettingsStack.Screen
name="Sound"
component={SoundsScreen}
/>
</SettingsStack.Navigator>
);
const PrivacyStack = () => (
<PrivacyStack.Navigator>
<PrivacyStack.Screen
name="Privacy"
component={PrivacyScreen}
/>
<PrivacyStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
</PrivacyStack.Navigator>
);
const App = () => {
return (
<NavigationContainer ref={navigationRef}>
<MainStack.Navigator>
<MainStack.Screen name="Tabs" component={TabNavigator} />
<MainStack.Screen
name="Auth"
component={AuthStack}
options={{gestureEnabled: false}}
/>
</MainStack.Navigator>
</NavigationContainer>
)
}
Settings.js File
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
import ClickableCard from './ClickableCard'
export default class Settings extends Component {
render(screen, index) {
return (
<ScrollView>
{ENTRIES.map((entry, index) => (
<ClickableCard screen={entry.screen} key={entry.index}/>
))}
</ScrollView>
)
}
export default Settings
ClickableCard.js Component
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
export default class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const {
screen,
key
} = this.props
return (
<TouchableOpacity
key={key}
onPress={() => this.props.navigation.navigate(screen)}>
</TouchableOpacity>
)
}
}
entries.js File
import React from 'react';
export const ENTRIES = [
{
name: "Theme",
screen: "ThemeScreen",
},
{
name: "Sounds",
screen: "SoundsScreen",
},
{
name: "Notifications",
screen: "NotificationsScreen",
},
]

You are trying to access navigation outside the navigation stack.
If you are using a functional component you can go with the useNavigation hook but as this is a class based component you will have to send the navigation as a prop or you can do the below as suggested in the documentation
import { useNavigation } from '#react-navigation/native';
class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const { screen, key } = this.props;
return (
<TouchableOpacity
key={key}
onPress={() =>
this.props.navigation.navigate(screen)
}></TouchableOpacity>
);
}
}
const ClickableCardWithNavigation= (props) {
const navigation = useNavigation();
return <ClickableCard {...props} navigation={navigation} />;
}
export default connect(ClickableCardWithNavigation)(TodoList)

Trying to access route.params in react native stack navigator v5

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!

How to implement details screen that dynamically displays detail of pokemon when a user presses on a picture in react native?

So I have built a pokemon application that would display pokemon with their images and details. On the homescreen, I have it so that the first 20 pokemon are shown as a preview. Then if the user wants to learn more about the pokemon, they can press on the pokemon and it would bring the user to the "PokeDetails" screen. However, when I press on the pokemon, it brings me to the "PokeDetails" page but the page is blank. Except for the text that I explicitly render from the "PokeDetails" screen. I have the code for both screens below. Any help is appreciated. Thank you
//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";
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
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate("PokeDetails", {item} )}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name} item={item} />
</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 =({name, imageUrl, detail, route})=> {
return(
<View style={GlobalStyles.container}>
<Text>This text is written expilictly</Text>
<Text>{route.params.item}</Text>
</View>
)
}
export default PokeDetails;
// Root.js
import React from "react"
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home";
import PokeDetails from "../screens/PokeDetails";
import { NavigationContainer } from '#react-navigation/native';
const Root =() => {
const Stack = createStackNavigator();
return(
<Stack.Navigator>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="PokeDetails" component={PokeDetails}/>
</Stack.Navigator>
)
}
export default Root;
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from "#react-navigation/drawer";
import About from "./screens/About";
import Root from "./Route/Root";
import PokeDetails from "./screens/PokeDetails"
const App =()=> {
const Drawer = createDrawerNavigator();
return(
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Root}/>
<Drawer.Screen name="About" component={About}/>
</Drawer.Navigator>
</NavigationContainer>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
export default App;

I don't know if i understood your question. You already pass an item props to your PokeDetails component from your Homescreen, but there is no item in the props your receive in it. just add it and i guess you will access to your data and will be able to display it:
const PokeDetails =({name, imageUrl, detail, item})=> {
return(
<View style={GlobalStyles.container}>
<Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
<Text style={GlobalStyles.pokeText}>{name}</Text>
<Text>This text is explicitly written</Text>
// add your stuff here...
<Text>{item.something}</Text>
</View>
)
}
By the way, since you already have the item prop, you can remove the name which already comes from item :)

How to add drawer in react native?

Hello I have a simple app and i want to add a drawer to him I use react-navigation 4x and use react-navigation-drawer to implement Drawer in my app
I used it before sperate drawer in a single package and it's worked fine
but when I use the new package I got this 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.
although I export my screen
here is Code
**navigator.js**
import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {
createDrawerNavigator,
NavigationDrawerStructure,
} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import ForgetPassword from '../screens/ForgetPassword';
import Home from '../screens/Home';
import Splash from '../screens/Splash';
const AuthStackNavigator = createStackNavigator({
Authloading: {
screen: Splash,
navigationOptions: {
header: null,
},
},
});
const HomeStack = createStackNavigator({
HomeScreen: {
screen: Home,
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerRight: (
<TouchableOpacity
onPress={() => navigation.navigate('Notifications')}
style={{margin: 10}}>
<Icon name="ios-notifications" size={28} color="#1DA1F2" />
</TouchableOpacity>
),
}),
},
});
const DrawerNavigator = createDrawerNavigator({
HomeDrawer: {
screen: HomeStack,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
},
},
});
const Navigations = createSwitchNavigator({
// Authloading: Splash,
Auth: AuthStackNavigator, // the Auth stack
App: DrawerNavigator, // the App stack,
});
const Navigator = createAppContainer(Navigations);
export default Navigator;
**Home.js**
//import liraries
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
// create a component
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
//make this component available to the app
export default Home;
**App.js**
import React, {Component} from 'react';
import Navigator from './src/navigations/navigator';
class App extends Component {
render() {
return <Navigator />;
}
}
export default App;
Edit
i just think NavigationDrawerStructure it's exports from react-native-drawer so that's my bad :)
so here is the component name as NavigationDrawerStructure
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
//Structure for the navigatin Drawer
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={this.toggleDrawer}>
<Icon
name="ios-menu"
size={40}
style={{margin: 10}}
color="#1DA1F2"
/>
</TouchableOpacity>
</View>
);
}
}
OR just add a button for a toggle in heder left inside Home stack like this
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon
name="ios-menu"
size={40}
style={{margin: 10}}
color="#1DA1F2"
/>
</TouchableOpacity>
)
})

Import is invalid. it don't have these objects inreact-navigation-drawer
import { createDrawerNavigator } from 'react-navigation-drawer';
import NavigationDrawerStructure from 'your file path'
instead
import {
createDrawerNavigator,
NavigationDrawerStructure,
} from 'react-navigation-drawer';

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.