StackNavigator this.props.navigation cached - react-native

Question

I am using a FlatList and within it I am doing:
let pressed = () => {
this.props.navigation.navigate('DetailScreen', {item: item});
}
then in render() on the DetailScreen I am doing: this.props.navigation.getParam('item', null)
so the first item I click on in the list, shows the correct item in the DetailScreen, but then if I go back and click on any other item then this.props.navigation.getParam('item', null) always returns the same item. Its like it does not get changed after the first select.
List.js
_renderRow({item}){
let pressed = () => {
this.props.navigation.navigate('Details', {item: item});
}
let actualRowComponent =
<View style={css.list.row}>
<View style={css.list.rowContainer}>
<Text style={css.list.rowSymbol}>{item.sym}</Text>
<Text style={css.list.rowTitle}>{item.title}</Text>
</View>
<Button title={"$"+item.amount}
onPress={pressed}
backgroundColor='#EE7600'
buttonStyle={{borderRadius: 5}}
/>
</View>;
let touchableWrapperIos =
<TouchableHighlight
activeOpacity={0.5}
underlayColor="#fff"
onPress={pressed}
>
{actualRowComponent}
</TouchableHighlight>;
let touchableWrapperAndroid =
<TouchableNativeFeedback
useForeground={true}
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
onPress={pressed}
>
{actualRowComponent}
</TouchableNativeFeedback>;
if (require('react-native').Platform.OS === 'ios') {
return touchableWrapperIos;
}
else return touchableWrapperAndroid;
}
render(){
return (
<View style={css.baseStyles.baseContainer}>
<View style={{justifyContent: 'center',alignItems: 'center', marginBottom: 40, marginTop: 50}}>
</View>
<SectionWidget title="Items" >
<FlatList
style={css.baseStyles.flatListContainer}
data={this.items}
renderItem={this._renderRow}
keyExtractor={(item,index) => item.id.toString()}
/>
</SectionWidget>
</View>
);
}
Detail.js
render(){
const item = this.props.navigation.getParam('item', null);
console.log(item.title)
return (
<View style={css.baseStyles.container}>
<ScrollView>
<View style={{marginTop: 40, marginBottom: 60, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text style={css.baseStyles.priceText}>${item.amount}</Text>
<Text style={css.baseStyles.subText}> +$0.50 </Text>
</View>
<Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10 }} />
<View style={{marginTop: 60, marginBottom: 30, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text style={css.baseStyles.titleText}>{item.title}</Text>
<Text style={css.baseStyles.descriptionText}>{item.summary}</Text>
</View>
<Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10 }} />
</ScrollView>
<View style={css.baseStyles.footerContainer}>
<Button title='Buy'
backgroundColor='#EE7600'
buttonStyle={{marginTop: 20, marginBottom: 20, borderRadius: 5, width: 150}}
/>
</View>
</View>
);
}

Answer 1

Since I've never used React Navigation before, I was misunderstanding its usage. In fact your problem seems a logic/usage one, which has a simple solution. Your intention is to have multiple Detail screen (I mean just a component, but multiple screen in the stack), not just one with different params. This makes a BIG difference! React Navigation provides an alternative method to navigation.navigate(), which is navigation.push(), that adds a stack to the 'history' of navigation and seems to be exactly what you're looking for.
So, what you have to do is to replace
this.props.navigation.navigate('Details', {item: item});
with
this.props.navigation.push('Details', {item: item});
You can read more (and better explained) about this on the official doc.
Let me know if this fits with your problem.

Answer 2

The issue I found was due to #autobind. If you use #autobind along with react-navigation, you will run into problems. So I removed #autobind and everything is working as expected.