Get params from other screen in React Native - reactjs

Question

My React Js skills are very basic,What I want to get is when I click on a category, I show a list of posts of the category selected in a new screen in this case is PostsScreen.
The problem is that i get the itemId null.
I don't know what i'm doing wrong.
These are my screens and the routes component
Categories Screen
import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator, StackNavigator } from 'react-navigation';
import{Dimensions, Button, View, SafeAreaView, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';
export default class WGoals extends Component {
static navigationOptions = {
title: 'Categories'
};
navigateToScreen = (route, params) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route,
params: params
});
this.props.navigation.dispatch(navigateAction);
}
constructor(props)
{
super(props);
this.state = {
isLoading: true,
}
}
render() {
return (
<Container style={styles.background_general}>
<TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '1')} >
<Text>Category 1</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '2')} >
<Text>Category 2</Text>
</TouchableOpacity>
</Container>
);
}
}
Posts Screen
import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator, StackNavigator } from 'react-navigation';
import{Dimensions, View, SafeAreaView, FlatList, ActivityIndicator } from 'react-native';
export default class Posts extends Component {
static navigationOptions = {
title: 'Posts'
};
render() {
const { params } = this.props.navigation.state;
const itemId = params ? params.itemId : null;
return (
<Container style={styles.background_general}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
</Container>
);
}
}
Routes
import React from 'react';
import CategoriesScreen from '../screens/Categories';
import PostsScreen from '../screens/Posts';
import SideMenu from './SideMenu';
import {DrawerNavigator, StackNavigator} from 'react-navigation'
const navigationOptions = {
navigationOptions: {
headerStyle: {
backgroundColor: '#f39c12',
},
headerTitleStyle: {
textAlign: 'center',
alignSelf: 'center',
fontSize: 20,
color: '#fff',
fontWeight: 'bold'
}
}
};
const leftIcon = (navigation, icon) => <Icon
name={icon}
style={{marginLeft: 20}}
size={20}
color="white"
onPress={() => navigation.navigate('DrawerOpen')}
/>;
const rightIcon = (navigation, icon) => <Icon
name={icon}
style={{marginLeft: 20}}
size={30}
color="white"
onPress={() => navigation.navigate('CategoriesScreen')}
/>;
const CategoriesScreenStack = StackNavigator (
{
Categories: {
screen: CategoriesScreen,
navigationOptions: ({navigation}) => ({
drawerIcon: ({tintColor}) => (<Icon name="home" size={24} style={{color: '#f39c12'}} />),
headerLeft: leftIcon(navigation, 'menu')
})
}
},
navigationOptions
);
const PostsScreenStack = StackNavigator(
{
PostsScreen: {
screen: PostsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: ({ tintColor }) => (<Icon name="user" size={24} style={{ color: tintColor }} />),
headerLeft: leftIcon(navigation, 'menu')
})
}
},
navigationOptions
);
export default DrawerNavigator({
CategoriesScreen: {
screen: CategoriesScreenStack
},
PostsScreen: {
screen: PostsScreenStack
},
}, {
contentComponent: SideMenu,
drawerWidth: width * .7,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});

Answer 1

You want to pass itemId in an object to navigateToScreen, since you are accessing params as an object (params.itemId) in WorkoutsGoalsList, currently it is undefined.
Also, onPress expects a function reference. As it is now, you are actually calling the function so this.navigateGateToScreen will be called on every render. Check out the bind documentation, bind allows you to create a new function with a specific list of arguments:
render () {
return (
<Container style={styles.background_general}>
<TouchableOpacity
onPress={this.onPress.bind(this, '1')}
>
<Text>Category 1</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onPress.bind(this, '2')}
>
<Text>Category 2</Text>
</TouchableOpacity>
</Container>
);
};
onPress = (id) => {
this.navigateToScreen('PostsScreen', { itemId: id })
};
You also do not need to curry your navigateToScreen function:
navigateToScreen = (route, params) => { // remove curry here
const navigateAction = NavigationActions.navigate({
routeName: route,
params: params,
});
this.props.navigation.dispatch(navigateAction);
};
Your props will look something like this:
this.props = {
navigation: {
state: {
params: {
itemId: '1',
}
}
}
};
It's less than optimal to bind in render because a new function will be created on every render call. A better way to structure the code is to create a dedicated component and pass an itemId and onPress function:
WGoals
export default class WGoals extends Component {
static navigationOptions = {
title: 'Categories',
};
navigateToScreen = (route, params) => {
const navigateAction = NavigationActions.navigate({
routeName: route,
params: params,
});
this.props.navigation.dispatch(navigateAction);
};
constructor(props) {
super(props);
this.state = {
isLoading: true,
};
}
render() {
return (
<Container style={styles.background_general}>
<Category name='Category1' onPress={this.navigateToScreen} itemId='1' />
<Category name='Category2' onPress={this.navigateToScreen} itemId='2' />
</Container>
);
}
}
Category
export default class Category extends Component {
render () {
const { name } = this.props;
return (
<TouchableOpacity
onPress={this.handlePress}
>
<Text>{name}</Text>
</TouchableOpacity>
);
}
handlePress = () => {
const { itemId, onPress } = this.props;
onPress('PostsScreen', { itemId: itemId });
}
}
In PostsScreens, you need to render itemId in a string or you can render the value of the variable by wrapping it in curly brackets ({itemId}). Below, I'm rendering it as a string and inserting the value of itemId into the string. Check out the template literal docs for more info on the syntax:
export default class Posts extends Component {
static navigationOptions = {
title: 'Posts',
};
render() {
const { params } = this.props.navigation.state;
const itemId = params ? params.itemId : null;
return (
<Container style={styles.background_general}>
<Text>'Details Screen'</Text>
<Text>`itemId: ${itemId}`</Text>
</Container>
);
}
}