React-navigation not always pass parameters to screens - reactjs

Question

I'm migrating my old project (from RN 0.57) to latest one (0.62.2), but I'm having some troubles with react-navigation v5.
I have one screen called "Race" where I have racers and their times. When user click in one specific racer, a new screen (called 'PersonalRank') are open with data from this particular racer.
This second screen takes tx_id as parameter to get data from redux/state. The problem is that not always this data is being passed to screen. I have made a little video to show the problem in simulator (the same happens on real smartphone). As you can see in log screen, the tx_i is correct while calling the new screen.....but is not always changing in the props of new screen.
This is the URL of demo video: https://youtu.be/pjhH6pOMRhs (1:55 minute video).
In the races list, I'm using this code to call the second screen (note console.log in first line):
return (
<ListItem onPress={() => { console.log("Navegando para o TXID:", tx_id); this.props.navigation.navigate("PersonalRank",{tx_id}); } } NoIndent style={{width: '100%', backgroundColor: 'white', marginTop: 0, paddingTop: 0, marginBottom: 0, paddingBottom: 5, marginLeft: 0, paddingLeft: 0, paddingRight: 0, marginRight: 0}}>
<Grid>
<Col size={10}>
<Row><Text style={{paddingLeft: 4}}>#{position}</Text></Row>
{temperature > 0 && settings.disp_temp == true &&
<Row><Text style={{fontSize: 10, paddingLeft: 4, color: temp_color, fontWeight: 'bold'}}>{temperature}ºC</Text></Row>
}
{speed > 0 &&
<Row><Text style={{fontSize: 10, paddingLeft: 4, fontWeight: 'bold'}}>{speed.toFixed(2)} Km/h</Text></Row>
}
</Col>
<Col size={90}>
<Row>
<Col size={67}><Text style={{alignSelf: 'flex-start', fontWeight: 'bold', fontSize: 14}}>{getPilotName(tx_id)} (ID:{tx_id})</Text></Col>
<Col size={33}><Text style={{fontSize: 10, alignSelf: 'flex-end', marginRight: 3}}>{translate('total_time',{...i18n_opt})}: {msToTime(total_time)}</Text></Col>
</Row>
<Row>
<Col><Text style={styles.itemHeaderText}>{translate('laps',{...i18n_opt})}</Text></Col>
<Col><Text style={styles.itemHeaderText}>{translate('last_lap',{...i18n_opt})}</Text></Col>
<Col><Text style={styles.itemHeaderText}>{translate('best_lap',{...i18n_opt})}</Text></Col>
<Col><Text style={styles.itemHeaderText}>{translate('best_time',{...i18n_opt})}</Text></Col>
<Col><Text style={[styles.itemHeaderText,styles.itemAlignRight, {marginRight: 5}]}>{translate('diff',{...i18n_opt})}</Text></Col>
</Row>
<Row>
<Col><Text style={styles.itemValueText}>{laps.length}</Text></Col>
<Col><Text style={[styles.itemValueText, {fontWeight: 'bold'}]}>{msToTime(last_time)}</Text></Col>
<Col><Text style={styles.itemValueText}>{best_lap}</Text></Col>
<Col><Text style={[styles.itemValueText, { color: '#90db18', fontWeight: 'bold' }]}>{msToTime(best_time)}</Text></Col>
<Col><Text style={[styles.itemValueText,styles.itemAlignRight, {marginRight: 5}]}>{diff}</Text></Col>
</Row>
{settings.show_estimate_pg &&
<Row>
<Col><ProgressBar style={styles.progress} progress={pg} width={null} /></Col>
</Row>
}
</Col>
</Grid>
</ListItem>
);
Now, in the PersonalRank screen, I'm getting tx_id in render() function...but sometime is doesn't work (even waiting for a while) (see video). The screen opens, but with the last opened tx_id.....sometimes it opens and after a few seconds, it changes.
render() {
const { pilots, settings } = this.props;
const { dispatchDelPilot } = this.props;
const tx_id = this.props.route.params.tx_id;
const name = getPilotName(tx_id);
const { dispatchDeleteLap, dispatchSplitLap } = this.props;
//console.log("ROUTE: ",this.props.route);
console.log("TX id (from props): ",tx_id);
const { race } = this.props;
let laps = [];
let pilot = "";
var laps_out = [];
var last_time = 0;
var fastest_time = 999999999;
var fastest_index = 0;
var last_speed = 0;
var total_time = 0;
for (var i = 0; i < race.length; i++) {
if (race[i].tx_id == tx_id) {
pilot = race[i].pilot;
laps = race[i].laps;
total_time = race[i].total_time;
break;
}
}
if (laps.length <= 0) {
//this.props.navigation.navigate("CurRace");
return <Text>No laps for this racer.</Text>;
}
let chart_values = [];
let chart_temperature_values = [];
let chart_labels = [];
let has_speed = false;
let has_bat = false;
//console.log("Laps: ",laps);
laps.map((item, index) => {
if (settings.show_pers_chart) {
chart_labels.push(index + 1);
chart_values.push(msToTime(item.time));
if ("temperature" in item) {
if (item.temperature > 0) {
}
}
}
if ("speed" in item) {
if (item.speed > 0) {
if (item.speed > last_speed) {
last_speed = item.speed;
}
has_speed = true;
}
}
if ("battery" in item) {
if (item.battery > 0) {
has_bat = true;
}
}
if (item.time > last_time) {
item.diff = "+" + msToTimeDiff(item.time - last_time);
item.diff_style = { color: "#ea2b12" };
last_time = item.time;
} else if (item.time < last_time) {
item.diff = "-" + msToTimeDiff(last_time - item.time);
item.diff_style = { color: "#12ea5a" };
last_time = item.time;
} else {
item.diff = "0";
last_time = item.time;
item.diff_style = null;
}
if (last_time < fastest_time) {
fastest_index = index;
fastest_time = last_time;
}
// Clear fastest style
item.fastest_style = null;
// Key
item.key = index.toString();
});
laps[0].diff = "0";
let has_temp = chart_temperature_values.length > 0 ? true : false;
laps[fastest_index].fastest_style = { color: "#12ea5a" };
const laps2 = laps;
const renderHiddenItem = (data, rowMap) => (
<View style={styles.rowBack}>
<Text>Left</Text>
<TouchableOpacity
style={[styles.backRightBtn, styles.backRightBtnLeft]}
onPress={() => {
this.setState({
...this.state,
visibleModal: true,
cur_tx_id: tx_id,
cur_lap: data.item.lap
});
}}
>
<MaterialCommunityIcons
name="arrow-split-vertical"
size={20}
color="#5e69d9"
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.backRightBtn, styles.backRightBtnRight]}
onPress={() => {
if (laps.length > 1) {
console.log("Data: ",data.item);
console.log("Apagando tx_id: ",tx_id,", Volta: ",data.item.lap,", Show alerts: ",settings.show_alerts);
dispatchDeleteLap(
tx_id,
data.item.lap,
settings.show_alerts
);
} else {
alert(
translate("cant_del_single_lap", { ...i18n_opt })
);
}
}}
>
<Icon active name="trash" size={20} />
</TouchableOpacity>
</View>
);
return (
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>{name}</Title>
</Body>
<Right>
<Button
transparent
onPress={() =>
this.props.navigation.navigate("RCharts", { tx_id })
}
>
<Icon type="MaterialCommunityIcons" name="chart-bar" />
</Button>
</Right>
</Header>
<Modal
isVisible={this.state.visibleModal === true}
animationIn={"slideInLeft"}
animationOut={"slideOutRight"}
>
{this._renderModalContent()}
</Modal>
<View style={{ flex: 1 }}>
<View style={{ height: "100%" }}>
<View style={{ flex: 8 }}>
<ScrollView>
<ViewShot ref="PersonalRankShot">
<View style={styles.line} collapsable={false}>
<View style={{ flex: 3 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("lap", { ...i18n_opt })}
</Text>
</View>
{chart_temperature_values.length > 0 && (
<View style={{ flex: 4 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("temperature", { ...i18n_opt })}
</Text>
</View>
)}
<View style={{ flex: 9 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("time", { ...i18n_opt })}
</Text>
</View>
{has_speed && (
<View style={{ flex: 4 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("speed", { ...i18n_opt })}
</Text>
</View>
)}
{has_bat && (
<View style={{ flex: 4 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("bat", { ...i18n_opt })}
</Text>
</View>
)}
<View style={{ flex: 4 }}>
<Text
style={[
{ paddingRight: 10 },
styles.alignRig,
styles.headerTitle
]}
>
{translate("diff", { ...i18n_opt })}
</Text>
</View>
</View>
<View style={styles.container}>
<SwipeListView
data={laps2}
disableRightSwipe={true}
renderItem={(data, rowMap) => (
<View style={styles.rowFront}>
<PersonalRankItem
dados={data.item}
settings={settings}
hasTemp={has_temp}
hasSpeed={has_speed}
hasBat={has_bat}
/>
</View>
)}
renderHiddenItem={renderHiddenItem}
leftOpenValue={75}
rightOpenValue={-90}
previewRowKey={'0'}
previewOpenValue={-40}
previewOpenDelay={3000}
//onRowDidOpen={onRowDidOpen}
/>
</View>
</ViewShot>
</ScrollView>
</View>
</View>
</View>
<TouchableOpacity
style={styles.bt_share}
onPress={() => this._captureChart()}
>
<Icon name="share" size={20} color="#ffffff" />
</TouchableOpacity>
</Container>
);
}
That am I missing here?
This used to work in old version of RN and react-navigation (4) without any problem.